:root {
--primary: #000000; /* Preto */
--cta-background-image: url('./img/fundo07.jpg'); /* << ALTERE A IMAGEM DE FUNDO DO CTA AQUI */
--secondary: #f6b21b; /* Amarelo-ouro */
--accent: #f6b21b; /* Amarelo-ouro (mantido igual para consistência) */
--dark: #121212; /* Preto quase preto */
--light: #FFFFFF; /* Branco */
--light-gray: #f8f9fa; /* Cinza claro */
--gray: #808080; /* Cinza */
--dark-gray: #333333; /* Cinza escuro */
--font-primary: 'Roboto', sans-serif;
--font-secondary: 'Montserrat', sans-serif;
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
/* --- ESTILIZAÇÃO FLUÍDA --- */
/* Define o tamanho da fonte base de forma responsiva.
Mínimo: 14px, Preferencial: escala com a largura da tela, Máximo: 18px.
Todas as unidades 'rem' no site agora escalarão com base nisso. */
font-size: clamp(14px, calc(13.2px + 0.25vw), 18px);
scroll-behavior: smooth;
overflow-x: hidden; /* Garante que nenhum elemento vaze da tela, corrigindo a barra branca lateral */
}
body {
font-family: var(--font-primary);
background-color: var(--dark);
color: var(--light);
/* A propriedade overflow-x foi movida para a tag para uma contenção mais eficaz */
line-height: 1.6;
}
/* Scrollbar personalizado */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
::-webkit-scrollbar-thumb {
background: var(--secondary);
border-radius: 10px;
}
/* --- Header Principal (Sempre Fixo no Topo) --- */
.header-main {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1001; /* Fica acima do header de rolagem */
background: var(--dark);
padding: 0.5rem 5%; /* Padding vertical reduzido */
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
transition: opacity 0.4s ease; /* Transição mais limpa (apenas fade) */
}
/* Classe para esconder o header principal quando o secundário aparece */
.header-main.hidden-by-scroll {
opacity: 0;
pointer-events: none;
}
/* --- Header Secundário (Aparece na Rolagem) --- */
.header-on-scroll {
position: fixed;
width: 95%;
max-width: 1600px;
left: 50%;
top: 10px;
z-index: 1000;
background: rgba(18, 18, 18, 0.75);
backdrop-filter: blur(10px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
padding: 0.5rem 2rem; /* Padding vertical reduzido */
display: flex;
justify-content: space-between;
align-items: center;
/* Estado inicial: escondido, ligeiramente menor e deslocado para cima */
opacity: 0;
transform: translateX(-50%) translateY(-10px) scale(0.95);
pointer-events: none;
transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
/* Classe para mostrar o header secundário */
.header-on-scroll.visible {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
pointer-events: auto;
transition-delay: 0.15s; /* Atraso para a entrada, evitando sobreposição */
}
.logo {
display: flex;
align-items: center;
gap: 15px;
}
.logo img {
height: 3.5rem; /* Altura do logo reduzida */
}
.logo h1 {
font-family: var(--font-secondary);
font-weight: 700;
font-size: 1.5rem;
background: linear-gradient(135deg, var(--secondary), var(--accent));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: 1px;
}
nav ul {
display: flex;
list-style: none;
gap: 3.5rem;
}
nav a {
color: rgba(255, 255, 255, 0.4);
text-decoration: none;
font-family: var(--font-secondary); /* Mudei para Montserrat */
font-weight: 300; /* Deixando a fonte mais leve (light) */
font-size: 1.1rem;
position: relative;
padding: 5px 0;
transition: var(--transition);
}
/* Centraliza a navegação em telas de desktop */
@media (min-width: 769px) {
nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
/* --- Responsividade para o Header em telas menores --- */
@media (max-width: 768px) {
.header-main, .header-on-scroll {
padding-top: 0.4rem; /* Ajuste fino para mobile */
padding-bottom: 0.4rem; /* Ajuste fino para mobile */
}
.header-on-scroll {
padding-left: 1.5rem;
padding-right: 1rem;
}
.logo img {
height: 3rem; /* Reduz ainda mais a altura do logo em mobile */
}
}
nav a:hover {
color: var(--accent);
}
nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--secondary), var(--accent));
transition: var(--transition);
}
nav a:hover::after {
width: 100%;
}
.menu-toggle {
display: none;
flex-direction: column;
justify-content: space-around;
width: 1.8rem;
height: 1.5rem;
cursor: pointer;
}
.menu-toggle span {
display: block;
height: 2px;
width: 100%;
background-color: var(--light);
border-radius: 3px;
transition: var(--transition);
}
/* --- Globo 3D --- */
#globe-canvas-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0; /* Coloca o globo atrás do conteúdo */
}
.hero {
height: 100vh;
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
/* Padding horizontal movido para .hero-content para o globo ocupar a tela inteira */
padding-top: 80px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IGlkPSJwYXR0ZXJuLWJhY2tncm91bmQiIHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIiBmaWxsPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMDMpIj48L3JlY3Q+PHBhdGggZmlsbD0icmdiYSgyNTUsIDEwNywgMCwgMC4wNSkiIGQ9Ik0tMTAgMTBIMTBWMzBILTEweiI+PC9wYXRoPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSI+PC9yZWN0Pjwvc3ZnPg==');
opacity: 0.2;
}
.hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px; /* Altura da área de transição aumentada */
/* Gradiente que mescla a seção com o fundo escuro abaixo */
background: linear-gradient(to top, var(--dark) 30%, transparent);
z-index: 5; /* Acima do globo, abaixo do conteúdo e da seta de scroll */
pointer-events: none; /* Garante que o gradiente não seja interativo */
}
.hero-content {
max-width: 950px;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
z-index: 11; /* Elevado para garantir que fique acima de todos os outros elementos na seção hero */
/* Adicionado padding para alinhar o conteúdo e evitar que toque nas bordas */
padding: 0 5%;
transition: padding 0.3s ease-out; /* Adicionado para suavizar a mudança de layout */
}
/* Ajuste para telas largas (notebooks de 17", monitores Full HD, 2k, 4k, etc.) */
@media (min-width: 1600px) {
.hero-content {
/* Aumenta o padding esquerdo de forma escalável para empurrar o conteúdo mais para o centro. */
padding-left: 10vw;
}
}
/* --- Responsividade para a Seção Hero em telas menores --- */
@media (max-width: 768px) {
.hero {
text-align: center; /* Centraliza o texto de todos os filhos */
}
.hero-content {
align-items: center; /* Centraliza os itens do flex container (como os botões) */
}
.hero p {
max-width: 90%; /* Evita que o parágrafo fique muito largo */
}
}
.hero .world {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0; /* Behind hero-content */
}
.tag {
display: inline-block;
background: rgba(104, 104, 104, 0.2);
color: var(--accent);
padding: 0.4rem 1rem;
border-radius: 55px;
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 20px;
border: 1px solid rgba(228, 167, 0, 0.651);
backdrop-filter: blur(5px);
transform: translateY(20px);
opacity: 0;
transition: opacity 0.8s ease, transform 0.8s ease;
}
.hero h2 {
font-size: clamp(2.0rem, 5vw, 3.0rem); /* Tamanho de fonte fluido (reduzido) */
font-weight: bold;
margin-bottom: 15px; /* Margem inferior reduzida */
line-height: 1.2;
transform: translateY(20px);
width: 100%; /* Garante que o título ocupe todo o espaço e quebre a linha corretamente */
opacity: 0;
transition: opacity 0.8s ease, transform 0.8s ease;
}
.hero h2 span {
background: linear-gradient(135deg, var(--secondary), var(--accent));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero p {
font-size: 1rem; /* Tamanho da fonte reduzido */
margin-bottom: 25px; /* Margem inferior reduzida */
color: rgba(255, 255, 255, 0.8);
max-width: 100%;
transform: translateY(20px);
opacity: 0;
transition: opacity 0.8s ease, transform 0.8s ease;
}
.btn {
display: inline-block;
background: linear-gradient(135deg, var(--secondary), var(--accent));
color: white;
padding: 0.9rem 1.8rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
letter-spacing: 0.5px;
transition: var(--transition);
border: none;
cursor: pointer;
font-family: var(--font-secondary); /* Alterado para Montserrat para consistência */
font-size: 16px;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(246, 178, 27, 0.3);
/* A animação de entrada foi movida para o container .hero-buttons */
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: var(--transition);
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(246, 178, 27, 0.4);
}
.btn:hover::before {
left: 100%;
}
/* --- NOVO: Estilo de Vidro 3D para o Botão da Seção Hero --- */
.hero .btn {
/* Fundo mais transparente com um gradiente sutil para profundidade */
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Compatibilidade com Safari */
/* Borda que simula o reflexo da luz no vidro */
border: 1px solid rgba(255, 255, 255, 0.15);
/* Sombra externa para flutuar + sombras internas para o efeito de borda de vidro */
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3),
inset 1px 1px 1px rgba(255, 255, 255, 0.3), /* Borda superior iluminada */
inset -1px -1px 1px rgba(0, 0, 0, 0.05); /* Sombra interna sutil */
padding: 0.8rem 1.6rem; /* Padding reduzido */
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.hero .btn:hover {
/* Ao passar o mouse, o "vidro" fica um pouco mais claro e o brilho da borda se intensifica */
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.35),
inset 1px 1px 2px rgba(255, 255, 255, 0.4),
inset -1px -1px 2px rgba(0, 0, 0, 0.1);
}
/* Container para os botões da seção Hero */
.hero-buttons {
display: flex;
flex-wrap: wrap; /* Permite que os botões quebrem a linha em telas pequenas */
gap: 20px; /* Espaço entre os botões */
align-items: center;
/* Animação de entrada para o container dos botões */
transform: translateY(20px);
opacity: 0;
transition: opacity 0.8s ease, transform 0.8s ease;
}
/* Estilo para o ícone de imagem dentro do botão */
.btn .btn-icon-img {
height: 1rem; /* Altura do ícone ajustada para 16px */
width: 1rem; /* Largura do ícone ajustada para 16px */
margin-right: 10px; /* Espaço entre o ícone e o texto */
vertical-align: middle; /* Alinha o ícone com o texto */
position: relative;
/* Garante que o ícone não herde o filtro de brilho do botão */
filter: none;
}
/* --- FIM DO NOVO ESTILO --- */
/* --- Animação de Entrada para a Seção Hero (controlada por JS) --- */
.hero.is-visible .tag {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
}
.hero.is-visible h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 0.4s;
}
.hero.is-visible p {
opacity: 1;
transform: translateY(0);
transition-delay: 0.6s;
}
.hero.is-visible .hero-buttons {
opacity: 1;
transform: translateY(0);
transition-delay: 0.8s;
}
/* --- Responsividade para os botões da seção Hero --- */
@media (max-width: 768px) {
.hero-buttons {
flex-direction: column; /* Empilha os botões verticalmente */
align-items: center; /* Centraliza os botões no container */
width: 100%; /* O container ocupa toda a largura disponível */
}
.hero-buttons .btn {
width: 90%; /* Botões ocupam 90% da largura */
max-width: 350px; /* Largura máxima para evitar que fiquem muito grandes */
padding: 0.8rem 1.5rem; /* Padding um pouco menor para mobile */
text-align: center; /* Centraliza o texto dentro do botão */
justify-content: center; /* Centraliza o conteúdo (ícone + texto) */
}
.hero h2 {
font-size: clamp(1.8rem, 7vw, 2.4rem); /* Tamanho de fonte mais adequado para mobile */
width: 100%; /* Garante que o título ocupe toda a largura no mobile */
text-align: center; /* Garante a centralização do texto do título */
}
}
/* Anima o globo para o estado final quando a seção hero se torna visível */
.hero.is-visible .world-globe {
/* Aplica a animação de entrada */
animation: globe-enter 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
pointer-events: auto; /* Permite interação com o globo após a animação */
}
.section {
padding: 6rem 5%;
position: relative;
}
/* --- NOVO BACKGROUND PROFISSIONAL: "HEXAGONAL MATRIX" --- */
/* Esta abordagem cria uma atmosfera tecnológica e sofisticada, com múltiplas camadas de detalhes e animação sutil. */
.section {
position: relative;
text-align: center;
background-color: var(--dark);
overflow: hidden;
/* Fundo minimalista para as seções padrão */
background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.03) 0%, transparent 80%);
}
/* Garante que o conteúdo da seção fique acima dos efeitos de fundo */
/* CORREÇÃO: Adicionado .service > * para que o conteúdo da seção "Sobre" também fique visível. */
.section > *, .service > *, footer > * {
position: relative;
z-index: 2; /* Conteúdo fica na camada mais alta */
}
/* Efeitos de canto com linhas de fluxo/ondas */
footer::before {
content: '';
position: absolute;
width: 800px; /* Aumenta a área do efeito para linhas mais espaçadas */
height: 800px;
z-index: 0; /* Coloca o efeito atrás do conteúdo da seção */
pointer-events: none; /* Garante que o efeito não seja interativo */
/* Múltiplos gradientes radiais para criar as linhas de onda/fluxo com um cinza mais visível */
background-image: /* Aumentei a quantidade de linhas para um efeito mais denso */
radial-gradient(circle, transparent 30%, rgba(255, 255, 255, 0.07) 30.1%, transparent 30.5%),
radial-gradient(circle, transparent 40%, rgba(255, 255, 255, 0.07) 40.1%, transparent 40.5%),
radial-gradient(circle, transparent 50%, rgba(255, 255, 255, 0.07) 50.1%, transparent 50.5%),
radial-gradient(circle, transparent 60%, rgba(255, 255, 255, 0.07) 60.1%, transparent 60.5%),
radial-gradient(circle, transparent 70%, rgba(255, 255, 255, 0.07) 70.1%, transparent 70.5%),
radial-gradient(circle, transparent 80%, rgba(255, 255, 255, 0.07) 80.1%, transparent 80.5%),
radial-gradient(circle, transparent 90%, rgba(255, 255, 255, 0.07) 90.1%, transparent 90.5%),
radial-gradient(circle, transparent 100%, rgba(255, 255, 255, 0.07) 100.1%, transparent 100.5%);
background-size: 100% 100%;
background-repeat: no-repeat;
}
footer::before {
top: 0;
left: 0;
transform: translate(-50%, -50%); /* Posiciona o centro do gradiente no canto superior esquerdo */
}
footer::after {
bottom: 0;
right: 0;
transform: translate(50%, 50%); /* Posiciona o centro do gradiente no canto inferior direito */
}
.section-title {
font-size: clamp(2rem, 4vw, 2.8rem); /* Tamanho de fonte fluido */
margin-bottom: 20px;
text-align: center;
position: relative;
padding-bottom: 15px;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--secondary), var(--accent));
border-radius: 3px;
}
.section-subtitle {
text-align: center;
color: rgba(255, 255, 255, 0.7);
max-width: 800px;
margin: 0 auto 60px;
}
/* Destaque para o subtítulo da seção de serviços */
.service .section-subtitle {
text-align: center; /* Garante que o texto dentro da pílula esteja centralizado */
font-size: 1.1rem;
color: var(--light);
/* Efeito de vidro 3D com a cor da marca */
background: linear-gradient(135deg, rgba(246, 178, 27, 0.2), rgba(246, 178, 27, 0.1));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 8px 20px; /* Mais preenchimento para forma de pílula */
border: 1px solid rgba(246, 178, 27, 0.3); /* Borda de vidro com a cor da marca */
border-radius: 30px; /* Bordas arredondadas */
display: inline-block; /* Para que o fundo e a borda se ajustem ao texto */
margin-bottom: -20px; /* Margem negativa para subir a galeria de imagens */
font-weight: 500;
/* Sombra externa para flutuar + sombras internas para efeito 3D */
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
inset 1px 1px 1px rgba(255, 255, 255, 0.25), /* Reflexo de luz na borda superior */
inset -1px -1px 1px rgba(0, 0, 0, 0.15); /* Sombra interna para profundidade */
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
position: relative; /* Necessário para o pseudo-elemento de brilho */
overflow: hidden; /* Garante que o brilho não saia das bordas */
}
/* Efeito de brilho ao passar o mouse */
.service .section-subtitle::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
transition: var(--transition);
}
.service .section-subtitle:hover {
transform: translateY(-3px); /* Efeito de elevação, igual ao do botão */
background: linear-gradient(135deg, rgba(246, 178, 27, 0.3), rgba(246, 178, 27, 0.2));
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4),
inset 1px 1px 2px rgba(255, 255, 255, 0.3),
inset -1px -1px 2px rgba(0, 0, 0, 0.2);
border-color: rgba(246, 178, 27, 0.4);
}
.service .section-subtitle:hover::before {
left: 100%;
}
/* Ajuste de espaçamento para a seção de serviços */
#services {
/* Reduz o espaço superior para aproximar a seção da galeria de imagens acima */
padding-top: 20px;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.feature-card {
background: radial-gradient(circle at 0% 0%, rgba(100, 100, 100, 0.2) 0%, transparent 40%), linear-gradient(145deg, rgba(35, 35, 35, 0.9) 0%, rgba(15, 15, 15, 0.98) 100%);
border-radius: 15px;
padding: 1.8rem;
position: relative; /* Necessário para z-index e posicionamento de ::before */
z-index: 1;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
/* Transições para o efeito hover e reset da animação de entrada */
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.5s ease;
overflow: hidden;
/* Estado inicial para a animação de entrada em cascata */
opacity: 0;
transform: translateY(30px);
cursor: pointer; /* Adicionado para indicar que é clicável */
}
/* Efeito de brilho aprimorado que percorre o card na diagonal */
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 150%; /* Maior que o card para o efeito de inclinação */
height: 100%;
/* Gradiente sutil com um toque da cor da marca */
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.05), rgba(246, 178, 27, 0.1), transparent 70%);
z-index: 1; /* Fica entre o fundo e o conteúdo */
transform: translateX(-100%);
transition: transform 0.75s cubic-bezier(0.23, 1, 0.32, 1); /* Transição suave e elaborada */
}
.feature-card:hover {
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
/* Efeito de elevação e zoom mais sutil e profissional */
transform: translateY(-8px) scale(1.03);
/* A borda ganha um destaque com a cor da marca */
border-color: rgba(246, 178, 27, 0.5);
}
.feature-card:hover::before {
transform: translateX(100%);
}
/* Link que cobre todo o card para torná-lo clicável */
.card-full-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3; /* Acima do conteúdo (2) e do brilho (1) */
text-decoration: none;
color: transparent; /* Esconde qualquer texto de link que possa aparecer */
border-radius: 15px; /* Garante que o link tenha as mesmas bordas do card */
}
/* Ícone de clique que aparece no hover */
.card-click-icon {
position: absolute;
top: 20px;
right: 20px;
font-size: 22px;
color: rgba(255, 255, 255, 0.3);
z-index: 4; /* Acima do link overlay */
pointer-events: none; /* O ícone não deve interceptar o clique, que é do link abaixo */
opacity: 0;
transform: scale(0.8) rotate(-10deg);
transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease;
}
.feature-card:hover .card-click-icon {
opacity: 1;
transform: scale(1) rotate(0deg);
color: var(--accent);
}
/* Contêiner para o ícone e título */
.feature-header {
display: flex; /* Usa Flexbox para alinhar horizontalmente */
align-items: center; /* Alinha verticalmente ao centro */
margin-bottom: 20px; /* Espaço entre o cabeçalho (ícone+título) e o texto descritivo */
position: relative;
/* Garante que o conteúdo fique acima do efeito de brilho */
z-index: 2;
}
/* Ajusta a margem do ícone dentro do novo contêiner */
.feature-header .feature-icon {
margin-bottom: 0; /* Remove a margem inferior original do ícone */
margin-right: 15px; /* Adiciona espaço à direita do ícone */
}
.feature-icon {
width: 3.5rem;
height: 3.5rem;
background: rgba(246, 178, 27, 0.15);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.2rem; /* Esta margem será zerada se o ícone estiver dentro de .feature-header */
border: 1px solid rgba(246, 178, 27, 0.2);
transition: transform 0.4s ease, background-color 0.4s ease; /* Adiciona transição para o ícone */
}
/* Animação do ícone ao passar o mouse sobre o card */
.feature-card:hover .feature-icon {
transform: scale(1.1) rotate(-5deg);
background: rgba(246, 178, 27, 0.25); /* Fundo do ícone fica mais brilhante */
}
.feature-icon i {
font-size: 1.8rem;
color: var(--accent);
}
/* Ajusta a margem do título dentro do novo contêiner */
.feature-header .feature-title {
margin-bottom: 0; /* Remove a margem inferior original do título */
}
.feature-title {
font-size: 1.25rem; /* Diminuído de 22px para 20px */
margin-bottom: 1rem; /* Esta margem será zerada se o título estiver dentro de .feature-header */
/* position e z-index removidos, pois são controlados pelo .feature-header */
}
.feature-text {
color: rgba(255, 255, 255, 0.7);
/* Estilo simplificado para garantir que o texto esteja sempre visível */
position: relative;
/* Garante que o texto fique acima do efeito de brilho */
z-index: 2;
opacity: 1;
max-height: 1000px; /* Altura máxima generosa para o conteúdo */
margin-top: 1rem;
font-size: 0.9rem;
line-height: 1.5;
text-align: justify;
}
/* Ajuste para a seção "Quem Somos" (service) ter mais espaço no topo */
/* CORREÇÃO: Adicionando as propriedades de fundo e posicionamento para corrigir o bug de renderização. */
.service {
position: relative;
text-align: center;
background-color: var(--dark);
overflow: hidden;
/* Padding padrão para seções, garantindo espaçamento consistente */
padding: 6rem 5%;
}
/* Otimização de Performance: Animação de partículas movida para um pseudo-elemento com transform */
.service::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
z-index: 0;
background-image:
radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
radial-gradient(circle, rgba(255, 255, 255, 0.04) 1.5px, transparent 1.5px);
background-size: 30px 30px, 60px 60px, 125px 125px;
animation: move-particles-transform 150s linear infinite;
}
/* Sombra superior para conectar com a seção hero */
.service::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px; /* Altura da área de transição aumentada */
background: linear-gradient(to bottom, var(--dark) 30%, transparent);
z-index: 1; /* Fica acima do fundo de partículas, mas abaixo do conteúdo */
pointer-events: none;
}
.about {
/* Layout alterado de grid para flex-column para reordenar os elementos */
display: flex;
flex-direction: column;
align-items: center; /* Centraliza os itens horizontalmente */
}
/* Ajustes na imagem da seção "Quem Somos" */
#about .about-image img {
max-width: 90%; /* Reduz o tamanho da imagem para 90% do seu container */
display: block; /* Necessário para a margem automática funcionar */
margin: 0 auto; /* Centraliza a imagem horizontalmente */
border-radius: 15px; /* Arredonda as bordas da imagem */
}
/* Layout para a seção "Quem Somos" em telas maiores */
@media (min-width: 993px) {
#about .about {
display: grid;
grid-template-columns: 1fr 1fr; /* Duas colunas de tamanho igual */
gap: 50px; /* Espaço entre o texto e a imagem */
}
#about .about-title {
text-align: left; /* Alinha o título à esquerda */
}
#about .about-title::after {
left: 0; /* Alinha a linha do título à esquerda */
transform: translateX(0);
}
}
.gallery-scroll-wrapper {
width: 100%;
max-width: 1400px; /* Largura máxima do carrossel visível */
overflow: hidden;
/* Efeito de fade nas laterais para suavizar a entrada e saída das imagens */
-webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
position: relative; /* Adicionado para posicionar os botões */
perspective: 1000px; /* Adicionado para criar um contexto 3D para os filhos */
/* Adiciona espaço vertical para o efeito de destaque não ser cortado */
padding-top: 20px; /* Aumentado para dar mais espaço ao efeito de elevação */
padding-bottom: 50px;
margin-bottom: -40px; /* Compensa o padding para manter os dots próximos */
}
/* Botões de navegação da galeria */
.gallery-nav-btn {
position: absolute;
top: 50%; /* Centraliza verticalmente de forma responsiva */
transform: translateY(-50%);
z-index: 10;
background: rgba(18, 18, 18, 0.7);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
color: white;
width: 45px;
height: 45px;
border-radius: 10px; /* Alterado para quadrado com cantos suaves */
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: all 0.3s ease;
opacity: 0.7; /* Botões visíveis por padrão, mas com transparência */
}
.gallery-scroll-wrapper:hover .gallery-nav-btn,
.gallery-nav-btn:hover {
opacity: 1;
/* Efeito de vidro com a cor da marca */
background: linear-gradient(135deg, rgba(246, 178, 27, 0.25), rgba(246, 178, 27, 0.15));
color: var(--light); /* Ícone claro para melhor contraste */
border-color: rgba(246, 178, 27, 0.4);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2),
inset 1px 1px 2px rgba(255, 255, 255, 0.25),
inset -1px -1px 2px rgba(0, 0, 0, 0.1);
transform: translateY(-50%) scale(1.05); /* Adiciona um leve efeito de zoom */
}
.gallery-nav-btn.prev {
left: 20px;
}
.gallery-nav-btn.next {
right: 20px;
}
.about-gallery {
display: flex;
flex-wrap: nowrap; /* Garante que as imagens fiquem em uma única linha */
gap: 2px; /* Espaço entre as imagens (ainda mais reduzido) */
transform-style: preserve-3d; /* Garante que o contexto 3D dos filhos seja mantido */
/* A animação de rolagem agora é controlada via JavaScript */
}
/* Corrigido para aplicar estilos diretamente às imagens da galeria, que não estão em um container */
.about-gallery > img {
position: relative;
display: block;
object-fit: cover;
width: 56.25rem; /* Reduzido de 68.75rem (1100px -> 900px) */
height: 28.75rem; /* Reduzido de 35.125rem (562px -> 460px) */
flex-shrink: 0;
border-radius: 15px;
overflow: hidden; /* Mantém a imagem e a legenda dentro das bordas arredondadas */
z-index: 1;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
border: 2px solid rgba(255, 255, 255, 0.1);
transform: scale(0.92);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
opacity: 0;
animation: none;
filter: brightness(0.7) saturate(0.9);
cursor: pointer;
}
/* A funcionalidade de legenda (caption) não é possível com a estrutura HTML atual (![]()
sem container)
e foi desconsiderada para esta correção. */
.image-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 3.75rem 1.8rem 1.8rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 20%, transparent 100%);
color: rgba(255, 255, 255, 0.95);
z-index: 2;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s 0.2s ease-out, transform 0.4s 0.2s ease-out;
pointer-events: none;
}
.image-caption p {
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
text-align: justify;
}
/* Corrigido para aplicar a classe ativa diretamente na imagem */
.about-gallery > img.gallery-image-active {
transform: scale(1.15) translateY(-15px);
z-index: 10;
border-color: var(--secondary);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(246, 178, 27, 0.5);
filter: brightness(1) saturate(1);
}
.about-gallery > img.gallery-image-active + .image-caption { /* Seletor hipotético, não funcionará */
opacity: 1;
transform: translateY(0);
}
.gallery-dots {
text-align: center;
margin-top: 10px; /* Reduzido ainda mais para aproximar os pontos da galeria */
}
.gallery-dots .dot {
display: inline-block;
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
margin: 0 6px;
transition: background-color 0.3s ease, transform 0.3s ease;
border: none;
}
.gallery-dots .dot.active {
background: var(--secondary);
transform: scale(1.2);
}
.about-content {
padding-right: 0; /* Removido padding que era para o layout de grid */
width: 100%;
max-width: 1400px; /* Alinha a largura do texto com a da galeria */
}
.about-title {
font-size: 2.2rem; /* O espaçamento agora é controlado pelo 'gap' do container .about */
margin-bottom: 0;
position: relative;
padding-bottom: 15px;
text-align: center; /* Centraliza o texto do título */
}
/* CORREÇÃO: As propriedades abaixo estavam fora de um seletor, causando um erro de sintaxe. */
.about-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%; /* Centraliza a linha abaixo do título */
transform: translateX(-50%); /* Centraliza a linha abaixo do título */
width: 3.75rem;
height: 3px;
background: linear-gradient(90deg, var(--secondary), var(--accent));
border-radius: 3px;
}
.about-text {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 30px;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 20px;
margin-top: 40px;
}
.stat {
text-align: center;
}
.stat-value {
font-size: clamp(2rem, 4vw, 2.8rem); /* Tamanho de fonte fluido */
font-weight: 700;
margin-bottom: 5px;
background: linear-gradient(135deg, var(--secondary), var(--accent));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.stat-label {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
/* --- Estilos para a Seção de Parceiros (Carrossel Automático) --- */
.partners-scroll-wrapper {
width: 100%;
overflow: hidden;
margin-top: 60px;
/* Máscara para um efeito de fade nas laterais */
-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
/* Adiciona espaço vertical para a animação de hover não ser cortada */
padding-top: 10px;
padding-bottom: 10px;
}
.partners-container {
display: flex; /* Usar flexbox para o container principal */
flex-wrap: nowrap; /* Garantir que os logos fiquem em uma única linha */
align-items: center;
gap: 5rem; /* Aumentado o espaçamento entre logos */
/* Animação de rolagem */
animation: scroll-logos 30s linear infinite;
}
@keyframes scroll-logos {
from { transform: translateX(0%); }
to { transform: translateX(-50%); } /* Move até a metade, onde começa a cópia */
}
.partners-scroll-wrapper:hover .partners-container {
animation-play-state: paused; /* Pausa a animação ao passar o mouse */
}
.partner-logo {
height: 5.6rem; /* Aumentando a altura do card */
padding: 1.2rem 2.5rem; /* Ajustando o padding */
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
flex-shrink: 0; /* Impede que os logos encolham */
}
.partner-logo img {
max-height: 3.75rem; /* Aumentando a altura da imagem */
filter: grayscale(100%) brightness(1.5) contrast(0.8); /* Efeito esbranquiçado */
opacity: 0.8;
transition: var(--transition);
}
.partner-logo:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.08));
border-color: rgba(246, 178, 27, 0.3);
transform: translateY(-5px) scale(1.05); /* Efeito de elevação e zoom */
}
.partner-logo:hover img {
filter: grayscale(0%) brightness(1) contrast(1);
opacity: 1;
}
.cta {
background-image: var(--cta-background-image);
background-size: cover;
background-position: center;
background-attachment: fixed; /* Efeito parallax */
text-align: center;
padding: 120px 5%;
position: relative;
overflow: hidden;
}
/* Overlay escuro sobre a imagem de fundo */
.cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(18, 18, 18, 0.7); /* Cor escura com opacidade reduzida */
z-index: 1; /* Acima da imagem de fundo, abaixo do conteúdo */
}
.cta-content {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 2; /* Acima do gradiente */
}
.cta-title {
font-size: clamp(2.2rem, 4.5vw, 3rem); /* Tamanho de fonte fluido */
margin-bottom: 20px;
}
.cta-text {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 40px;
font-size: 1.1rem;
}
/* Novo estilo do formulário */
.contact-form {
max-width: 800px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.2rem;
background: rgba(0, 0, 0, 0.7);
padding: 40px;
border-radius: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(246, 178, 27, 0.2);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group.full {
grid-column: 1 / 3;
}
.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
}
.form-control {
width: 100%;
padding: 0.9rem 1.2rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
outline: none;
font-family: var(--font-primary);
color: var(--light);
transition: var(--transition);
}
.form-control option {
background-color: #333333;
color: white;
padding: 8px 12px;
}
.form-control:focus {
border-color: var(--secondary);
box-shadow: 0 0 0 3px rgba(246, 178, 27, 0.2);
background: rgba(30, 30, 30, 0.8);
}
textarea.form-control {
resize: vertical;
min-height: 120px;
}
select.form-control {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 20px center;
padding-right: 40px;
}
.submit-btn {
/* Efeito de vidro com a cor da marca */
background: linear-gradient(135deg, rgba(246, 178, 27, 0.25), rgba(246, 178, 27, 0.15));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(246, 178, 27, 0.3);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
color: white;
font-family: var(--font-primary);
font-weight: 600;
padding: 14px 30px;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
grid-column: 1 / 3;
margin-top: 10px;
position: relative;
overflow: hidden;
font-size: 16px;
}
.submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: var(--transition);
}
.submit-btn:hover {
/* Intensifica o efeito de vidro no hover */
background: linear-gradient(135deg, rgba(246, 178, 27, 0.4), rgba(246, 178, 27, 0.25));
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
border-color: rgba(246, 178, 27, 0.5);
}
.submit-btn:hover::before {
left: 100%;
}
.submit-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.error-message {
color: #ff4d4d;
font-size: 0.875rem;
margin-top: 5px;
display: none;
}
.success-message {
background-color: rgba(40, 167, 69, 0.2);
border: 1px solid rgba(40, 167, 69, 0.4);
color: #ffffff;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
display: none;
}
.loading {
display: inline-block;
width: 1.2rem;
height: 1.2rem;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
margin-left: 10px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
footer {
background: var(--dark);
padding: 4rem 5% 2rem;
position: relative;
overflow: hidden; /* Garante que o efeito de fundo não vaze */
/* margin-left: -30px; <- Removido daqui */
}
.footer-services-col {
/* margin-left: -45px; */ /* Removida a margem negativa */
}
/* Estilo específico para a lista de serviços no rodapé */
.footer-services-col .footer-links {
/* CORREÇÃO: Usar Grid em vez de column-count para mais controle e
prevenção de overflow. Definido para 2 colunas. */
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 20px; /* Espaço apenas entre as colunas */
}
/* Garante que os itens de serviço não quebrem a linha, mantendo-os em uma única linha. */
.footer-services-col .footer-links a {
white-space: nowrap;
}
.footer-grid {
display: grid;
/*
* A definição de colunas anterior era totalmente fluida, o que causava
* espaçamento excessivo em telas muito largas.
* Esta nova definição mantém a responsividade, mas limita a largura
* máxima das colunas para um layout mais coeso em telas grandes.
*/
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
max-width: 1400px; /* Limita a largura máxima do grid do rodapé */
margin: 0 auto; /* Centraliza o grid do rodapé em telas muito largas */
}
/* Em telas muito largas, força o rodapé a ter 4 colunas para evitar que fiquem largas demais */
@media (min-width: 1200px) {
.footer-grid {
/* Ajuste para dar mais espaço à coluna de serviços (3ª) e menos à de links rápidos (2ª) */
/* Ordem: Logo | Links Rápidos | Serviços | Contato */
grid-template-columns: 1.5fr 1fr 2fr 1.5fr;
}
}
.footer-logo {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.footer-logo img {
height: 4rem;
}
.footer-logo h3 {
font-family: var(--font-secondary);
font-weight: 700;
font-size: 1.1rem;
background: linear-gradient(135deg, var(--secondary), var(--accent));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.footer-about {
color: rgba(255, 255, 255, 0.6);
margin-bottom: 25px;
max-width: 300px;
}
.social-links {
display: flex;
gap: 15px;
}
.social-link {
width: 2.5rem;
height: 2.5rem;
/* Efeito de vidro 3D */
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25),
inset 1px 1px 1px rgba(255, 255, 255, 0.2),
inset -1px -1px 1px rgba(0, 0, 0, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--light);
font-size: 1.1rem;
/* Atualiza a transição para incluir as novas propriedades */
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
text-decoration: none;
}
.social-link:hover {
/* Intensifica o efeito de vidro e a cor do ícone */
background: linear-gradient(135deg, rgba(246, 178, 27, 0.2), rgba(246, 178, 27, 0.1));
color: var(--accent);
transform: translateY(-5px) scale(1.05); /* Efeito de elevação e zoom */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3),
inset 1px 1px 2px rgba(255, 255, 255, 0.3),
inset -1px -1px 1px rgba(0, 0, 0, 0.15);
}
.footer-title {
font-size: 1.1rem;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
color: var(--light);
}
.footer-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 2.5rem;
height: 2px;
background: var(--secondary);
}
.footer-links {
list-style: none;
/* Padrão para listas no rodapé: uma única coluna */
column-count: 1;
font-size: 0.9rem; /* Diminui o tamanho da fonte */
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: var(--transition);
display: flex;
align-items: center;
gap: 8px;
/* white-space: nowrap; <- Removido daqui, aplicado apenas na lista de serviços */
}
.footer-links a:hover {
color: var(--accent);
padding-left: 5px;
}
.footer-links a i {
font-size: 0.9rem;
color: var(--secondary);
}
.footer-contact-item {
display: flex;
gap: 15px;
margin-bottom: 20px;
color: rgba(255, 255, 255, 0.6);
}
.footer-contact-item i {
color: var(--secondary);
font-size: 1.1rem;
}
.footer-divider {
height: 1px;
background: rgba(255, 255, 255, 0.05);
margin: 20px 0;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
color: rgba(255, 255, 255, 0.5);
font-size: 0.875rem;
flex-wrap: wrap;
gap: 20px;
}
@media (max-width: 480px) {
.features {
grid-template-columns: 1fr;
}
}
/* Ajuste responsivo para a lista de serviços voltar a uma coluna em telas menores */
@media (max-width: 768px) {
.footer-services-col .footer-links {
/* Em telas menores, a lista de serviços volta a ter uma única coluna. */
grid-template-columns: 1fr;
}
/* Em telas menores, o repeat(auto-fit, minmax(250px, 1fr)) acima já deve resultar em 1 coluna se necessário */
}
/* Animations */
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Animação de entrada para o globo */
@keyframes globe-enter {
from {
/* Estado inicial: pequeno, rotacionado e transparente */
transform: translateX(-50%) scale(0.4) rotateY(-45deg);
opacity: 0;
}
to {
/* Estado final: tamanho normal, sem rotação e totalmente visível */
transform: translateX(-50%) scale(1.4) rotateY(0deg);
opacity: 100;
}
}
/* Animação de entrada "trenzinho" para a galeria */
@keyframes trainEnter {
from {
opacity: 0;
/* Começa do lado e menor */
transform: translateX(50px) scale(0.8);
}
to {
opacity: 1;
/* Anima para o estado de "repouso" 2D padrão */
transform: scale(0.92);
}
}
/* Animação para o fundo de partículas */
@keyframes move-particles {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px; /* Valores grandes para um movimento lento e diagonal */
}
}
/* Animação de partículas otimizada com transform */
@keyframes move-particles-transform {
from {
transform: translate(0, 0);
}
to {
transform: translate(-50%, -50%);
}
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(246, 178, 27, 0.4);
}
70% {
box-shadow: 0 0 0 15px rgba(246, 178, 27, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(246, 178, 27, 0);
}
}
/* Bouncing Arrow Animation */
.scroll-arrow {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
animation: bounce 2s infinite;
cursor: pointer;
z-index: 10;
}
.scroll-arrow i {
font-size: 1.8rem;
color: var(--light);
opacity: 0.7;
transition: var(--transition);
}
.scroll-arrow a, .scroll-arrow a:visited, .scroll-arrow a:hover {
color: inherit;
text-decoration: none;
}
.scroll-arrow:hover i {
opacity: 1;
color: var(--accent);
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0) translateX(-50%);
}
40% {
transform: translateY(-20px) translateX(-50%);
}
60% {
transform: translateY(-10px) translateX(-50%);
}
}
/* --- Botão Voltar ao Topo --- */
.scroll-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 3.125rem;
height: 3.125rem;
z-index: 999; /* Abaixo do header, mas acima do resto */
/* Efeito de vidro */
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
/* Estado inicial (escondido) */
opacity: 0;
visibility: hidden;
transform: translateY(20px);
pointer-events: none;
transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease, background 0.3s ease, border-color 0.3s ease;
}
.scroll-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
@media (max-width: 1024px) {
.about-gallery > img {
width: 43.75rem; /* Reduzido de 53.125rem (850px -> 700px) */
height: 22.3rem; /* Reduzido de 27.125rem (434px -> ~357px) */
}
}
.scroll-to-top i {
font-size: 1.25rem;
color: var(--secondary); /* Ícone amarelo */
}
.scroll-to-top:hover {
/* Fundo fica com o tom amarelo no hover */
background: linear-gradient(135deg, rgba(246, 178, 27, 0.25), rgba(246, 178, 27, 0.15));
transform: translateY(-5px); /* Efeito de elevação */
border-color: rgba(246, 178, 27, 0.4);
}
/* Responsive */
@media (max-width: 992px) {
.about {
grid-template-columns: 1fr;
gap: 40px;
}
.about-image {
order: -1;
max-width: 600px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
html {
/* Em telas menores, podemos ajustar a base para um valor fixo se o clamp não for suficiente */
}
.hero h2 {
/* O clamp() já cuida disso, mas podemos sobrescrever se necessário */
}
.cta {
padding: 80px 5%;
}
.contact-form {
grid-template-columns: 1fr; /* O formulário de contato fica com uma coluna */
padding: 30px 20px;
}
.form-group.full {
grid-column: 1;
}
.submit-btn {
grid-column: 1;
}
/* Esconde a navegação principal e mostra o menu hambúrguer */
nav {
display: none;
}
/* Estiliza o menu que abre ao clicar no hambúrguer */
nav.active {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: rgba(18, 18, 18, 0.9);
backdrop-filter: blur(10px);
padding: 20px;
flex-direction: column;
gap: 15px;
max-height: calc(100vh - 80px); /* Garante que o menu não seja muito longo em telas curtas */
overflow-y: auto; /* Adiciona rolagem se o conteúdo do menu for maior que a tela */
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
nav.active {
display: flex;
}
.menu-toggle {
display: flex;
}
.menu-toggle.active span:nth-child(1) {
transform: translateY(0.5rem) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
}
@media (max-width: 576px) {
.hero h2 {
font-size: 1rem;
}
.section {
padding: 70px 5%;
}
.cta {
padding: 60px 5%;
}
.about-gallery > img {
width: 90vw;
height: auto;
aspect-ratio: 900 / 460;
}
}
/* Loading Animation */
.loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--dark);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.8s, visibility 0.8s;
}
.loader {
width: 5rem;
height: 5rem;
position: relative;
}
.loader:before, .loader:after {
content: '';
position: absolute;
border-radius: 50%;
animation: pulse 2s linear infinite;
}
.loader:before {
width: 100%;
height: 100%;
background: rgba(246, 178, 27, 0.1);
animation-delay: 0.5s;
}
.loader:after {
width: 50%;
height: 50%;
background: var(--secondary);
top: 25%;
left: 25%;
animation: pulse 2s linear infinite;
}
.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Floating Elements */
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% {
transform: translate(0, 0px);
}
50% {
transform: translate(0, 15px);
}
100% {
transform: translate(0, 0px);
}
}
/* --- Estilos para a Seção do Mapa --- */
#map-section { /* Container principal da seção do mapa */
width: 90%; /* CORREÇÃO: Usar % para evitar overflow causado pela barra de rolagem */
max-width: 1400px; /* Limite para telas ultra-wide */
margin: 100px auto; /* Adiciona 100px de margem em cima/baixo e centraliza horizontalmente */
border-radius: 15px; /* Bordas arredondadas para integrar ao design */
overflow: hidden; /* Garante que o mapa respeite as bordas arredondadas */
padding: 25px; /* Espaçamento interno */
text-align: center;
/* Efeito de vidro 3D */
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), inset 1px 1px 1px rgba(255, 255, 255, 0.2), inset -1px -1px 1px rgba(0, 0, 0, 0.15);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
#map-section:hover {
transform: translateY(-5px) scale(1.01);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), inset 1px 1px 2px rgba(255, 255, 255, 0.3), inset -1px -1px 2px rgba(0, 0, 0, 0.2);
}
/* Wrapper para o mapa, para permitir o overlay */
.map-wrapper {
position: relative;
border-radius: 10px; /* Garante que o wrapper tenha as mesmas bordas do iframe */
overflow: hidden; /* Essencial para conter o iframe e o overlay */
}
/* Div para cobrir a área de perfil do usuário no mapa */
.map-profile-cover {
position: absolute;
top: 0;
left: 0; /* Alterado para cobrir a barra inteira */
width: 100%; /* Alterado para cobrir a barra inteira */
height: 48px; /* Altura exata da barra de título do mapa */
background-color: #2E312F; /* Cor escura para contraste com a borda */
z-index: 2; /* Fica sobre o iframe */
display: none; /* Escondido por padrão (em telas pequenas) */
/* Estilos para o texto dentro da barra */
color: var(--secondary); /* Texto amarelo para combinar com a borda */
font-size: 1.1rem;
font-weight: 600;
align-items: center;
justify-content: center; /* Centraliza o texto */
box-sizing: border-box;
border: 2px solid var(--secondary); /* Borda amarela solicitada */
}
/* Mostra o overlay apenas em telas maiores onde o perfil aparece */
@media (min-width: 641px) {
.map-profile-cover {
display: flex; /* Usa flex para alinhar o texto */
}
}
#map-section iframe {
width: 100%;
border: none; /* A borda agora é controlada pelo wrapper */
display: block; /* Remove um pequeno espaço extra que iframes podem ter na base */
position: relative; /* Garante o contexto de empilhamento correto */
z-index: 1; /* Coloca o iframe abaixo do overlay */
}
/* --- CSS Globe Styles --- */
.world {
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
cursor: move;
cursor: -moz-grab;
cursor: -webkit-grab;
cursor: grab;
}
/* Desativa a interação com o globo em dispositivos móveis/touch (telas menores que 1024px)
para que ele apenas gire automaticamente sem que o usuário possa pará-lo. */
@media (max-width: 1024px) {
.world {
pointer-events: none;
}
}
.world-bg {
position: absolute;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-size: cover;
}
.world-globe {
position: absolute;
/* Posição final ajustada para melhor enquadramento */
left: 75%;
top: 55%;
width: 0;
height: 0;
/* Estado inicial para a animação: pequeno, rotacionado e transparente */
transform: translateX(-50%) scale(0.4) rotateY(-45deg);
opacity: 0;
/* Garante que o globo não seja interativo quando invisível */
pointer-events: none;
}
.world-globe-pole {
position: absolute;
width: 530px;
height: 530px;
left: -265px;
top: -265px;
border-radius: 50% 50%;
background-color: #fff;
z-index: 1;
}
.world-globe-doms-container {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
z-index: 3;
}
.world-globe-halo {
position: absolute;
left: 50%;
top: 50%;
width: 730px;
height: 715px;
margin-left: -368px;
margin-top: -350px;
z-index: 5;
}
.mapa-mental {
background-image: url('./img/fundo05.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed; /* Efeito parallax */
padding: 100px 5%;
position: relative;
overflow: hidden;
text-align: center;
}
.mapa-mental::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(18, 18, 18, 0.7); /* Cor escura com opacidade reduzida */
z-index: 1; /* Acima da imagem de fundo, abaixo do conteúdo */
}
.mapa-mental > * {
position: relative;
z-index: 2;
}
/* --- Estilos para Satélites Orbitando (JS-Powered) --- */
.world-globe-satellites-back,
.world-globe-satellites-front {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
transform-style: preserve-3d;
pointer-events: none; /* As partículas não devem ser interativas */
animation: satellite-main-orbit 120s linear infinite; /* Rotação mais lenta */
}
.world-globe-satellites-back {
z-index: 2; /* Fica entre o polo branco e o mapa do globo */
}
.world-globe-satellites-front {
z-index: 4; /* Fica entre o mapa do globo e o halo */
}
.particle-wrapper {
position: absolute;
/* A posição (transform) será definida via JS */
}
.satellite-particle {
width: 3px;
height: 3px;
border-radius: 50%;
background-color: white;
box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.7);
animation: satellite-pulse 4s infinite ease-in-out;
/* O animation-delay será definido via JS */
}
/* Animação principal do contêiner de satélites */
@keyframes satellite-main-orbit {
from {
transform: rotateY(0deg) rotateX(20deg);
}
to {
transform: rotateY(360deg) rotateX(20deg); /* Gira na direção oposta ao globo */
}
}
/* Animação de pulso para as partículas */
@keyframes satellite-pulse {
0%, 100% {
transform: scale(1.2);
opacity: 1;
}
50% {
transform: scale(0.6);
opacity: 0.7;
}
}
.mapa-text-container {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), inset 1px 1px 1px rgba(255, 255, 255, 0.2), inset -1px -1px 1px rgba(0, 0, 0, 0.15);
border-radius: 15px;
padding: 40px;
margin: 0 auto 10px; /* Margem inferior reduzida para aproximar do mapa */
max-width: 800px;
}
/* Estilos para a classe mapa com id mental */
.mapa#mental {
background-image: url('./img/fundom04.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed; /* Efeito parallax */
text-align: center;
padding: 60px 5%; /* Padding vertical reduzido para aproximar os elementos */
position: relative;
}
.mapa#mental::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(18, 18, 18, 0.7); /* Cor escura com opacidade reduzida */
z-index: 1; /* Acima da imagem de fundo, abaixo do conteúdo */
}
.mapa#mental > * {
position: relative;
z-index: 2;
}
.mapa#mental .section-subtitle {
margin-bottom: 0; /* A margem agora é controlada pelo container de texto */
}
.mapa-container {
margin-top: 0; /* Remove a margem superior para aproximar o mapa do texto */
position: relative;
z-index: 2;
overflow: hidden; /* Esconde a imagem que está fora da tela */
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
max-width: 1200px; /* Largura para o carrossel de parceria (aumentada) */
margin: 0 auto; /* Centraliza o container */
}
.mapa#mental .mapa-container {
max-width: 1200px; /* Largura máxima do mapa de alcance (aumentada) */
margin: 0 auto; /* Centraliza o container do mapa */
padding: 0; /* Remove padding que pode ter sido herdado */
}
/* Container que se move (o carrossel em si) */
.mapa-carousel {
display: flex;
width: 200%; /* Dobro da largura, pois são 2 imagens */
animation: slide-mapa 15s ease-in-out infinite;
}
/* Animação para deslizar as imagens */
@keyframes slide-mapa {
0%, 25% {
transform: translateX(0%); /* Mostra a primeira imagem */
}
50%, 75% {
transform: translateX(-50%); /* Mostra a segunda imagem */
}
100% {
transform: translateX(0%); /* Volta para a primeira */
}
}
.mapa-carousel img {
width: 50%; /* Cada imagem ocupa metade do container do carrossel */
height: auto;
display: block;
}
/* Garante que a imagem do mapa se ajuste ao seu container */
.mapa#mental .mapa-container img {
width: 100%;
height: auto;
display: block;
}
.mapa#mental.is-visible .mapa-text-container {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s; /* Atraso para o container de texto */
}
.mapa#mental.is-visible .mapa-container {
opacity: 1;
transform: translateY(0);
transition-delay: 0.4s; /* Atraso maior para o mapa, criando um efeito em cascata */
}
/* Animação de entrada para a seção do mapa */
.mapa#mental .mapa-text-container,
.mapa#mental .mapa-container {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Botões da seção de parceria (posicionados dentro da imagem) */
.parceria-buttons {
/* Posicionamento sobre a imagem */
position: absolute;
bottom: 5%; /* Ajusta um pouco a posição vertical */
right: 5%; /* Posiciona os botões a 5% da borda direita do mapa-container */
z-index: 10; /* acima da imagem */
/* Layout */
display: flex;
gap: 15px;
align-items: center;
pointer-events: auto;
}
.parceria-buttons .btn {
/* Estilo de vidro que estava no HTML */
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
/* Tamanho responsivo para o texto e padding */
font-size: clamp(0.75rem, 1.5vw, 0.9rem); /* 12px -> 14.4px */
padding: clamp(0.5rem, 1.2vw, 0.7rem) clamp(1rem, 2.5vw, 1.4rem);
max-width: 260px;
white-space: nowrap;
}
/* Em telas muito largas, mantém distância das bordas do layout */
@media (min-width: 1600px) {
.parceria-buttons {
right: 40px; /* Ajuste para telas muito largas */
bottom: 48px;
}
}
/* Em telas menores empilha os botões e os centraliza sob a imagem */
@media (max-width: 900px) {
.parceria-buttons {
position: static;
flex-direction: column; /* Empilha os botões */
margin: 20px auto 0 auto;
justify-content: center;
width: 90%; /* Garante que os botões não fiquem muito largos */
max-width: 400px; /* Limite de largura */
}
.parceria-buttons .btn {
width: 100%; /* Faz os botões ocuparem a largura do container */
justify-content: center; /* Centraliza o conteúdo do botão */
}
.mapa-container { padding: 0 12px; }
}