/* ========================================================= ECOResult — Ecossistema Generativo de Resultados A folha de estilo é a da Neves Tech: mesmos tokens, mesma tipografia, mesmo ritmo. O que entra de novo é a família verde da marca e a espinha do paralelo Negócio | Tecnologia. ========================================================= */ :root{ /* --- herdado do nevestech.com.br, sem mexer --- */ --ink:#0b0d08; --ink-2:#12150d; --olive:#5D6533; --olive-hi:#8b9457; --olive-lo:#3a411f; --cream:#f3f2ec; --cream-dim:#c9c8bd; --gold:#c9a24b; --line:rgba(243,242,236,.14); --maxw:1280px; --ease:cubic-bezier(.22,1,.36,1); /* --- o verde do ECOResult --- Militar, não bandeira. A marca é #1E5631 (matiz 140°, bem saturado); sozinho na tela ele brigava com o oliva da Neves Tech. A família abaixo sai do verde da marca em direção ao oliva #5D6533: matiz mais amarelada e saturação bem menor. A marca em si continua com o verde original. */ --eco-marca:#1E5631; --eco:#405C32; --eco-hi:#789E62; --eco-lo:#1B2B15; --eco-pale:#B9DBA2; /* As duas frentes têm cor própria, e a cor nunca aparece sozinha: cada lado do paralelo traz o nome escrito em cima. */ --negocio:var(--gold); --tecnologia:var(--eco-hi); } *{margin:0;padding:0;box-sizing:border-box} /* `clip` no também, e não só `hidden` no : a gaveta do menu fica fora da tela pela direita, e sem isto ela alarga a página inteira no celular — dá para arrastar o conteúdo para o lado. */ html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased; scroll-padding-top:92px;overflow-x:clip} body{ background:var(--ink);color:var(--cream); font-family:"Space Grotesk",system-ui,sans-serif; font-weight:300;line-height:1.6;overflow-x:clip; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--eco);color:#fff} .serif{font-family:"Fraunces",Georgia,serif} .eyebrow{font-size:11px;letter-spacing:.42em;text-transform:uppercase; font-weight:500;color:var(--eco-hi)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,64px)} .fino{max-width:820px} .pad{padding:clamp(84px,12vw,170px) 0} .pad-c{padding:clamp(54px,8vw,110px) 0} .muted{color:var(--cream-dim)} .lead{font-family:"Fraunces",serif;font-weight:300; font-size:clamp(27px,4.2vw,56px);line-height:1.1;letter-spacing:-.01em} .lead em{font-style:italic;color:var(--eco-hi)} h1,h2,h3,h4{font-family:"Fraunces",serif;font-weight:300;line-height:1.08; letter-spacing:-.015em} p{max-width:68ch} /* grão e vinheta — a textura que o site da Neves Tech usa */ .grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .vignette{position:fixed;inset:0;z-index:9997;pointer-events:none; box-shadow:inset 0 0 240px 60px rgba(0,0,0,.55)} /* reveal */ .rv{opacity:0;transform:translateY(30px); transition:opacity 1s var(--ease),transform 1s var(--ease)} .rv.in{opacity:1;transform:none} .rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s} .rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s} @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* ----------------------------------------------------------- cabeçalho */ /* O cabeçalho está lá desde o primeiro quadro e acompanha a página inteira. Ele já nasceu escondido, para se revelar na primeira rolagem, e isso custava caro: enquanto o roteiro não rodava não havia menu nenhum, e quando rodava o menu piscava. Um menu que aparece de relance é pior do que um menu parado. O que muda com a rolagem é só a roupa — o fundo fecha, a altura encolhe e a linha de baixo aparece. */ header{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0; border-bottom:1px solid transparent; transition:background .5s var(--ease),padding .5s var(--ease), border-color .5s} header.scrolled{background:rgba(11,13,8,.80);backdrop-filter:blur(14px); padding:11px 0;border-color:var(--line)} @media (prefers-reduced-motion:reduce){ header{transition:none} } .nav{display:flex;align-items:center;justify-content:space-between;gap:24px} .brand{display:flex;align-items:center;gap:12px;color:var(--cream)} .menu{display:flex;gap:clamp(18px,2.6vw,36px);align-items:center} .menu a{font-size:12px;letter-spacing:.17em;text-transform:uppercase; color:var(--cream-dim);position:relative;transition:color .3s;white-space:nowrap} .menu a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px; background:var(--eco-hi);transition:width .35s var(--ease)} .menu a:hover,.menu a[aria-current=page]{color:var(--cream)} .menu a:hover::after,.menu a[aria-current=page]::after{width:100%} .menu .cta{border:1px solid var(--line);padding:9px 18px;border-radius:40px; color:var(--cream)} .menu .cta:hover{background:var(--eco);border-color:var(--eco)} .menu .cta::after{display:none} .burger{display:none;flex-direction:column;gap:5px;cursor:pointer; background:none;border:0;padding:6px} .burger span{width:26px;height:2px;background:var(--cream);transition:.3s} /* ----------------------------------------------------------- herói */ .hero{position:relative;min-height:100svh;display:flex;align-items:center; overflow:hidden;padding:120px 0 80px} .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 50%; filter:saturate(.85) contrast(1.02)} /* A foto nunca fica atrás do texto como papel de parede: ela entra pela direita e some num degradê antes de chegar na coluna de leitura. */ .hero-bg::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,var(--ink) 0%,rgba(11,13,8,.94) 38%, rgba(11,13,8,.62) 62%,rgba(11,13,8,.35) 100%), linear-gradient(180deg,rgba(11,13,8,.8),transparent 30%,rgba(11,13,8,.9))} .hero-inner{position:relative;z-index:2;width:100%} .hero .marca-grande{width:clamp(180px,26vw,340px);color:var(--cream); margin-bottom:clamp(26px,4vw,44px)} .hero h1{font-size:clamp(30px,4.6vw,60px);line-height:1.04;max-width:16ch; margin-top:8px} .hero h1 em{font-style:italic;color:var(--eco-hi)} .hero .sub{max-width:560px;margin-top:26px;font-size:clamp(15px,1.7vw,19px); color:var(--cream-dim)} .hero .sub b{color:var(--cream);font-weight:400} .hero-acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px} .botao{display:inline-flex;align-items:center;gap:10px;font-size:12.5px; letter-spacing:.2em;text-transform:uppercase;font-weight:500; padding:15px 32px;border-radius:40px;transition:.4s var(--ease); border:1px solid transparent;cursor:pointer;font-family:inherit} .botao.cheio{background:var(--eco);color:#fff} .botao.cheio:hover{background:var(--cream);color:var(--ink);letter-spacing:.26em} .botao.vazio{border-color:var(--line);color:var(--cream)} .botao.vazio:hover{border-color:var(--eco-hi);color:var(--eco-hi)} /* ------------------------------------------------- a espinha do paralelo */ /* A ideia inteira do site em um elemento: uma linha vertical que desce a página inteira, com Negócio de um lado e Tecnologia do outro. A linha não é decoração — ela é o argumento. */ .espinha{background:var(--ink-2);position:relative;overflow:hidden} .espinha-topo{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,4vw,56px); align-items:end;margin-bottom:clamp(40px,6vw,72px)} .espinha-topo .lado{text-align:right} .espinha-topo .lado:last-child{text-align:left} .espinha-topo .rot{font-family:"Fraunces",serif;font-size:clamp(20px,3vw,34px); line-height:1} .espinha-topo .neg .rot{color:var(--negocio)} .espinha-topo .tec .rot{color:var(--tecnologia)} .espinha-topo .dica{font-size:12.5px;color:var(--cream-dim);margin-top:10px} .espinha-topo .meio{font-size:10px;letter-spacing:.34em;text-transform:uppercase; color:var(--cream-dim);padding-bottom:6px} .par{display:grid;grid-template-columns:1fr 2px 1fr; gap:clamp(16px,4vw,56px);align-items:stretch} .par + .par{margin-top:2px} .par .cel{padding:clamp(22px,3vw,38px) clamp(6px,1.6vw,20px); display:flex;flex-direction:column;justify-content:center;gap:9px} .par .neg{text-align:right;align-items:flex-end} .par .tec{text-align:left;align-items:flex-start} .par h3{font-size:clamp(17px,2.1vw,25px);line-height:1.18;font-weight:400} .par p{font-size:14px;color:var(--cream-dim);max-width:34ch} .par .selo{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase; display:inline-flex;align-items:center;gap:7px;color:var(--cream-dim)} .par .selo i{width:7px;height:7px;border-radius:50%;display:inline-block} .par .neg .selo i{background:var(--negocio)} .par .tec .selo i{background:var(--tecnologia)} /* A linha do meio: um traço que se preenche conforme a página desce. */ .fio{position:relative;background:var(--line)} .fio::after{content:"";position:absolute;inset:0 0 auto 0;height:var(--preenche,0%); background:linear-gradient(180deg,var(--negocio),var(--tecnologia)); transition:height .8s var(--ease)} .fio .no{position:absolute;left:50%;top:50%;width:9px;height:9px; transform:translate(-50%,-50%) rotate(45deg);background:var(--ink-2); border:1px solid var(--line)} .par.aceso .fio .no{border-color:var(--eco-hi);background:var(--eco-lo)} @media(max-width:860px){ .espinha-topo{grid-template-columns:1fr;text-align:left;gap:6px} .espinha-topo .lado,.espinha-topo .lado:last-child{text-align:left} .espinha-topo .meio{display:none} .par{grid-template-columns:2px 1fr;gap:18px} .par .cel{text-align:left;align-items:flex-start;padding:16px 0} .par .neg{order:2}.par .fio{order:1;grid-row:span 2}.par .tec{order:3} .par p{max-width:none} } /* ----------------------------------------------------------- blocos */ .cabeca{display:flex;justify-content:space-between;align-items:flex-end; flex-wrap:wrap;gap:20px;margin-bottom:clamp(36px,5vw,64px)} .cabeca h2{font-size:clamp(30px,4.6vw,58px)} .cabeca h2 em{font-style:italic;color:var(--eco-hi)} .grade{display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:var(--line);border:1px solid var(--line)} .grade.tres{grid-template-columns:repeat(3,1fr)} .cel-g{background:var(--ink-2);padding:clamp(26px,3.4vw,48px);min-height:210px; display:flex;flex-direction:column;gap:11px;transition:background .5s var(--ease)} .cel-g:hover{background:#171b0f} .cel-g .num{font-family:"Fraunces",serif;font-size:15px;color:var(--eco-hi); letter-spacing:.1em} .cel-g h3{font-size:clamp(20px,2.4vw,28px);font-weight:400} .cel-g p{color:var(--cream-dim);font-size:14.5px} @media(max-width:860px){.grade,.grade.tres{grid-template-columns:1fr}} .numeros{display:grid;grid-template-columns:repeat(4,1fr);gap:24px; border-top:1px solid var(--line);padding-top:38px;margin-top:clamp(40px,6vw,70px)} .numeros .n{font-family:"Fraunces",serif;font-size:clamp(30px,4.4vw,52px); font-weight:300;line-height:1;color:var(--cream)} .numeros .l{font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--cream-dim);margin-top:11px} @media(max-width:860px){.numeros{grid-template-columns:1fr 1fr;gap:28px}} /* --------------------------------------------------- a faixa com foto */ /* A foto entra no conteúdo, não atrás dele: metade da largura, com a borda dissolvendo no fundo. Nunca há texto por cima da imagem. */ .faixa-foto{position:relative;overflow:hidden;background:var(--ink)} .faixa-foto .duo{display:grid;grid-template-columns:1.02fr .98fr; gap:clamp(30px,6vw,84px);align-items:center} .faixa-foto .foto{position:relative} .faixa-foto .foto img{width:100%;border-radius:3px;filter:saturate(.92)} .faixa-foto .foto::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,var(--ink),transparent 22%,transparent 78%,var(--ink)), linear-gradient(180deg,var(--ink),transparent 18%,transparent 82%,var(--ink))} @media(max-width:860px){.faixa-foto .duo{grid-template-columns:1fr}} /* ------------------------------------------------- a ferramenta (prints) */ .tela{position:relative;border-radius:10px;overflow:hidden; border:1px solid var(--line);background:var(--eco-lo); box-shadow:0 30px 80px rgba(0,0,0,.45)} .tela img{width:100%;display:block} .tela-barra{display:flex;align-items:center;gap:7px;padding:11px 14px; background:#0e1a12;border-bottom:1px solid var(--line)} .tela-barra i{width:9px;height:9px;border-radius:50%;background:#2a3a2e;display:block} .tela-barra span{margin-left:10px;font-size:11px;letter-spacing:.1em; color:var(--cream-dim);text-transform:uppercase} /* o passo a passo que roda sozinho */ .fluxo{display:grid;grid-template-columns:300px 1fr;gap:clamp(24px,4vw,54px); align-items:start} .passos{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line)} .passo{background:none;border:0;text-align:left;cursor:pointer;color:inherit; font-family:inherit;padding:15px 20px;border-left:2px solid transparent; margin-left:-1px;transition:.35s var(--ease)} .passo b{display:block;font-family:"Fraunces",serif;font-weight:400;font-size:17px; color:var(--cream-dim);transition:color .35s} .passo small{display:block;font-size:13px;color:#7e8477;margin-top:5px;line-height:1.45} .passo[aria-selected=true]{border-left-color:var(--eco-hi);background:rgba(62,145,96,.07)} .passo[aria-selected=true] b{color:var(--cream)} .passo[aria-selected=true] small{color:var(--cream-dim)} .quadros{position:relative} .quadros .q{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)} .quadros .q.on{opacity:1;position:relative} @media(max-width:860px){ .fluxo{grid-template-columns:1fr} .passos{flex-direction:row;overflow-x:auto;border-left:0;border-top:1px solid var(--line)} .passo{border-left:0;border-top:2px solid transparent;min-width:230px} .passo[aria-selected=true]{border-left-color:transparent;border-top-color:var(--eco-hi)} } /* galeria de telas */ .telas-fita{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px} .telas-fita figure{margin:0} .telas-fita figcaption{font-size:12.5px;color:var(--cream-dim);margin-top:12px; padding-left:2px} .telas-fita figcaption b{color:var(--cream);font-weight:500;display:block; font-family:"Fraunces",serif;font-size:16px;margin-bottom:3px} /* ----------------------------------------------------------- linha do tempo */ .tempo{border-top:1px solid var(--line)} .etapa{display:grid;grid-template-columns:110px 1fr;gap:clamp(16px,3vw,40px); padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line); align-items:start} .etapa .qd{font-family:"Fraunces",serif;font-weight:300; font-size:clamp(30px,4vw,50px);color:var(--cream-dim);line-height:.85} /* `acesa`, e não `viva`: `.viva` é a marca desenhada ao lado do título e tem largura fixa. Com o mesmo nome, a etapa herdava 62px de largura e o texto dela era espremido numa coluna de uma palavra. */ .etapa.acesa .qd{color:var(--eco-hi)} .etapa h4{font-size:clamp(18px,2.1vw,24px);font-weight:400;margin-bottom:8px; display:flex;align-items:center;gap:12px;flex-wrap:wrap} .etapa .tag{font-family:"Space Grotesk",sans-serif;font-size:9px; letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--eco); padding:4px 10px;border-radius:30px;font-weight:500} .etapa .tag.neg{background:var(--olive)} .etapa p{color:var(--cream-dim);font-size:14.5px} .etapa .saida{font-size:10.5px;letter-spacing:.08em;color:var(--eco-hi); margin-top:10px;text-transform:uppercase} @media(max-width:860px){.etapa{grid-template-columns:56px 1fr;gap:16px}} /* ----------------------------------------------------------- chamada final */ .chamada{position:relative;background:linear-gradient(140deg,#14200f,var(--eco-lo)); overflow:hidden} /* O símbolo fantasma da faixa final. * * `height:auto` não é detalhe: um SVG embutido que só tem viewBox, sem * altura declarada, cai na altura padrão de 150px de um elemento * substituído e ESTICA na largura. Era isso que achatava o infinito. * * E ele é contorno, não mancha: o traço aberto deixa o fundo respirar e o * desenho lê como filigrana em vez de borrão. */ .chamada .marca-fantasma{position:absolute;right:-7%;top:50%; transform:translateY(-50%);width:44%;opacity:.26;color:var(--eco-pale); pointer-events:none} .chamada .marca-fantasma svg{width:100%;height:auto;display:block} .chamada .marca-fantasma svg, .chamada .marca-fantasma g, .chamada .marca-fantasma path{fill:none;stroke:currentColor;stroke-width:9; stroke-linejoin:round;stroke-linecap:round} /* Nenhum SVG embutido no site pode depender da altura padrão. */ svg{max-width:100%} .chamada .dentro{position:relative;z-index:2;max-width:760px} .chamada h2{font-size:clamp(32px,5.4vw,70px);line-height:1} .chamada h2 em{font-style:italic;color:var(--eco-hi)} .chamada p{margin-top:24px;color:var(--cream-dim);font-size:16.5px} /* ----------------------------------------------------------- rodapé */ footer{background:var(--ink);border-top:1px solid var(--line); padding:56px 0 36px;position:relative;z-index:2} .pe{display:flex;justify-content:space-between;align-items:flex-start; flex-wrap:wrap;gap:30px} .pe .marca-pe{color:var(--cream)} .pe .criador{max-width:360px} .pe .criador p{font-size:13.5px;color:var(--cream-dim);margin:12px 0 16px} .volta{display:inline-flex;align-items:center;gap:10px;font-size:11.5px; letter-spacing:.18em;text-transform:uppercase;color:var(--cream); border:1px solid var(--line);border-radius:40px;padding:11px 20px; transition:.35s var(--ease)} .volta:hover{border-color:var(--gold);color:var(--gold)} .rodape-links{display:flex;flex-direction:column;gap:9px;font-size:13px; color:var(--cream-dim)} .rodape-links a:hover{color:var(--eco-hi)} .copy{margin-top:38px;padding-top:22px;border-top:1px solid var(--line); display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; font-size:11px;letter-spacing:.13em;text-transform:uppercase; color:rgba(243,242,236,.4)} /* divisor com varredura dourada — o mesmo do site da Neves Tech */ .divisor{height:1px;background:var(--line);position:relative;overflow:hidden} .divisor::after{content:"";position:absolute;top:0;left:-30%;width:30%;height:100%; background:linear-gradient(90deg,transparent,var(--gold),transparent); animation:varre 5s linear infinite} @keyframes varre{to{left:130%}} @media (prefers-reduced-motion:reduce){.divisor::after{animation:none;opacity:0}} /* a marca que se desenha sozinha, no herói */ .marca-viva path{opacity:0;animation:nascer .9s var(--ease) forwards} .marca-viva path:nth-child(2){animation-delay:.25s} @keyframes nascer{to{opacity:1}} @media (prefers-reduced-motion:reduce){.marca-viva path{animation:none;opacity:1}} @media(max-width:860px){ .chamada .marca-fantasma{width:78%;right:-24%;opacity:.13} .menu{position:fixed;inset:0 0 0 auto;width:80%;max-width:340px; background:rgba(11,13,8,.97);backdrop-filter:blur(18px); flex-direction:column;justify-content:center;gap:30px; transform:translateX(100%);transition:transform .5s var(--ease); border-left:1px solid var(--line)} .menu.aberto{transform:none} .menu a{font-size:15px} .burger{display:flex;z-index:120} .hero h1{max-width:none} .pe{flex-direction:column} } /* o rótulo acima da cena desenhada */ .cena-rot{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--cream-dim);margin-bottom:12px} /* o número grande dentro de uma célula da grade */ .n-grande{font-family:"Fraunces",serif;font-weight:300; font-size:clamp(46px,6.5vw,86px);line-height:.9;color:var(--eco-hi); letter-spacing:-.02em} .n-grande i{font-style:normal;font-size:.42em;margin-left:2px;color:var(--cream-dim)} .numeros .n i{font-style:normal;font-size:.5em;color:var(--cream-dim);margin-left:1px} .cel-g .n-grande + h3{font-size:clamp(17px,1.9vw,21px);margin-top:4px} /* >>> gerado — não edite daqui para baixo <<< */ /* ------------------------------------------------- o fundo de raízes */ /* O mesmo desenho do nevestech.com.br. Fica atrás de tudo, não recebe clique, e é discreto de propósito: se der para reparar nele, está alto demais. */ .rootbg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.085} .rootbg svg{width:100%;height:100%;display:block} .rootbg .stem{fill:none;stroke:var(--eco-hi);stroke-width:1.4;stroke-linecap:round; stroke-dasharray:2000;stroke-dashoffset:2000; animation:raiz-cresce 7s var(--ease) forwards, raiz-vento 7s ease-in-out infinite alternate; transform-box:fill-box;transform-origin:50% 100%} .rootbg .vine > .stem:nth-of-type(1){animation-delay:0s,.4s;animation-duration:6.5s,7.2s} .rootbg .vine > .stem:nth-of-type(2){animation-delay:.5s,1.3s;animation-duration:6.5s,5.6s} .rootbg .vine > .stem:nth-of-type(3){animation-delay:.9s,.2s;animation-duration:6.5s,8.4s} .rootbg .vine > .stem:nth-of-type(4){animation-delay:1.3s,1.8s;animation-duration:6.5s,6.2s} .rootbg .vine > .stem:nth-of-type(5){animation-delay:.7s,1s;animation-duration:6.5s,9s} .rootbg .leaf{fill:var(--eco-hi);opacity:0;transform-box:fill-box;transform-origin:50% 92%; animation:raiz-folha 1.4s var(--ease) forwards, raiz-folhavento 4.6s ease-in-out infinite alternate} .rootbg .leaves .leaf:nth-of-type(1){animation-delay:3.4s,3.6s} .rootbg .leaves .leaf:nth-of-type(2){animation-delay:3.8s,4s} .rootbg .leaves .leaf:nth-of-type(3){animation-delay:3.6s,3.9s} .rootbg .leaves .leaf:nth-of-type(4){animation-delay:4.1s,4.4s} .rootbg .leaves .leaf:nth-of-type(5){animation-delay:3.9s,4.1s} .rootbg .leaves .leaf:nth-of-type(6){animation-delay:4.4s,4.6s} .rootbg .leaves .leaf:nth-of-type(7){animation-delay:4.2s,4.5s} .rootbg .vine{transform-box:view-box;transform-origin:50% 100%; animation:raiz-deriva 26s ease-in-out infinite alternate} @keyframes raiz-cresce{to{stroke-dashoffset:0}} @keyframes raiz-vento{0%{transform:rotate(-2.4deg)}100%{transform:rotate(2.8deg)}} @keyframes raiz-folha{to{opacity:1}} @keyframes raiz-folhavento{0%{transform:rotate(-11deg)}100%{transform:rotate(12deg)}} @keyframes raiz-deriva{0%{transform:translateX(-10px) rotate(-.6deg)} 100%{transform:translateX(10px) rotate(.8deg)}} /* O conteúdo fica na frente do fundo. */ header,main,footer{position:relative;z-index:2} /* --------------------------------------------- a marca viva de cada página */ .titulo-vivo{display:flex;align-items:flex-start;gap:clamp(16px,2.4vw,30px)} .titulo-vivo > div{min-width:0} .viva{flex:none;width:clamp(42px,5vw,62px);height:auto;color:var(--eco-hi); margin-top:6px} .viva .chao{stroke:currentColor;opacity:.4;stroke-width:1.4;stroke-linecap:round} .viva .semente{fill:var(--gold)} .viva .haste{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round; stroke-dasharray:70;stroke-dashoffset:70;animation:viva-haste 1.5s var(--ease) .2s forwards} .viva .haste.h2{animation-delay:.7s}.viva .haste.h3{animation-delay:.85s} .viva .haste.h4{animation-delay:1s}.viva .haste.h5{animation-delay:1.15s} .viva .anel{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round; stroke-dasharray:150;stroke-dashoffset:150;animation:viva-haste 1.8s var(--ease) .2s forwards} .viva .no{fill:var(--gold);opacity:0;animation:viva-folha .5s var(--ease) forwards} .viva .no.n1{animation-delay:1.2s}.viva .no.n2{animation-delay:1.35s} .viva .no.n3{animation-delay:1.5s}.viva .no.n4{animation-delay:1.65s} .viva .no.n5{animation-delay:1.8s} .viva .folha{fill:currentColor;opacity:0;transform-box:fill-box; transform-origin:50% 92%; animation:viva-folha .7s var(--ease) forwards, viva-vento 5.2s ease-in-out infinite alternate} .viva .folha.f1{animation-delay:.9s,2s} .viva .folha.f2{animation-delay:1.1s,2.3s} .viva .folha.f3{animation-delay:1.3s,2.6s} .viva .folha.f4{animation-delay:1.5s,2.9s} .viva .folha.f5{animation-delay:1.7s,3.2s} @keyframes viva-haste{to{stroke-dashoffset:0}} @keyframes viva-folha{to{opacity:1}} @keyframes viva-vento{0%{transform:rotate(-6deg)}100%{transform:rotate(6deg)}} @media(max-width:640px){.titulo-vivo{gap:14px}.viva{width:38px}} /* Menos movimento: o desenho inteiro, sem crescer e sem balancar. Sem transform:none — no SVG isso derrubaria as pecas para o canto. */ @media (prefers-reduced-motion:reduce){ .rootbg *,.viva *{animation:none!important;stroke-dashoffset:0!important} .rootbg .leaf,.viva .folha,.viva .no{opacity:1!important} } /* ------------------------------------------------- o botão flutuante */ .nt-challenge{position:fixed;right:24px;bottom:24px;z-index:9999; display:inline-flex;align-items:center;gap:12px; background:linear-gradient(135deg,var(--eco),var(--eco-lo));color:var(--cream); padding:12px 22px 12px 13px;border-radius:46px;text-decoration:none; box-shadow:0 12px 34px rgba(11,13,8,.34);border:1px solid rgba(201,162,75,.35); animation:fl-nasce .55s .9s both, fl-brilha 3.6s ease-in-out 1.6s infinite; transition:transform .2s ease,box-shadow .2s ease;max-width:calc(100vw - 48px)} .nt-challenge:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 20px 46px rgba(11,13,8,.42)} .nt-challenge:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .nt-challenge .ic{position:relative;width:40px;height:40px;border-radius:50%; background:rgba(243,242,236,.14);display:flex;align-items:center; justify-content:center;flex:none;overflow:visible} .nt-challenge .nt-sprout{position:absolute;left:50%;bottom:-3px; transform:translateX(-50%);width:38px;height:58px;color:var(--cream);overflow:visible} .nt-challenge .ring{position:absolute;inset:-2px;border-radius:50%; border:2px solid var(--gold);opacity:0;animation:fl-pulsa 2.6s ease-out infinite} .nt-challenge .lb{display:flex;flex-direction:column;line-height:1.14;min-width:0} .nt-challenge .lb b{font-weight:600;font-size:15px;letter-spacing:.01em} /* O brilho que atravessa mora dentro de uma moldura que recorta: a faixa anda de -60% a 135%, então sem esse recorte ela sai pela lateral e passa por cima da página. A moldura fica parada; quem anda é o . */ .nt-challenge .sheen{position:absolute;inset:0;border-radius:46px; overflow:hidden;pointer-events:none;z-index:0} .nt-challenge .sheen i{position:absolute;top:0;left:-60%;width:42%;height:100%; display:block;transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(243,242,236,.24),transparent); animation:fl-varre 4.8s ease-in-out 2.2s infinite} .nt-challenge .ic,.nt-challenge .lb{position:relative;z-index:1} @keyframes fl-nasce{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}} @keyframes fl-pulsa{0%{opacity:.6;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.7)}} @keyframes fl-brilha{0%,100%{box-shadow:0 12px 34px rgba(11,13,8,.34)} 50%{box-shadow:0 12px 34px rgba(11,13,8,.34),0 0 22px 3px rgba(201,162,75,.32)}} @keyframes fl-varre{0%{left:-60%}45%,100%{left:135%}} /* a plantinha do botão */ .nt-sprout .so{stroke:currentColor;opacity:.45;stroke-width:1.4;stroke-linecap:round} .nt-sprout .sd{fill:var(--gold)} .nt-sprout .st{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round; stroke-dasharray:28;stroke-dashoffset:28;animation:fl-caule 5s ease-in-out infinite} .nt-sprout .lf{fill:currentColor;transform-box:fill-box;opacity:0} .nt-sprout .ll{transform-origin:100% 100%;animation:fl-folhaE 5s ease-in-out infinite} .nt-sprout .lr{transform-origin:0% 100%;animation:fl-folhaD 5s ease-in-out infinite} @keyframes fl-caule{0%{stroke-dashoffset:28}34%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:28}} @keyframes fl-folhaE{0%,18%{opacity:0;transform:scale(0)}42%,90%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(.45)}} @keyframes fl-folhaD{0%,26%{opacity:0;transform:scale(0)}50%,90%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(.45)}} @media(max-width:600px){ .nt-challenge{right:12px;bottom:12px;padding:10px 17px 10px 10px;gap:9px} .nt-challenge .ic{width:33px;height:33px} .nt-challenge .nt-sprout{width:31px;height:47px} .nt-challenge .lb b{font-size:13px} } @media print{.nt-challenge{display:none!important}} @media (prefers-reduced-motion:reduce){ .nt-challenge{animation:fl-nasce .1s both} .nt-challenge .ring,.nt-challenge .sheen{display:none} .nt-sprout .st{animation:none;stroke-dashoffset:0} .nt-sprout .lf{animation:none;opacity:1} } /* ------------------------------------------------- o fluxo desenhado */ .cena{width:100%;height:auto;display:block;border-radius:10px; background:#0d130e;border:1px solid var(--line)} /* Nada anima enquanto a cena está escondida: a animação começa quando a cena entra, e não no meio do filme. */ .q .cena *{animation-play-state:paused} .q.on .cena *{animation-play-state:running} /* 1 · chega */ .q.on .entrando{animation:eco-entra 1s var(--ease) both} @keyframes eco-entra{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}} .q.on .pisca{animation:eco-pisca 1.8s ease-in-out .8s infinite} @keyframes eco-pisca{0%,100%{opacity:1}50%{opacity:.25}} .q.on .seta{stroke-dasharray:44;stroke-dashoffset:44; animation:eco-risca .7s var(--ease) both} @keyframes eco-risca{to{stroke-dashoffset:0}} /* 2 · executa Atencao: quando o CSS anima a propriedade transform, ela APAGA o atributo transform do SVG. Por isso o selo e o carimbo tem um de fora so para posicionar e um de dentro para animar — juntos, o desenho pula para o canto superior esquerdo assim que a animacao comeca. */ .q.on .mark{transform-box:fill-box;transform-origin:50% 50%; animation:eco-pulsa 2.6s ease-in-out infinite} @keyframes eco-pulsa{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}} .q.on .escrita{stroke-dasharray:420;stroke-dashoffset:420; animation:eco-escreve .9s var(--ease) both} .q.on .escrita.l1{animation-delay:.22s}.q.on .escrita.l2{animation-delay:.44s} .q.on .escrita.l3{animation-delay:.66s}.q.on .escrita.l4{animation-delay:.88s} @keyframes eco-escreve{to{stroke-dashoffset:0}} .q.on .etiq{animation:eco-sobe .6s var(--ease) 1.3s both} .q.on .etiq3{animation:eco-sobe .5s var(--ease) .15s both} @keyframes eco-sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* 3 · você decide */ .q.on .mouse{animation:eco-cursor 2.6s var(--ease) both} @keyframes eco-cursor{ 0%{transform:translate(520px,330px);opacity:0} 18%{opacity:1} 55%{transform:translate(250px,268px)} 62%{transform:translate(250px,268px) scale(.86)} 70%,100%{transform:translate(250px,268px)}} .q.on .bt-ok{animation:eco-clica 2.6s var(--ease) both} @keyframes eco-clica{0%,58%{filter:none}64%{filter:brightness(1.5)}100%{filter:none}} .q.on .carimbo{transform-box:fill-box;transform-origin:50% 50%; animation:eco-carimba .7s var(--ease) 1.7s both} @keyframes eco-carimba{from{opacity:0;transform:scale(.4) rotate(-14deg)} to{opacity:1;transform:none}} /* 4 · vai ao mundo */ .q.on .saindo{animation:eco-encolhe 1s var(--ease) both} @keyframes eco-encolhe{from{opacity:.35}to{opacity:1}} .q.on .trilho{stroke-dasharray:6 7;animation:eco-anda 1.1s linear infinite} @keyframes eco-anda{to{stroke-dashoffset:-26}} .q.on .alvo{transform-box:fill-box;animation:eco-acende .6s var(--ease) both} .q.on .alvo.a0{animation-delay:.9s}.q.on .alvo.a1{animation-delay:1.35s} .q.on .alvo.a2{animation-delay:1.8s} @keyframes eco-acende{from{opacity:.25}to{opacity:1}} /* 5 · fica medido */ .q.on .barra{transform-box:fill-box;transform-origin:50% 100%; animation:eco-cresce .8s var(--ease) both} .q.on .barra.b0{animation-delay:0.00s}.q.on .barra.b1{animation-delay:0.09s}.q.on .barra.b2{animation-delay:0.18s}.q.on .barra.b3{animation-delay:0.27s}.q.on .barra.b4{animation-delay:0.36s}.q.on .barra.b5{animation-delay:0.45s}.q.on .barra.b6{animation-delay:0.54s}.q.on .barra.b7{animation-delay:0.63s} @keyframes eco-cresce{from{transform:scaleY(0)}to{transform:scaleY(1)}} .q.on .curva{stroke-dasharray:900;stroke-dashoffset:900; animation:eco-risca2 1.6s var(--ease) .7s both} @keyframes eco-risca2{to{stroke-dashoffset:0}} .q.on .etiq2{animation:eco-sobe .6s var(--ease) 2s both} /* Menos movimento: tudo parado e INTEIRO. Nada de transform:none aqui — num SVG o atributo transform E a mesma propriedade do CSS, e zera-la jogaria cada peca do desenho para o canto superior esquerdo. */ @media (prefers-reduced-motion:reduce){ .cena *,.q.on .cena *{animation:none!important; stroke-dashoffset:0!important;opacity:1!important} .q.on .alvo,.q.on .cena .folha{opacity:1} } /* ----------------------------------------------------------------- a marca */ /* Uma medida governa tudo: o font-size de .eco-marca. O simbolo e 1,3 vez a altura do texto, o que da ao conjunto altura suficiente para nao ler como uma faixa achatada. */ .eco-marca{display:inline-flex;align-items:center;gap:.30em;line-height:1; white-space:nowrap} .eco-marca .eco-simbolo{height:1.30em;width:auto;flex:none;display:block} .eco-nome{font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:1em; letter-spacing:-.005em;line-height:1} .eco-nome b{font-weight:700;letter-spacing:.002em} /* Nos lugares onde a marca aparece, o tamanho é dado aqui e mais nada. */ .brand .eco-marca{font-size:21px} header.scrolled .brand .eco-marca{font-size:18px} .marca-pe .eco-marca{font-size:24px} @media(max-width:640px){.brand .eco-marca{font-size:17px}} /* ------------------------------------------------ as três larguras */ /* Alinhados pela base, com a largura proporcional ao aparelho de verdade: é o alinhamento que faz o conjunto ler como "o mesmo sistema em três tamanhos" em vez de três imagens soltas. */ .aparelhos{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.72fr) minmax(0,.4fr); gap:clamp(16px,2.4vw,34px);align-items:end} .ap{margin:0;min-width:0} .ap .tela{box-shadow:0 20px 56px rgba(0,0,0,.42)} .ap-cel .tela{border-radius:16px} .ap-cel .tela-barra{padding:8px 10px} .ap figcaption{font-size:13px;color:var(--cream-dim);margin-top:14px;line-height:1.5} .ap figcaption b{display:block;font-family:"Fraunces",serif;font-weight:400; font-size:15.5px;color:var(--cream);margin-bottom:4px} @media(max-width:860px){ .aparelhos{grid-template-columns:1fr;gap:34px;align-items:stretch} .ap-cel,.ap-tab{max-width:340px} } /* ------------------------------------------------------- galeria de telas */ .galeria{display:block} /* O menu das telas é UMA linha, sempre. Com quebra, a última aba cai sozinha na linha de baixo e passa a parecer defeito; quando não couber, a linha rola de lado em vez de quebrar. */ /* Rolagem só no eixo X não existe sozinha: quando um eixo deixa de ser visible, o outro vira auto junto — e a margem de -1px das abas bastava para o navegador achar que faltava espaço embaixo e desenhar uma barra vertical. Por isso o eixo Y é declarado hidden na mão. A barra horizontal também sai de cena: a linha só rola quando não cabe, e aí o próprio corte das abas mostra que há mais coisa. */ .gal-menu{display:flex;flex-direction:row;flex-wrap:nowrap;gap:2px;border-left:0; align-items:flex-end;overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-ms-overflow-style:none; border-bottom:1px solid var(--line);margin-bottom:clamp(22px,3vw,34px)} .gal-menu::-webkit-scrollbar{display:none} .gal-menu .passo{border-left:0;border-bottom:2px solid transparent;margin:0 0 -1px; padding:12px clamp(9px,1.05vw,15px);font-size:clamp(12px,.95vw,13px); letter-spacing:.01em;color:var(--cream-dim);white-space:nowrap;flex:0 0 auto; font-family:"Space Grotesk",sans-serif} .gal-menu .passo:hover{color:var(--cream)} .gal-menu .passo[aria-selected=true]{border-left-color:transparent; border-bottom-color:var(--eco-hi);color:var(--cream);background:rgba(62,145,96,.07)} .gal-quadros .q{width:100%} .gal-nota{margin-top:16px;font-size:14.5px;color:var(--cream-dim);max-width:70ch} @media(max-width:860px){ .gal-menu{-webkit-overflow-scrolling:touch} .gal-menu .passo{padding:11px 14px} }