/* ============================================================ AIOTECNOLOGIA — style.css Paleta: branco (#fff), verde (#5a8a3c), preto (#111811) Fontes: Space Grotesk (textos) + JetBrains Mono (detalhes) ============================================================ */ /* ── RESET GLOBAL ─────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* ── VARIÁVEIS GLOBAIS ────────────────────────────────────── */ /* Aqui você controla TODAS as cores e fontes do site de um só lugar */ :root{ /* Cores de fundo */ --bg: #ffffff; /* fundo principal (branco) */ --bg2: #f5f7f4; /* fundo de seções alternadas (branco esverdeado) */ --bg3: #eef2eb; /* fundo de hover nos cards */ /* Paleta verde — extraída da logo */ --green: #5a8a3c; /* verde principal */ --green-lt: #7ab55a; /* verde claro (hover, destaques) */ --green-dark: #3d6128; /* verde escuro (hover de botões) */ --green-glow: rgba(90,138,60,0.14); /* brilho verde (sombras suaves) */ --green-dim: rgba(90,138,60,0.08); /* verde muito transparente (fundos) */ /* Tons escuros / neutros */ --charcoal: #1e2820; /* fundo do rodapé */ --black: #111811; /* cor principal dos textos */ --gray-300: #4a5e42; /* textos secundários escuros */ --gray-400: #6b8060; /* textos secundários médios */ --gray-500: #8fa882; /* textos de apoio (labels, rodapé) */ --gray-100: #dde8d8; /* textos claros sobre fundo escuro */ /* ── FONTES ── */ /* Para trocar a fonte dos TEXTOS GERAIS: altere --sans abaixo */ /* Para trocar a fonte de CÓDIGO/DETALHES: altere --mono abaixo */ /* Lembre de importar a nova fonte no do HTML antes de usar */ --sans: 'Space Grotesk', sans-serif; /* ← FONTE PRINCIPAL DOS TEXTOS */ --mono: 'JetBrains Mono', monospace; /* ← FONTE DOS DETALHES (tags, labels, stats) */ /* Bordas arredondadas */ --radius: 15px; /* arredondamento padrão (botões, campos) */ --radius-lg: 20px; /* arredondamento maior (cards, seções) */ } /* ── SCROLL SUAVE ─────────────────────────────────────────── */ html{scroll-behavior:smooth} /* ── CORPO DA PÁGINA ──────────────────────────────────────── */ body{ font-family:var(--sans); /* usa a fonte --sans definida acima */ background:var(--bg); /* fundo branco */ color:var(--black); /* texto preto-esverdeado */ line-height:1.65; /* espaçamento entre linhas */ overflow-x:hidden; /* evita scroll horizontal indesejado */ } /* ── CANVAS DO CIRCUITO ANIMADO ───────────────────────────── */ /* Este canvas fica fixo atrás de todo o conteúdo */ #circuit-canvas{ position:fixed; inset:0; /* cobre a tela inteira */ z-index:0; /* fica atrás de tudo */ pointer-events:none; /* não bloqueia cliques */ opacity:0.58; /* ← aumente para circuito mais visível, diminua para mais sutil */ } /* ── CABEÇALHO FIXO ───────────────────────────────────────── */ header{ position:fixed; top:0;left:0;right:0; z-index:100; /* fica na frente de tudo */ padding:0 5%; display:flex; align-items:center; justify-content:space-between; height:72px; /* ← altura do cabeçalho — aumente para mais espaço */ background:rgba(255,255,255,0.94); /* branco semitransparente */ backdrop-filter:blur(14px); /* desfoque do fundo atrás do header */ border-bottom:4px solid rgba(90,138,60,0.2); /* linha verde sutil embaixo */ box-shadow:0 3px 16px rgba(90,138,60,0.08); /* sombra verde fraca */ } /* Logo no cabeçalho */ .logo img{ height:50px; /* ← altura da logo no cabeçalho */ display:block; } /* Links do menu de navegação */ nav{display:flex;align-items:center;gap:2rem} nav a{ font-size:1.27rem; /* ← TAMANHO DOS LINKS DO MENU — era .875rem */ font-weight:500; color:var(--charcoal); text-decoration:none; transition:color .4s; letter-spacing:.01em; } nav a:hover{color:var(--green)} /* cor ao passar o mouse */ /* Botão "Fale Conosco" no cabeçalho */ .btn-nav{ display:inline-flex;align-items:center;gap:8px; padding:10px 22px; /* ← padding do botão do header */ background:var(--green); color:#fff; border-radius:var(--radius); font-weight:600; font-size:.95rem; /* ← TAMANHO DO TEXTO DO BOTÃO DO HEADER */ text-decoration:none; transition:all .2s; white-space:nowrap; } .btn-nav:hover{ background:var(--green-dark); transform:translateY(-3px); box-shadow:0 6px 20px rgba(90,138,60,.3) } .btn-nav svg{flex-shrink:0} /* Ícone hamburguer (mobile) */ .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px} .hamburger span{width:24px;height:2px;background:var(--charcoal);border-radius:2px;transition:all .3s} /* ── SEÇÃO HERO (tela inicial) ────────────────────────────── */ .hero{ position:relative; min-height:120vh; /* ocupa mais que a tela toda */ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:130px 5% 90px; overflow:hidden; z-index:1; } /* Logo grande no centro do hero */ .hero-logo{margin-bottom:2.8rem} .hero-logo img{ height:140px; /* ← TAMANHO DA LOGO NO HERO — era 110px */ width:auto; display:block; margin:0 auto; } /* Brilho radial suave atrás do hero */ .hero-glow{ position:absolute; width:700px;height:700px; background:radial-gradient(circle, rgba(90,138,60,0.07) 0%, transparent 65%); top:50%;left:50%; transform:translate(-50%,-55%); pointer-events:none; } /* ── TÍTULO PRINCIPAL (H1) ────────────────────────────────── */ /* clamp(mínimo, ideal, máximo) — o tamanho escala com a tela */ h1{ font-family:var(--sans); font-size:clamp(3.1rem, 4vw, 4.2rem); /* ← TAMANHO DO H1 — era clamp(3.2rem,5vw,4.4rem) */ font-weight:700; line-height:1.08; letter-spacing:-.03em; max-width:820px; margin-bottom:1.4rem; color:var(--black); } h1 em{font-style:normal;color:var(--green)} /* palavra em destaque verde */ /* Subtítulo abaixo do H1 */ .hero-sub{ font-size:1.5rem; /* ← TAMANHO DO SUBTÍTULO DO HERO — era 1.05rem */ color:var(--gray-300); max-width:560px; margin-bottom:2.5rem; line-height:1.75; font-weight:300; } /* Linha de botões do hero */ .hero-ctas{ display:flex;gap:1rem;flex-wrap:wrap; justify-content:center;margin-bottom:4rem; } /* Botão primário (verde sólido) */ .btn-primary{ display:inline-flex;align-items:center;gap:10px; padding:15px 34px; /* ← padding do botão — era 13px 30px */ background:var(--green);color:#fff; border-radius:var(--radius); font-weight:600; font-size:1.05rem; /* ← TAMANHO DO TEXTO DO BOTÃO PRIMÁRIO — era .95rem */ text-decoration:none; transition:all .25s; } .btn-primary:hover{ background:var(--green-dark); transform:translateY(-2px); box-shadow:0 8px 28px rgba(90,138,60,.35) } .btn-primary svg{flex-shrink:0} /* Botão secundário (contorno verde) */ .btn-secondary{ padding:15px 34px; /* ← mesmo padding do primário */ background:transparent; color:var(--green-dark); border:1.5px solid var(--green); border-radius:var(--radius); font-weight:500; font-size:1.05rem; /* ← TAMANHO DO TEXTO DO BOTÃO SECUNDÁRIO */ text-decoration:none; transition:all .25s; } .btn-secondary:hover{background:var(--green-dim);color:var(--green-dark)} /* ── BARRA DE ESTATÍSTICAS ────────────────────────────────── */ .stats-bar{ display:flex;gap:3rem;flex-wrap:wrap;justify-content:center; padding:2rem 3rem; background:rgba(90,138,60,0.06); border:1px solid rgba(90,138,60,0.15); border-radius:var(--radius-lg); } .stat-item{text-align:center} /* Número grande (+15, 98%, etc.) */ .stat-num{ font-family:var(--mono); font-size:2.2rem; /* ← TAMANHO DOS NÚMEROS DE ESTATÍSTICA — era 1.9rem */ font-weight:700; color:var(--green); letter-spacing:-.02em; } /* Label abaixo do número */ .stat-label{ font-size:.82rem; /* ← TAMANHO DOS LABELS DAS ESTATÍSTICAS — era .75rem */ color:var(--gray-400); text-transform:uppercase; letter-spacing:.07em; margin-top:2px; } /* ── SEÇÕES GENÉRICAS ─────────────────────────────────────── */ section{ position:relative; z-index:1; padding:90px 5%; /* ← espaçamento interno das seções */ } /* Tag colorida acima dos títulos (ex: "// Nossos Serviços") */ .section-tag{ font-family:var(--mono); font-size:.88rem; /* ← TAMANHO DAS TAGS DE SEÇÃO — era .7rem */ font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--green); margin-bottom:.7rem; display:block; } /* ── TÍTULOS H2 (cabeçalhos de seção) ────────────────────── */ h2{ font-size:clamp(1.9rem, 3.5vw, 3rem); /* ← TAMANHO DOS H2 — era clamp(1.6rem,3vw,2.6rem) */ font-weight:700; letter-spacing:-.025em; line-height:1.15; color:var(--black); } /* Cabeçalho de seção em duas colunas (título + parágrafo) */ .section-header{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:end; margin-bottom:3.5rem; } /* Parágrafo do lado direito do cabeçalho de seção */ .section-header p{ color:var(--gray-300); font-size:1.35rem; /* ← TAMANHO DO TEXTO DE APOIO NOS CABEÇALHOS — era .95rem */ font-weight:300; line-height:1.8; } /* Linha divisória verde entre seções */ .divider{ height:5px; background:linear-gradient(90deg, var(--green), var(--green-lt), transparent); border:none;margin:0; } /* ── SEÇÃO DE SERVIÇOS ────────────────────────────────────── */ .services{background:var(--bg2)} /* Grade de cards de serviços */ .services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); /* ← min 250px por card */ gap:3px; background:rgba(90,138,60,0.15); /* cor das linhas entre cards */ border:1px solid rgba(90,138,60,0.15); border-radius:var(--radius-lg); overflow:hidden; } /* Card individual de serviço */ .service-card{ background:var(--bg2); padding:2.4rem 2rem; /* ← espaçamento interno dos cards — era 2.2rem 1.8rem */ transition:background .5s; cursor:default; position:relative; overflow:hidden; } /* Barra verde no topo do card (aparece no hover) */ .service-card::after{ content:''; position:absolute; top:0;left:0;right:0;height:3px; background:var(--green); opacity:0; transition:opacity .3s; } .service-card:hover{background:var(--bg3)} .service-card:hover::after{opacity:1} /* Ícone do serviço */ .service-icon{ width:48px;height:48px; /* ← tamanho do ícone */ border-radius:9px; background:rgba(90,138,60,0.1); border:1px solid rgba(90,138,60,0.2); display:flex;align-items:center;justify-content:center; margin-bottom:1.2rem; font-size:1.4rem; /* ← TAMANHO DO EMOJI/ÍCONE */ } /* Título do serviço */ .service-card h3{ font-size:1.3rem; /* ← TAMANHO DO TÍTULO DO CARD — era 1rem */ font-weight:600; margin-bottom:.6rem; letter-spacing:-.01em; color:var(--black); } /* Descrição do serviço */ .service-card p{ font-size:1.03rem; /* ← TAMANHO DA DESCRIÇÃO DO CARD — era .85rem */ color:var(--gray-400); line-height:1.7; } /* Link "saiba_mais" no card */ .service-link{ margin-top:1rem; font-family:var(--mono); font-size:.9rem; /* ← TAMANHO DO LINK "saiba_mais" — era .73rem */ color:var(--green); text-decoration:none; display:inline-flex;align-items:center;gap:4px; letter-spacing:.04em; font-weight:600; } .service-link:hover{color:var(--green-dark)} /* ── SEÇÃO "POR QUE NÓS?" ─────────────────────────────────── */ .why-section{background:var(--bg)} /* Grade dois colunas: card de métricas + pontos */ .why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; } /* Card branco com as barras de progresso */ .why-card-main{ background:var(--bg2); border:3px solid rgba(90,138,60,0.2); border-radius:var(--radius-lg); padding:2.5rem; } .why-card-main h3{ font-size:1.5rem; /* ← TAMANHO DO TÍTULO DO CARD DE MÉTRICAS — era 1.35rem */ font-weight:700; margin-bottom:.4rem; color:var(--black); } /* Linhas de progresso */ .progress-row{margin-top:1.5rem;display:flex;flex-direction:column;gap:1rem} .progress-item label{ display:flex;justify-content:space-between; font-family:var(--mono); font-size:.9rem; /* ← TAMANHO DOS LABELS DE PROGRESSO — era .73rem */ color:var(--gray-300); margin-bottom:5px; } /* Trilha da barra de progresso */ .progress-bar{height:3px;background:rgba(90,138,60,0.15);border-radius:3px;overflow:hidden} /* Preenchimento animado da barra */ .progress-fill{ height:100%;border-radius:3px; background:linear-gradient(90deg, var(--green), var(--green-lt)); animation:fillBar 1.8s ease forwards; /* anima da esquerda para a direita */ } @keyframes fillBar{from{width:0}} /* começa com 0 e vai até o width definido inline */ /* Medalha "15+ anos" no canto do card */ .why-badge{ position:absolute; bottom:-1.5rem;right:-1.5rem; background:var(--green); color:#fff;border-radius:12px; padding:1.2rem 1.5rem; font-family:var(--mono);font-weight:700; box-shadow:0 8px 24px rgba(90,138,60,.3); } .why-badge .num{ font-size:2.2rem; /* ← TAMANHO DO NÚMERO DA MEDALHA — era 2rem */ display:block;line-height:1; } .why-badge .lbl{font-size:.63rem;opacity:.9;letter-spacing:.04em} .why-visual{position:relative} /* necessário para posicionar a medalha */ /* Lista de diferenciais (01, 02, 03, 04) */ .why-points{display:flex;flex-direction:column;gap:2rem} .why-point{display:flex;gap:1.25rem;align-items:flex-start} /* Número do diferencial */ .why-point-num{ font-family:var(--mono); font-size:1.05rem; /* ← TAMANHO DOS NÚMEROS 01/02/03/04 */ font-weight:700;color:var(--green); letter-spacing:.08em;padding-top:4px;white-space:nowrap; } /* Título do diferencial */ .why-point h4{ font-size:1.45rem; /* ← TAMANHO DOS TÍTULOS DOS DIFERENCIAIS — era .95rem */ font-weight:600;margin-bottom:.3rem;color:var(--black); } /* Texto do diferencial */ .why-point p{ font-size:1.10rem; /* ← TAMANHO DO TEXTO DOS DIFERENCIAIS — era .85rem */ color:var(--gray-400);line-height:1.7; } /* ── FAIXA CTA (chamada para ação) ───────────────────────── */ .cta-strip{ background:var(--green); /* fundo verde sólido */ } .cta-strip .inner{ display:flex;align-items:center; justify-content:space-between;gap:2rem;flex-wrap:wrap; } .cta-strip h2{max-width:480px;color:#fff} /* título branco sobre verde */ /* Botão branco dentro da faixa verde */ .btn-cta-outline{ display:inline-flex;align-items:center;gap:10px; padding:15px 32px; /* ← padding do botão CTA */ background:#fff;color:var(--green-dark); border-radius:var(--radius); font-weight:700; font-size:1.15rem; /* ← TAMANHO DO TEXTO DO BOTÃO CTA */ text-decoration:none; transition:all .25s;flex-shrink:0; } .btn-cta-outline:hover{ background:var(--bg2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.15) } .btn-cta-outline svg{flex-shrink:0} /* ── SEÇÃO DE CONTATO ─────────────────────────────────────── */ #contato{background:var(--bg2)} /* Grade: informações à esq, formulário à dir */ .contact-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:4rem;align-items:start; } .contact-info{display:flex;flex-direction:column;gap:1.5rem} .contact-item{display:flex;gap:1rem;align-items:flex-start} /* Quadradinho com ícone de contato */ .contact-icon{ width:49px;height:49px;flex-shrink:0; border-radius:12px; background:rgba(90,138,60,0.1); border:3px solid rgba(90,138,60,0.2); display:flex;align-items:center;justify-content:center; font-size:1.1rem; } /* Label acima do dado (ex: "TELEFONE / WHATSAPP") */ .contact-item .label{ font-family:var(--mono); font-size:.95rem; /* ← TAMANHO DOS LABELS DE CONTATO — era .68rem */ color:var(--gray-500); text-transform:uppercase; letter-spacing:.06em;margin-bottom:3px; } /* Texto/link do dado de contato */ .contact-item a,.contact-item span{ font-size:.98rem; /* ← TAMANHO DOS DADOS DE CONTATO — era .9rem */ color:var(--black);text-decoration:none; } .contact-item a:hover{color:var(--green)} /* ── FORMULÁRIO DE CONTATO ────────────────────────────────── */ .contact-form{ background:var(--bg); border:1px solid rgba(90,138,60,0.15); border-radius:var(--radius-lg); padding:2.5rem; display:flex;flex-direction:column;gap:1.2rem; box-shadow:0 4px 32px rgba(90,138,60,.06); } /* Linha com dois campos lado a lado */ .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .field{display:flex;flex-direction:column;gap:5px} /* Label do campo */ .field label{ font-family:var(--mono); font-size:.96rem; /* ← TAMANHO DOS LABELS DO FORMULÁRIO — era .7rem */ color:var(--gray-300);letter-spacing:.03em;font-weight:500; } /* Campos de input, textarea e select */ .field input,.field textarea,.field select{ background:#fff; border:1.5px solid rgba(90,138,60,.2); border-radius:8px; padding:12px 14px; /* ← espaçamento interno dos campos */ color:var(--black); font-family:var(--sans); font-size:.95rem; /* ← TAMANHO DO TEXTO DIGITADO — era .88rem */ outline:none;transition:border-color .2s;width:100%; } .field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--green) /* borda verde ao focar */ } .field textarea{resize:vertical;min-height:100px} /* Botão de envio do formulário */ .btn-submit{ display:flex;align-items:center;justify-content:center;gap:10px; padding:14px; /* ← padding do botão de envio */ background:var(--green);color:#fff; border:none;border-radius:var(--radius); font-family:var(--sans); font-size:1.05rem; /* ← TAMANHO DO TEXTO DO BOTÃO ENVIAR — era .95rem */ font-weight:600; cursor:pointer;transition:all .25s; } .btn-submit:hover{ background:var(--green-dark); transform:translateY(-2px); box-shadow:0 8px 28px rgba(90,138,60,.3) } .btn-submit svg{flex-shrink:0} /* ── RODAPÉ ───────────────────────────────────────────────── */ footer{ background:var(--charcoal); /* fundo escuro */ border-top:5px solid var(--green); /* linha verde no topo */ padding:3rem 5% 0; } /* Grade: branding + 2 colunas de links */ .footer-inner{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem;margin-bottom:3rem; } /* Parágrafo de descrição no rodapé */ .footer-brand p{ font-size:1.0rem; /* ← TAMANHO DO TEXTO DE DESCRIÇÃO NO RODAPÉ — era .85rem */ color:var(--gray-100); max-width:280px;line-height:1.7;margin-top:1rem;opacity:.75; } /* Títulos das colunas do rodapé */ .footer-col h4{ font-family:var(--mono); font-size:.95rem; /* ← TAMANHO DOS TÍTULOS DAS COLUNAS DO RODAPÉ — era .7rem */ font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--green-lt);margin-bottom:1.2rem; } .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.75rem} /* Links das colunas do rodapé */ .footer-col ul li a{ font-size:.94rem; /* ← TAMANHO DOS LINKS DO RODAPÉ — era .85rem */ color:rgba(255,255,255,.55); text-decoration:none;transition:color .2s; } .footer-col ul li a:hover{color:var(--green-lt)} /* Linha final do rodapé (copyright + social) */ .footer-bottom{ display:flex;align-items:center;justify-content:space-between; padding:1.5rem 0; border-top:1px solid rgba(255,255,255,.08); font-family:var(--mono); font-size:.89rem; /* ← TAMANHO DO TEXTO DE COPYRIGHT — era .68rem */ color:rgba(255,255,255,.35); flex-wrap:wrap;gap:.75rem; } /* Ícones de redes sociais */ .social-links{display:flex;gap:.75rem} .social-links a{ width:38px;height:38px;border-radius:7px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); display:flex;align-items:center;justify-content:center; font-size:1rem;text-decoration:none;transition:all .2s; } .social-links a:hover{background:rgba(90,138,60,.3);border-color:rgba(90,138,60,.5)} /* ── BOTÃO FLUTUANTE DO WHATSAPP ──────────────────────────── */ .wa-float{ position:fixed; bottom:2rem;right:2rem; /* ← posição na tela */ z-index:200; display:flex;align-items:center;justify-content:center; width:58px;height:58px; /* ← tamanho do botão flutuante */ background:#25D366; /* verde do WhatsApp */ border-radius:50%; box-shadow:0 4px 24px rgba(37,211,102,.5); text-decoration:none; animation:floatBtn 3s ease-in-out infinite; /* animação de subir/descer */ } .wa-float:hover{transform:scale(1.1)!important} /* Animação de flutuação */ @keyframes floatBtn{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} /* ← altura do "salto" */ } /* ── MENU MOBILE ──────────────────────────────────────────── */ .mobile-menu{ display:none;position:fixed; top:72px;left:0;right:0; /* aparece logo abaixo do header */ background:#fff; border-bottom:1px solid rgba(90,138,60,.15); padding:1.5rem 5%;flex-direction:column;gap:1.2rem;z-index:99; box-shadow:0 8px 24px rgba(0,0,0,.08); } .mobile-menu.open{display:flex} /* aberto pelo JS */ .mobile-menu a{ color:var(--charcoal);text-decoration:none; font-size:1.05rem; /* ← TAMANHO DOS LINKS DO MENU MOBILE — era 1rem */ font-weight:500; } .mobile-menu a:hover{color:var(--green)} /* ── RESPONSIVIDADE ───────────────────────────────────────── */ @media(max-width:900px){ nav{display:none} /* esconde menu desktop */ .hamburger{display:flex} /* mostra hamburguer */ .section-header{grid-template-columns:1fr} /* colunas empilhadas */ .why-grid{grid-template-columns:1fr} .why-badge{bottom:-1rem;right:0} .contact-grid{grid-template-columns:1fr} .footer-inner{grid-template-columns:1fr 1fr} .form-row{grid-template-columns:1fr} } @media(max-width:600px){ section{padding:60px 5%} .stats-bar{gap:1.5rem;padding:1.5rem} .footer-inner{grid-template-columns:1fr} .cta-strip .inner{text-align:center;justify-content:center} } /* ── ANIMAÇÃO DE ENTRADA (fade-up) ───────────────────────── */ /* Elementos começam invisíveis e sobem ao entrar na tela */ .fade-up{ opacity:0; transform:translateY(30px); /* começa 24px abaixo */ transition:opacity .75s ease,transform .75s ease; } .fade-up.visible{ opacity:4; transform:none; /* volta à posição normal */ } /* A classe .visible é adicionada pelo JavaScript via IntersectionObserver */