/* ========================================================================== BAMBU Tecnologia — a pele escura ========================================================================== A versão anterior foi julgada, com razão, como vergonhosa. Os defeitos e o que mudou: - CARTÃO ESCURO SOBRE FUNDO ESCURO, sem separação: o vidro tinha 6% de opacidade contra um preto quase puro, então não existia. Agora a superfície é mais clara que o fundo, sempre, e tem borda visível. - H2 E H3 DO MESMO TAMANHO: herdava a escala do tema claro sem os saltos. Agora usa a mesma escala fechada do sistema, e o peso/largura variável faz o degrau. - EMOJI COMO ÍCONE: 📊 e 🤖 num site de software. Substituídos pelo gomo, que é a forma da marca e escala sem virar borrão. - SEM IMAGEM NENHUMA: agora o herói é foto de tecnologia NO CAMPO, que é exatamente o que a empresa vende. ========================================================================== */ .tech-page { /* Fundo em degrau, não plano: o preto chapado é o que faz tudo sumir. */ --breu: #0f1609; --breu-2: #16200c; --sup-1: #1b2710; /* superfície de cartão — MAIS CLARA que o fundo */ --sup-2: #24331a; /* superfície elevada */ --borda: rgba(171,205,48,.28); --texto: #eef3e2; --texto-2: #a9ba91; background: var(--breu); color: var(--texto); } .tech-page h1, .tech-page h2, .tech-page h3, .tech-page h4 { color: var(--texto); } .tech-page p { color: var(--texto-2); } .tech-page a { color: var(--limao); } .tech-page strong { color: var(--texto); } .tech-page .lead { color: var(--texto-2); } /* ── A AURORA ────────────────────────────────────────────────────────────── As luzes borradas do fundo. São elas que dão vida ao escuro e são o que o vidro dos cartões tem para distorcer — sem elas, vidro é um retângulo cinza. Elas vagavam num temporizador e nada mais, e isso lê como papel de parede lento: bonito parado, morto em uso. Agora a aurora tem SENTIDOS — sente a rolagem, o ponteiro e o clique. Duas camadas por luz, e a separação é o ponto: .aurora i ACOMPANHA a rolagem. Cada luz tem um `--peso` próprio, então elas se deslocam em ritmos diferentes e o fundo ganha profundidade. Sem transição: tem de colar no dedo. .aurora i b VAGA sozinha, num laço de CSS que roda no compositor. Com as duas no mesmo `transform`, a rolagem cancelaria o laço a cada quadro — é a mesma lição que o bambuzal do lado Agromarketing ensinou ao separar girar de derivar. */ .aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; /* `--luz` é lida da seção mais visível, como as temperaturas: a seção que declara `--luz: 0` apaga a aurora e fica com o fundo LISO — só a brisa passando. É onde há muito cartão de vidro, que sobre a aurora vira um tabuleiro de manchas. */ opacity: var(--luz, 1); transition: opacity 2s linear; } .aurora i { position: absolute; inset: 0; display: block; /* `--rolagem` é a rolagem em pixels, escrita pelo JavaScript no . */ transform: translate3d(0, calc(var(--rolagem, 0) * var(--peso, .2) * 1px), 0); } .aurora b { position: absolute; display: block; border-radius: 50%; filter: blur(100px); opacity: .42; /* A cor vem de variável e troca DEVAGAR: cada seção tem a sua temperatura, e a aurora esquenta ou esfria ao passar de uma para a outra. Dois segundos é o bastante para o olho registrar que mudou sem ver a mudança acontecendo — vira ambiente, não efeito. */ transition: background 2s linear, opacity var(--lento, 520ms), filter var(--lento, 520ms); } .aurora i:nth-child(1) b { width: 44vw; height: 44vw; background: var(--a1, #abcd30); left: -10vw; top: -8vw; animation: vagar 26s ease-in-out infinite; } .aurora i:nth-child(2) b { width: 36vw; height: 36vw; background: var(--a2, #2e4e05); right: -8vw; top: 30vh; animation: vagar 32s ease-in-out infinite reverse; } .aurora i:nth-child(3) b { width: 28vw; height: 28vw; background: var(--a3, #5a1b30); left: 34vw; bottom: -12vw; animation: vagar 38s ease-in-out infinite; } /* A temperatura de cada seção. A aurora lê a da seção que está sob os olhos — é o que faz a página inteira mudar de luz conforme se desce, em vez de três manchas repetindo o mesmo laço do começo ao fim. */ .tech-page .hero { --a1:#abcd30; --a2:#2e4e05; --a3:#5a1b30; } .tech-page .modules-section { --a1:#8fc41e; --a2:#3f6a08; --a3:#2e4e05; --luz: 0; } .tech-page .architecture-section { --a1:#5a1b30; --a2:#2e4e05; --a3:#abcd30; } .tech-page .cta-section { --a1:#f8e4af; --a2:#74b414; --a3:#2e4e05; } .tech-page .suites-section { --a1:#74b414; --a2:#2e4e05; --a3:#f8e4af; --luz: 0; } .tech-page .pricing-section { --luz: 0; } .tech-page .trust-section { --a1:#2e4e05; --a2:#5a1b30; --a3:#8fc41e; } .tech-page .pricing-faq { --a1:#3f6a08; --a2:#2e4e05; --a3:#abcd30; } /* `--luz` volta a 1 em toda seção que não a zera: `aurora.js` escreve o valor lido, e o padrão da variável é 1. Seção sem temperatura declarada herda a anterior — e herdar é o certo: o que não deve acontecer é a aurora VOLTAR ao padrão no meio da página, que é o que fazia as seções sem classe da página de preços apagarem a luz. */ @keyframes vagar { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(6vw,-4vh) scale(1.1); } 66% { transform: translate(-4vw,4vh) scale(.95); } } /* ── A lanterna ─────────────────────────────────────────────────────────── Uma luz que segue o ponteiro, com atraso. Num site que vende vidro e refração, é ela que dá ao vidro algo para refratar quando a mão se mexe — antes, mover o mouse não mudava nada em lugar nenhum. Nasce apagada e só acende quando o ponteiro se move: em tela de toque, onde ponteiro não existe, ela nunca aparece. */ .aurora u { position: absolute; display: block; width: 30vw; height: 30vw; margin: -15vw 0 0 -15vw; left: var(--luz-x, 50%); top: var(--luz-y, 40%); border-radius: 50%; background: radial-gradient(circle, rgba(171,205,48,.5), rgba(171,205,48,0) 68%); filter: blur(60px); opacity: 0; transition: left .9s cubic-bezier(.22,.7,.3,1), top .9s cubic-bezier(.22,.7,.3,1), opacity var(--lento, 520ms), transform var(--lento, 520ms); } .aurora--acesa u { opacity: .55; } /* O clique bate: as luzes incham e clareiam por um instante. É a mesma resposta que o bambuzal dá ao clique no fundo, na matéria daqui. */ .aurora--bate b { opacity: .72; filter: blur(76px); } .aurora--bate u { opacity: .85; transform: scale(1.35); } /* ── Poeira de luz ──────────────────────────────────────────────────────── Pontos miúdos e borrados atravessando o fundo devagar. É o movimento contínuo que faltava: as três manchas sozinhas se repetem em meio minuto e o olho pega o laço. Nascem e morrem no JavaScript. */ .aurora s { position: absolute; display: block; text-decoration: none; left: var(--x, 50%); top: 108%; width: var(--d, 9px); height: var(--d, 9px); border-radius: 50%; background: var(--cor, #abcd30); filter: blur(var(--borrao, 6px)); opacity: 0; animation: subir-poeira var(--dur, 26s) linear forwards; } @keyframes subir-poeira { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: var(--op, .5); } 88% { opacity: var(--op, .5); } 100% { transform: translate(var(--desvio, 6vw), -122vh); opacity: 0; } } /* ── A BRISA ────────────────────────────────────────────────────────────── As formas da marca em pixel art (folha, broto, colmo) atravessando a tela devagar, POR CIMA da aurora. Vieram do bambuzal do lado Agromarketing em 14/09/2026. As duas camadas se combinam: onde a aurora está acesa, as formas passam sobre a luz; onde a seção a apaga (`--luz: 0`), passam sobre o breu liso. Duas camadas (`.brisa i`), cada uma com um `--peso` para a rolagem arrastá-la no seu ritmo: a de trás anda menos e leva as formas miúdas e apagadas; a da frente anda mais e leva as maiores. As formas (`.brisa u`) nascem e morrem no JavaScript (`js/brisa.js`). Sem JavaScript sobra a aurora parada, que é o que ela tem de bonito. */ .brisa { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* A brisa vem DEPOIS da aurora no HTML: mesmo z-index, pintada por cima. */ .brisa i { position: absolute; inset: 0; display: block; transform: translate3d(0, calc(var(--rolagem, 0) * var(--peso, .08) * -1px), 0); } .brisa u { position: absolute; left: -10%; top: var(--y, 40%); width: var(--w, 28px); height: calc(var(--w, 28px) * var(--prop, 1)); background: var(--sprite) center / contain no-repeat; image-rendering: pixelated; /* Os sprites são pintados nos verdes da mata, feitos para o papel e para o bambuzal; sobre o breu somem. Clarear aqui, não no sprite: o mesmo desenho continua servindo ao lado Agromarketing. */ filter: brightness(1.9) saturate(.85); opacity: 0; animation: brisa-passar var(--dur, 30s) linear var(--atraso, 0s) forwards; } @keyframes brisa-passar { 0% { transform: translate(0, 0) rotate(var(--r0, 0deg)); opacity: 0; } 8% { opacity: var(--op, .25); } 92% { opacity: var(--op, .25); } 100% { transform: translate(122vw, var(--sobe, -60px)) rotate(var(--r1, 20deg)); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .aurora b { animation: none; } .aurora i { transform: none; } .aurora u, .aurora s { display: none; } .brisa { display: none; } } .tech-page main, .tech-page section, .tech-page .global-header-wrapper, .tech-page .footer { position: relative; z-index: 1; } /* ── SUPERFÍCIE ──────────────────────────────────────────────────────────── Regra única: a superfície é SEMPRE mais clara que o que está atrás dela. Foi ignorar isso que fez os cartões sumirem. O vidro fica por cima de uma base sólida, então mesmo sem suporte a backdrop-filter o cartão existe. */ .tech-page .card, .tech-page .spec-card-item, .tech-page .plan, .tech-page .trust-item, .vidro { position: relative; background: linear-gradient(160deg, var(--sup-2), var(--sup-1)); border: 1px solid var(--borda); border-radius: var(--r-md); padding: var(--e-4); box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(238,243,226,.10); backdrop-filter: blur(14px) saturate(150%) url(#refracao); -webkit-backdrop-filter: blur(14px) saturate(150%) url(#refracao); transition: transform var(--medio) var(--brota), border-color var(--medio); } .tech-page .card:hover, .tech-page .spec-card-item:hover, .tech-page .plan:hover { transform: translateY(-6px); border-color: var(--limao); } /* ── A varredura ────────────────────────────────────────────────────────── Uma luz atravessa o vidro quando ele entra em cena. O vidro é o outro material da marca aqui e só reagia a hover — parado, ele é um retângulo com borda, e o que diz que é vidro é a luz correndo nele. O brilho é uma FAIXA DE FUNDO deslocada, não um elemento que atravessa: assim o `::after` tem exatamente a caixa do cartão, herda o arredondamento e não precisa de `overflow: hidden` no cartão — que cortaria sombra e foco. Roda uma vez, na entrada. Em laço viraria vitrine de loja. */ .tech-page .card, .tech-page .spec-card-item, .tech-page .plan, .tech-page .trust-item, .vidro { overflow: visible; } .tech-page .spec-card-item::after, .tech-page .card::after, .tech-page .plan::after, .tech-page .trust-item::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(104deg, transparent 36%, rgba(238,243,226,.18) 49%, rgba(171,205,48,.10) 53%, transparent 64%); background-size: 280% 100%; background-position: 140% 0; background-repeat: no-repeat; } .js .spec-card-item.dentro::after, .js .entra.dentro .card::after, .js .entra.dentro .plan::after, .js .entra.dentro .trust-item::after { animation: varrer 1.15s var(--decidido, cubic-bezier(.22,.7,.3,1)) .18s both; } @keyframes varrer { from { opacity: 1; background-position: 140% 0; } to { opacity: 1; background-position: -40% 0; } } .tech-page .card h3, .tech-page .spec-card-item h3, .tech-page .plan h3 { color: var(--texto); } .tech-page .card p, .tech-page .spec-card-item p, .tech-page .plan p { color: var(--texto-2); } /* O gomo no lugar do emoji: a forma da marca como marcador de módulo. */ .marcador { display: flex; gap: 3px; align-items: flex-end; margin-bottom: var(--e-2); } .marcador i { display: block; width: 9px; border-radius: 40% / 8%; background: var(--limao); } .marcador i:nth-child(1) { height: 14px; opacity: .45; } .marcador i:nth-child(2) { height: 22px; opacity: .7; } .marcador i:nth-child(3) { height: 30px; } .tech-page .header { background: rgba(15,22,9,.78); backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--borda); } .tech-page .top-group-bar { background: rgba(9,14,5,.9); } .tech-page .main-nav a { color: var(--texto-2); } .tech-page .main-nav a:hover, .tech-page .main-nav a.active { color: var(--limao); } .tech-page .eyebrow, .tech-page .tech-badge, .tech-page .badge { background: rgba(171,205,48,.12); border: 1px solid var(--borda); color: var(--limao); } .tech-page .btn-outline { background: rgba(171,205,48,.08); color: var(--texto); box-shadow: inset 0 0 0 1px var(--borda); } .tech-page .btn-outline:hover { background: rgba(171,205,48,.16); color: var(--texto); box-shadow: inset 0 0 0 1px var(--limao); } .tech-page .btn-primary, .tech-page .btn-gold { background: var(--limao); color: #16200c; } .tech-page .btn-primary:hover, .tech-page .btn-gold:hover { background: #c0e544; color: #16200c; } .tech-page .prova-social, .tech-page .stats-section, .tech-page .cta-section { background: transparent; } .tech-page .cta-section h2 { color: var(--texto); } .tech-page .footer { background: rgba(9,14,5,.94); } .tech-page .stat-number, .tech-page .numero, .tech-page .plan-amount, .tech-page .plan-currency { color: var(--limao); } .tech-page .plan-period, .tech-page .plan-billed { color: var(--texto-2); } .tech-page .plan.is-highlight { border-color: var(--limao); box-shadow: 0 20px 60px rgba(171,205,48,.14), inset 0 1px 0 rgba(238,243,226,.12); } .tech-page .faq-item { border-bottom-color: var(--borda); background: transparent; } .tech-page .faq-item h3, .tech-page .faq-item summary { color: var(--texto); } .tech-page .faq-item p { color: var(--texto-2); } .tech-page input, .tech-page textarea, .tech-page select { background: var(--sup-1); border-color: var(--borda); color: var(--texto); } /* A cena em sangria também existe no escuro — o véu muda de tom. */ .tech-page .cena::before { background: linear-gradient(100deg, rgba(9,14,5,.94) 0%, rgba(9,14,5,.78) 34%, rgba(9,14,5,.34) 64%, rgba(9,14,5,.16) 100%), linear-gradient(to top, var(--breu) 0%, transparent 40%); } .tech-page .cena__texto h1, .tech-page .cena__texto h2 { color: var(--texto); } /* No escuro o anel do gomo brilha demais; aqui ele é luz contida. */ .tech-page .gomo::after { background: rgba(171,205,48,.5); } .tech-page .colmo--vivo .gomo { --gomo-cor: #1e2c11; } .tech-page .colmo--vivo .gomo:nth-last-child(3) { --gomo-cor: #35540a; } .tech-page .colmo--vivo .gomo:nth-last-child(2) { --gomo-cor: #4e7d0c; } .tech-page .colmo--vivo .gomo:nth-last-child(1) { --gomo-cor: var(--limao); } /* Movimento é convite, não obrigação. Some o movimento, ficam as luzes — que é o que o fundo tem de bonito parado. */ @media (prefers-reduced-motion: reduce) { .tech-page .spec-card-item::after, .tech-page .card::after, .tech-page .plan::after, .tech-page .trust-item::after { animation: none; } } /* As abas no escuro */ .tech-page .module-tabs-nav { border-bottom-color: var(--borda); } .tech-page .module-tab-btn { color: var(--texto-2); } .tech-page .module-tab-btn:hover { background: rgba(171,205,48,.12); color: var(--texto); } .tech-page .module-tab-btn.active { background: var(--limao); color: #16200c; } .tech-page .section-tag { background: rgba(171,205,48,.12); border: 1px solid var(--borda); color: var(--limao); } .tech-page .section-title { color: var(--texto); } .tech-page .section-desc { color: var(--texto-2); } /* ── Correção de layout ─────────────────────────────────────────────────── `.specs-grid` nunca teve regra de grade. Os doze cartões de módulo empilhavam numa coluna única de 1200px e, somados ao limite de medida dos parágrafos, faziam a página parecer ocupar só o lado esquerdo da tela. */ .specs-grid { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); } .tech-page .module-panel-info { max-width: 62rem; } /* Lockup horizontal do topo: a marca vertical inteira era ilegível a 40px. Agora é o símbolo + o nome em texto, como no lado Agromarketing. */ .tech-page .logo-link { gap: 12px; } .tech-page .logo-img { height: 40px; width: auto; filter: none; } .tech-page .marca__nome { display: grid; line-height: 1; } .tech-page .marca__nome b { font-family: var(--fonte-logo); font-size: 1.15rem; letter-spacing: .06em; color: var(--texto); font-weight: 700; } .tech-page .marca__nome span { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--limao); margin-top: 4px; } .tech-page .group-brand-title { letter-spacing: .16em; } /* ── Variáveis legadas ──────────────────────────────────────────────────── As páginas de /tech/ foram escritas contra a paleta v2 (dourado/creme). A reescrita do style.css para a identidade oficial removeu aqueles nomes, e cada `var()` órfão invalida a declaração inteira em silêncio: por isso os cartões de preço ficaram transparentes e o texto quase-branco caiu sobre seções creme, com contraste 1,08. Aqui os nomes antigos ganham destino na pele escura. É ponte, não destino: /tech/ ainda merece uma passada própria de design. */ .tech-page { --card: var(--sup-1); --cream: var(--breu); --cream-2: var(--breu-2); --cream-3: var(--sup-2); --ink: var(--texto); --muted: var(--texto-2); --green: #3f6a08; --green-3: #55880c; --green-deep: #16200c; --gold: var(--limao); --gold-dark: #8fae22; --border-gold: var(--borda); --radius: var(--r-sm); --radius-lg: var(--r-md); --radius-pill: var(--r-pill); --shadow-md: 0 16px 40px rgba(0,0,0,.45); --font-display: var(--fonte); /* Verde como COR DE TEXTO precisa de outro tom: o mesmo #3f6a08 que serve de fundo de selo dá 2,4:1 quando vira letra sobre o fundo escuro. */ --green-texto: #9ec33a; } /* Seções que pediam fundo claro por atributo `style` inline. */ /* Transparente, não breu: o fundo é o corpo, e a brisa passa atrás. */ .tech-page section[style*="var(--cream)"] { background: transparent !important; } /* ── Movimento ──────────────────────────────────────────────────────────── O conteúdo só é escondido se o JS estiver vivo para revelá-lo: a classe .js entra no antes da primeira pintura, e vida.js tem rede de segurança de 3s. Sem JS, tudo aparece normalmente. */ .js .entra, .js .abre { opacity: 0; transform: translateY(18px); } .js .entra.dentro, .js .abre.dentro { opacity: 1; transform: none; transition: opacity .5s var(--decidido), transform .5s var(--brota); } /* A curva de crescimento: o gesto da marca, aqui em limão sobre o escuro. */ .curva-cresce { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 2px 10px rgba(0,0,0,.55)); } .tech-hero .curva-cresce, .hero .curva-cresce { right: 8%; top: 14%; width: min(33%, 360px); } .curva-cresce__linha, .curva-cresce__seta { fill: none; stroke: var(--limao); stroke-width: 2.5; } .curva-cresce__nos circle { fill: #16200c; stroke: var(--limao); stroke-width: 3; } .js .curva-cresce__linha { stroke-dasharray: 100; stroke-dashoffset: 100; } .js .curva-cresce__nos circle, .js .curva-cresce__seta { opacity: 0; } .js .curva-cresce.desenha .curva-cresce__linha { animation: tracar 1.6s var(--decidido) .25s forwards; } .js .curva-cresce.desenha .curva-cresce__nos circle { animation: brotar .45s var(--brota) forwards; } .js .curva-cresce.desenha .curva-cresce__nos circle:nth-child(1) { animation-delay: .55s; } .js .curva-cresce.desenha .curva-cresce__nos circle:nth-child(2) { animation-delay: .95s; } .js .curva-cresce.desenha .curva-cresce__nos circle:nth-child(3) { animation-delay: 1.35s; } .js .curva-cresce.desenha .curva-cresce__seta { animation: brotar .4s var(--brota) 1.7s forwards; } @keyframes tracar { to { stroke-dashoffset: 0; } } @keyframes brotar { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } } .curva-cresce__nos circle, .curva-cresce__seta { transform-box: fill-box; transform-origin: center; } /* O cartão de módulo reage ao ponteiro com a junta do bambu acendendo. */ .tech-page .spec-card-item { position: relative; overflow: hidden; } .tech-page .spec-card-item::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--limao); transform: scaleX(0); transform-origin: left; transition: transform var(--medio) var(--decidido); } .tech-page .spec-card-item:hover::after { transform: scaleX(1); } @media (max-width: 820px) { .tech-hero .curva-cresce, .hero .curva-cresce { right: 5%; top: auto; bottom: 8%; width: 42%; } } @media (prefers-reduced-motion: reduce) { .js .entra, .js .abre { opacity: 1; transform: none; } .js .curva-cresce__linha { stroke-dashoffset: 0; } .js .curva-cresce__nos circle, .js .curva-cresce__seta { opacity: 1; } } /* ── Pixel art ──────────────────────────────────────────────────────────── Mesmo detalhe do lado Agromarketing: os marcadores viram o gomo desenhado pixel a pixel a partir da página 5 da identidade. Só o miúdo muda. */ .tech-page .marcador i { border-radius: 0; } /* o gomo não é pílula */ .tech-page .section-tag::before, .tech-page .eyebrow::before, .tech-page .tech-badge::before { content: ''; display: inline-block; width: 10px; height: 12px; margin-right: 8px; vertical-align: -2px; flex: none; background: url('../images/pixel/broto.svg') center / contain no-repeat; filter: brightness(1.4); } .tech-page .spec-card-item { border-radius: var(--r-sm); } /* ── Blocos que nunca tiveram CSS (14/09/2026) ──────────────────────────── `.tech-intro`, `.architecture-flow`, `.validation-card`, `.tech-stack-badges` e `.footer-tech-brand` estavam na marcação sem uma regra sequer: a lista de pilares saía como "1. 01 RegistrarO que aconteceu", com marcador do navegador e tudo. */ .tech-intro { padding-block: var(--e-7); } .tech-intro__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--e-6); align-items: center; } .tech-intro__pilares, .architecture-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); counter-reset: none; } .tech-intro__pilares li, .architecture-flow li { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--e-2); align-items: start; padding: var(--e-3); border-radius: var(--r-md); background: linear-gradient(160deg, var(--sup-2), var(--sup-1)); border: 1px solid var(--borda); } .tech-intro__pilares b, .architecture-flow b { display: grid; place-items: center; width: 44px; height: 44px; color: var(--limao); font-size: var(--t-sm); letter-spacing: .08em; border: 1px solid var(--borda); border-radius: var(--r-sm); font-variation-settings: 'wght' 650, 'wdth' 90; } .tech-intro__pilares strong { display: block; color: var(--texto); font-size: var(--t-md); font-variation-settings: 'wght' 650, 'wdth' 88; } .tech-intro__pilares span, .architecture-flow span { display: block; color: var(--texto-2); font-size: var(--t-sm); line-height: 1.5; } .architecture-flow { margin-top: var(--e-4); } .architecture-flow li { align-items: center; } .architecture-flow span { font-size: var(--t-md); color: var(--texto); } .architecture-section { padding-block: var(--e-7); } .validation-card { max-width: 64rem; padding: var(--e-5); background: linear-gradient(160deg, var(--sup-2), var(--sup-1)); border: 1px solid var(--borda); border-radius: var(--r-md); box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(238,243,226,.10); } .validation-info .eyebrow { margin-bottom: var(--e-2); } .validation-info h3 { max-width: 22ch; } .tech-stack-badges { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: var(--e-4); } .footer-tech-brand { display: grid; line-height: 1; margin-bottom: var(--e-2); } .footer-tech-brand-name { font-family: var(--fonte-logo); font-size: 1.3rem; letter-spacing: .06em; color: var(--texto); } .footer-tech-brand-label { font-size: var(--t-xs); letter-spacing: .14em; color: var(--limao); margin-top: 6px; } /* ── Cabeçalho no celular ───────────────────────────────────────────────── Abaixo de 900px sobram o lockup e o hambúrguer. O botão de diagnóstico já mora no menu que abre — na barra, ele espremia a marca e quebrava em duas linhas. O hambúrguer tinha três mais ::before/::after: cinco barras num botão de 40px, que liam como três quadrados. */ .hamburger-btn { flex-direction: column; justify-content: center; gap: 6px; padding: 8px; } .hamburger-btn span, .hamburger-btn::before, .hamburger-btn::after { height: 2px; transition: transform var(--rapido) var(--decidido), opacity var(--rapido); } .hamburger-btn.is-open::before { transform: translateY(8px) rotate(45deg); } .hamburger-btn.is-open::after { transform: translateY(-8px) rotate(-45deg); } @media (max-width: 900px) { .header-content > .btn { display: none; } .tech-intro__grid { grid-template-columns: 1fr; gap: var(--e-4); } .mobile-nav-overlay .btn { align-self: flex-start; } } /* A regra de empilhamento das seções sobre a brisa (`position: relative; z-index: 1`) pegava também o cabeçalho: matava o `sticky` que ele tem no style.css e o deixava ABAIXO do menu do celular — com o menu aberto, o botão de fechar sumia. Cabeçalho fixo e por cima de tudo, como no lado Agromarketing. */ .tech-page .global-header-wrapper { position: sticky; top: 0; z-index: 120; } .tech-page .mobile-nav-overlay { z-index: 110; } /* ══ POLIMENTO (16/09/2026, na migração para Laravel) ═══════════════════════ */ /* O grifo do herói era um `::after` absoluto dentro de um que quebra linha: ele pintava só a última caixa do trecho, deslocado, e cortava "comercial e decisão" pela metade. Fundo com `box-decoration-break: clone` pinta cada linha do trecho. */ .tech-page h1 em, .tech-page h2 em { background: linear-gradient(transparent 80%, rgba(171,205,48,.85) 80% 93%, transparent 93%); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .tech-page h1 em::after, .tech-page h2 em::after { display: none; } .hero-lead { max-width: 48ch; } .tech-page .hero .btn-outline { color: var(--texto); } /* Preços: o herói centrado, que antes vinha em `style=""`. */ .tech-hero--centro { text-align: center; padding-block: var(--e-7) var(--e-5); } .tech-hero--centro h1, .tech-hero--centro p { margin-inline: auto; } .tech-hero--centro h1 { max-width: 18ch; } .tech-hero--centro p { max-width: 54ch; color: var(--texto-2); font-size: var(--t-lg); } .pricing-section { padding-block: 0 var(--e-7); } .pricing-title { margin-bottom: var(--e-3); } /* Origem e rigor: o cartão ocupava 64rem com a lista de passos EMBAIXO do texto, e sobrava um terço da tela vazio ao lado. Texto de um lado, passos do outro. */ .validation-card { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--e-5); align-items: center; } .validation-card .architecture-flow { margin-top: 0; } /* A chamada final centrada: alinhada à esquerda ela deixava a metade direita da seção vazia, sem nada que justificasse o vazio. */ .cta-content { text-align: center; max-width: 52rem; } .cta-content h2, .cta-content p { margin-inline: auto; } .cta-content h2 { max-width: 22ch; } .cta-content .btn { margin-top: var(--e-3); } .cta-sub { font-size: var(--t-sm); } /* Rodapé: marca igual à do cabeçalho, títulos de coluna em

(antes

sem

antes deles na página de preços) e a linha final em duas pontas. */ .footer h2 { color: var(--creme); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; opacity: .6; margin-bottom: var(--e-2); font-variation-settings: 'wght' 650, 'wdth' 92; } .footer-logo-link { display: inline-flex; margin-bottom: var(--e-2); } .footer-brand p { max-width: 34ch; font-size: var(--t-sm); } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-1) var(--e-3); } .tech-page .footer-bottom { color: var(--texto-2); opacity: .8; } .footer-slogan { opacity: 1; font-size: inherit; } .footer-nota { font-size: var(--t-sm); color: var(--texto-2); } /* Abas de módulo com rótulo e estado para leitor de tela. */ .module-tab-btn span { opacity: .6; margin-right: 2px; } .module-tab-btn small { opacity: .7; font-size: .75em; margin-left: 2px; } .module-panel-info .subtitle { display: block; color: var(--limao); font-size: var(--t-sm); margin-bottom: var(--e-1); font-variation-settings: 'wght' 600, 'wdth' 94; } .tech-page .tech-blog-section { --a1:#8fc41e; --a2:#2e4e05; --a3:#5a1b30; } .tech-page .blog-lista, .tech-page .artigo-secao { --luz: .5; } @media (max-width: 900px) { .validation-card { grid-template-columns: 1fr; padding: var(--e-4); } }