/* ==========================================================================
VOLAREOS - FOLHA DE ESTILO (CSS)
--------------------------------------------------------------------------
COMO USAR:
1. Renomeie este arquivo de "volareos_estilo.txt" para "estilo.css"
2. Coloque-o na MESMA PASTA do arquivo index.html
3. Verifique se o do HTML tem:
--------------------------------------------------------------------------
PALETA OFICIAL:
- Laranja/Vermelho principal .... #ff3300
- Preto absoluto (secundária) ... #000000
- Branco ........................ #ffffff
- Cinza claro (fundos) .......... #f4f4f4
- Cinza médio (textos) .......... #8a8a8a
========================================================================== */
/* ==========================================================================
1. VARIÁVEIS GLOBAIS (mude as cores AQUI para refletir no site inteiro)
========================================================================== */
:root {
/* CORES ------------------------------------------------------------------ */
--cor-principal: #ff3300; /* Laranja/vermelho da marca */
--cor-principal-escura: #cc2900; /* Tom mais escuro p/ hover dos botões */
--cor-preto: #000000; /* Preto absoluto */
--cor-branco: #ffffff; /* Branco */
--cor-cinza-claro: #f4f4f4; /* Fundo de seções alternadas */
--cor-cinza-medio: #8a8a8a; /* Textos secundários */
--cor-cinza-escuro: #1a1a1a; /* Fundos escuros suaves */
/* TIPOGRAFIA ------------------------------------------------------------- */
--fonte-titulo: 'Poppins', 'Montserrat', sans-serif; /* Títulos */
--fonte-texto: 'Inter', 'Open Sans', sans-serif; /* Textos corridos */
/* ESPAÇAMENTOS ----------------------------------------------------------- */
--espaco-secao: 100px; /* Espaço vertical entre seções */
--largura-max: 1200px; /* Largura máxima do conteúdo central */
/* EFEITOS ---------------------------------------------------------------- */
--raio-borda: 12px; /* Arredondamento padrão de cards/botões */
--sombra-card: 0 10px 30px rgba(0, 0, 0, 0.08); /* Sombra suave dos cards */
--transicao: all 0.3s ease; /* Transição padrão de animações */
}
/* ==========================================================================
2. RESET E CONFIGURAÇÕES BASE
========================================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* Faz padding e border NÃO aumentarem o tamanho */
}
html {
scroll-behavior: smooth; /* Rolagem suave ao clicar nos links do menu */
}
body {
font-family: var(--fonte-texto);
color: var(--cor-preto);
line-height: 1.6;
background-color: var(--cor-branco);
overflow-x: hidden; /* Evita rolagem horizontal indesejada */
}
/* Container central reutilizável — centraliza e limita a largura do conteúdo */
.container {
max-width: var(--largura-max);
margin: 0 auto; /* Centraliza horizontalmente */
padding: 0 20px; /* Respiro nas laterais (importante no celular) */
}
/* Títulos padrão */
h1, h2, h3, h4 {
font-family: var(--fonte-titulo);
font-weight: 700;
line-height: 1.2;
}
/* Título de seção (usado no topo de cada bloco) */
.titulo-secao {
font-size: 2.5rem;
text-align: center;
margin-bottom: 15px;
}
/* Subtítulo abaixo do título de seção */
.subtitulo-secao {
font-size: 1.1rem;
text-align: center;
color: var(--cor-cinza-medio);
max-width: 600px;
margin: 0 auto 50px auto; /* Centraliza e dá espaço abaixo */
}
/* Destaca uma palavra na cor da marca (use ) */
.destaque {
color: var(--cor-principal);
}
/* ==========================================================================
3. BOTÕES (CTAs) — os mais importantes para conversão!
========================================================================== */
/* Botão principal (laranja) — usar nas chamadas de ação de venda */
.btn-principal {
display: inline-block;
background-color: var(--cor-principal);
color: var(--cor-branco);
font-family: var(--fonte-titulo);
font-weight: 600;
font-size: 1.1rem;
padding: 16px 38px;
border: none;
border-radius: var(--raio-borda);
cursor: pointer;
text-decoration: none;
transition: var(--transicao);
box-shadow: 0 8px 20px rgba(255, 51, 0, 0.3); /* Sombra laranja "glow" */
}
.btn-principal:hover {
background-color: var(--cor-principal-escura);
transform: translateY(-3px); /* Leve "levantada" ao passar o mouse */
box-shadow: 0 12px 28px rgba(255, 51, 0, 0.45);
}
/* Botão secundário (contorno) — para ações menos prioritárias */
.btn-secundario {
display: inline-block;
background-color: transparent;
color: var(--cor-preto);
font-family: var(--fonte-titulo);
font-weight: 600;
font-size: 1.1rem;
padding: 16px 38px;
border: 2px solid var(--cor-preto);
border-radius: var(--raio-borda);
cursor: pointer;
text-decoration: none;
transition: var(--transicao);
}
.btn-secundario:hover {
background-color: var(--cor-preto);
color: var(--cor-branco);
}
/* ==========================================================================
4. CABEÇALHO / MENU DE NAVEGAÇÃO (fixo no topo)
========================================================================== */
.cabecalho {
position: fixed; /* Fica fixo mesmo ao rolar a página */
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.95); /* Branco levemente transparente */
backdrop-filter: blur(10px); /* Efeito "vidro fosco" moderno */
z-index: 1000; /* Fica acima de tudo */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.cabecalho .container {
display: flex;
justify-content: space-between; /* Logo à esquerda, menu à direita */
align-items: center;
padding-top: 15px;
padding-bottom: 15px;
}
/* Logo no cabeçalho — ajuste a altura conforme seu arquivo de imagem */
.cabecalho-logo img {
height: 40px;
width: auto;
}
/* Lista de links do menu */
.menu-nav ul {
display: flex;
list-style: none;
gap: 30px; /* Espaço entre os itens do menu */
align-items: center;
}
.menu-nav a {
text-decoration: none;
color: var(--cor-preto);
font-weight: 500;
transition: var(--transicao);
}
.menu-nav a:hover {
color: var(--cor-principal);
}
/* ==========================================================================
5. SEÇÃO HERO (primeira dobra — a mais importante!)
========================================================================== */
.hero {
background-color: var(--cor-preto); /* Fundo preto = laranja "brilha" */
color: var(--cor-branco);
padding: 180px 0 100px 0; /* Topo maior por causa do menu fixo */
position: relative;
overflow: hidden;
}
/* Grade de 2 colunas: texto à esquerda, imagem/mockup à direita */
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.hero-titulo {
font-size: 3.5rem;
margin-bottom: 20px;
}
.hero-subtitulo {
font-size: 1.25rem;
color: #d0d0d0;
margin-bottom: 35px;
}
/* Grupo de botões do hero */
.hero-botoes {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
/* No hero (fundo escuro), o botão secundário precisa ser claro */
.hero .btn-secundario {
color: var(--cor-branco);
border-color: var(--cor-branco);
}
.hero .btn-secundario:hover {
background-color: var(--cor-branco);
color: var(--cor-preto);
}
/* Imagem/mockup do sistema no hero */
.hero-imagem img {
width: 100%;
border-radius: var(--raio-borda);
box-shadow: 0 20px 50px rgba(255, 51, 0, 0.25);
}
/* Selo de "sem cartão de crédito" abaixo dos botões */
.hero-selo {
margin-top: 20px;
font-size: 0.9rem;
color: var(--cor-cinza-medio);
}
/* ==========================================================================
6. SEÇÃO PROVA DE DOR ("Você reconhece isso?")
========================================================================== */
.dor {
padding: var(--espaco-secao) 0;
background-color: var(--cor-cinza-claro);
}
/* Grade de cards de "dores" */
.dor-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 colunas no desktop */
gap: 25px;
}
.dor-card {
background-color: var(--cor-branco);
padding: 30px;
border-radius: var(--raio-borda);
text-align: center;
box-shadow: var(--sombra-card);
transition: var(--transicao);
}
.dor-card:hover {
transform: translateY(-5px);
}
.dor-card .icone {
font-size: 2.5rem;
margin-bottom: 15px;
}
/* ==========================================================================
7. SEÇÃO MÓDULOS / FUNCIONALIDADES (os 5 recursos)
========================================================================== */
.modulos {
padding: var(--espaco-secao) 0;
}
.modulos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 colunas no desktop */
gap: 30px;
}
.modulo-card {
padding: 40px 30px;
border-radius: var(--raio-borda);
border: 1px solid #eee;
transition: var(--transicao);
}
.modulo-card:hover {
border-color: var(--cor-principal);
box-shadow: var(--sombra-card);
transform: translateY(-5px);
}
/* Ícone de cada módulo — quadrado laranja com símbolo */
.modulo-card .icone {
width: 60px;
height: 60px;
background-color: var(--cor-principal);
border-radius: var(--raio-borda);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: var(--cor-branco);
margin-bottom: 20px;
}
.modulo-card h3 {
font-size: 1.4rem;
margin-bottom: 12px;
}
.modulo-card p {
color: var(--cor-cinza-medio);
}
/* ==========================================================================
8. SEÇÃO "COMO FUNCIONA" (3 passos)
========================================================================== */
.passos {
padding: var(--espaco-secao) 0;
background-color: var(--cor-preto);
color: var(--cor-branco);
}
.passos .titulo-secao,
.passos .subtitulo-secao {
color: var(--cor-branco);
}
.passos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.passo-item {
text-align: center;
}
/* Número grande do passo (01, 02, 03) */
.passo-numero {
font-family: var(--fonte-titulo);
font-size: 3rem;
font-weight: 700;
color: var(--cor-principal);
margin-bottom: 15px;
}
/* ==========================================================================
9. SEÇÃO PROVA SOCIAL (depoimentos + números)
========================================================================== */
.social {
padding: var(--espaco-secao) 0;
background-color: var(--cor-cinza-claro);
}
/* Números / estatísticas em destaque */
.numeros-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 60px;
text-align: center;
}
.numero-item .valor {
font-family: var(--fonte-titulo);
font-size: 3rem;
font-weight: 700;
color: var(--cor-principal);
}
/* Grade de depoimentos */
.depoimentos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.depoimento-card {
background-color: var(--cor-branco);
padding: 30px;
border-radius: var(--raio-borda);
box-shadow: var(--sombra-card);
}
.depoimento-card .texto {
font-style: italic;
margin-bottom: 20px;
}
.depoimento-card .autor {
font-weight: 600;
font-family: var(--fonte-titulo);
}
.depoimento-card .cargo {
font-size: 0.9rem;
color: var(--cor-cinza-medio);
}
/* ==========================================================================
10. SEÇÃO PLANOS E PREÇOS (crítica para conversão!)
========================================================================== */
.planos {
padding: var(--espaco-secao) 0;
}
.planos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
align-items: stretch; /* Todos os cards com mesma altura */
}
.plano-card {
border: 2px solid #eee;
border-radius: var(--raio-borda);
padding: 40px 30px;
text-align: center;
transition: var(--transicao);
display: flex;
flex-direction: column;
}
/* Card do plano em DESTAQUE (o recomendado) */
.plano-card.destaque {
border-color: var(--cor-principal);
transform: scale(1.05); /* Fica levemente maior que os outros */
position: relative;
}
/* Etiqueta "MAIS POPULAR" no plano em destaque */
.plano-card.destaque::before {
content: "MAIS POPULAR";
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background-color: var(--cor-principal);
color: var(--cor-branco);
font-size: 0.75rem;
font-weight: 700;
padding: 6px 18px;
border-radius: 20px;
letter-spacing: 1px;
}
.plano-nome {
font-size: 1.5rem;
margin-bottom: 10px;
}
.plano-preco {
font-family: var(--fonte-titulo);
font-size: 3rem;
font-weight: 700;
color: var(--cor-preto);
margin: 20px 0 5px 0;
}
.plano-preco span {
font-size: 1rem;
color: var(--cor-cinza-medio);
font-weight: 400;
}
/* Lista de recursos do plano */
.plano-recursos {
list-style: none;
margin: 30px 0;
text-align: left;
flex-grow: 1; /* Empurra o botão para baixo, alinhando todos */
}
.plano-recursos li {
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
}
/* Checkmark verde antes de cada recurso */
.plano-recursos li::before {
content: "✓ ";
color: var(--cor-principal);
font-weight: 700;
}
/* ==========================================================================
11. SEÇÃO GARANTIA (risco zero)
========================================================================== */
.garantia {
padding: 80px 0;
background-color: var(--cor-preto);
color: var(--cor-branco);
text-align: center;
}
.garantia h2 {
font-size: 2.2rem;
margin-bottom: 20px;
}
.garantia p {
max-width: 700px;
margin: 0 auto;
color: #d0d0d0;
}
/* ==========================================================================
12. SEÇÃO FAQ (perguntas frequentes)
========================================================================== */
.faq {
padding: var(--espaco-secao) 0;
}
.faq-lista {
max-width: 800px;
margin: 0 auto;
}
/* Cada item do FAQ (pergunta + resposta) */
.faq-item {
border-bottom: 1px solid #eee;
padding: 25px 0;
}
.faq-item .pergunta {
font-family: var(--fonte-titulo);
font-weight: 600;
font-size: 1.15rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-item .resposta {
margin-top: 15px;
color: var(--cor-cinza-medio);
}
/* ==========================================================================
13. SEÇÃO CTA FINAL (último empurrão para conversão)
========================================================================== */
.cta-final {
padding: var(--espaco-secao) 0;
background: linear-gradient(135deg, var(--cor-principal), var(--cor-principal-escura));
color: var(--cor-branco);
text-align: center;
}
.cta-final h2 {
font-size: 2.8rem;
margin-bottom: 20px;
}
.cta-final p {
font-size: 1.2rem;
margin-bottom: 35px;
}
/* No CTA final (fundo laranja), o botão fica branco */
.cta-final .btn-principal {
background-color: var(--cor-branco);
color: var(--cor-principal);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.cta-final .btn-principal:hover {
background-color: var(--cor-preto);
color: var(--cor-branco);
}
/* ==========================================================================
14. RODAPÉ
========================================================================== */
.rodape {
background-color: var(--cor-preto);
color: #a0a0a0;
padding: 60px 0 30px 0;
}
.rodape-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.rodape-logo img {
height: 40px;
margin-bottom: 15px;
}
.rodape h4 {
color: var(--cor-branco);
margin-bottom: 15px;
}
.rodape ul {
list-style: none;
}
.rodape ul li {
margin-bottom: 10px;
}
.rodape a {
color: #a0a0a0;
text-decoration: none;
transition: var(--transicao);
}
.rodape a:hover {
color: var(--cor-principal);
}
/* Linha final de copyright */
.rodape-base {
border-top: 1px solid #333;
padding-top: 25px;
text-align: center;
font-size: 0.9rem;
}
/* ==========================================================================
15. ANIMAÇÕES SUAVES (elementos aparecem ao rolar a página)
--------------------------------------------------------------------------
NOTA: requer um pequeno JavaScript no HTML para adicionar a classe
"visivel" quando o elemento entra na tela. Instruções no index.html.
========================================================================== */
.fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visivel {
opacity: 1;
transform: translateY(0);
}
/* ==========================================================================
16. RESPONSIVIDADE (adaptação para TABLET e CELULAR)
--------------------------------------------------------------------------
IMPORTANTE: sempre teste o site no celular! A maioria dos MEIs
vai acessar pelo telefone.
========================================================================== */
/* TABLET (telas até 992px) */
@media (max-width: 992px) {
.hero-grid,
.dor-grid,
.modulos-grid,
.passos-grid,
.depoimentos-grid,
.numeros-grid,
.planos-grid,
.rodape-grid {
grid-template-columns: 1fr 1fr; /* Vira 2 colunas */
}
.hero-titulo { font-size: 2.8rem; }
}
/* CELULAR (telas até 768px) */
@media (max-width: 768px) {
/* Quase tudo vira 1 coluna no celular */
.hero-grid,
.dor-grid,
.modulos-grid,
.passos-grid,
.depoimentos-grid,
.numeros-grid,
.planos-grid,
.rodape-grid {
grid-template-columns: 1fr;
}
/* Esconde o menu no celular (você pode trocar por menu "hambúrguer" depois) */
.menu-nav {
display: none;
}
.hero {
padding: 130px 0 60px 0;
text-align: center;
}
.hero-titulo { font-size: 2.2rem; }
.hero-botoes { justify-content: center; }
.titulo-secao { font-size: 2rem; }
.cta-final h2 { font-size: 2rem; }
/* Remove o "zoom" do plano em destaque no celular */
.plano-card.destaque {
transform: scale(1);
}
:root {
--espaco-secao: 60px; /* Reduz espaçamento entre seções no celular */
}
}