/** * new.css — landing autônoma (/new) * * Linguagem visual espelhada no linear.app aplicada à marca Talentos: * hairlines de 1px, tipografia Inter com tracking negativo nos títulos * grandes e laranja da marca como único acento. * * Página autônoma: não carrega core.min.css / vendor_bundle. * * TEMA — toda cor vem de um token do :root. O tema escuro é o padrão; o claro * apenas sobrescreve os tokens em [data-theme="light"]. Quem escreve o atributo * é o script inline do (localStorage > preferência do sistema), antes da * primeira pintura, para não piscar. Sem JavaScript a página fica no escuro. * Nenhuma regra abaixo do bloco de tokens deve ter cor literal. */ /* ============================================================ TOKENS */ :root{ color-scheme:dark; /* Superfícies */ --bg:#08090b; --bg-soft:#0b0d10; --surface:rgba(255,255,255,.024); --surface-2:rgba(255,255,255,.045); --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.15); /* Texto */ --text:#f5f6f7; --text-dim:#8b929c; --text-faint:#767d88; /* era #5e646d: 3,34:1, abaixo do mínimo */ /* Marca. --accent preenche (botões, chips); --accent-ink escreve. */ --accent:#f58534; --accent-ink:#f58534; --accent-soft:rgba(245,133,52,.13); --spot:rgba(245,133,52,.20); /* brilho do cursor */ --btn-fg:#160a02; --whats:#25d366; /* Superfícies compostas */ --header-bg:rgba(8,9,11,.72); --panel-bg:rgba(8,9,11,.97); /* O header tem tokens próprios porque no tema claro ele é navy da marca — ou seja, conteúdo claro sobre fundo escuro, ao contrário do resto. */ --header-fg:#f5f6f7; --header-fg-dim:#8b929c; --header-line:rgba(255,255,255,.08); --header-surface:rgba(255,255,255,.045); --shot-bg:#05070a; /* fundo das imagens */ --frame-bezel:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02)); --input-bg:rgba(0,0,0,.35); --input-bg-focus:rgba(0,0,0,.5); --wa-bg:rgba(8,24,20,.88); /* Faixas que quebram o ritmo da página */ --surface-band:#0b0d10; /* No escuro o navy não destacaria: a presença vem de um brilho da marca */ --band-bg:radial-gradient(62% 100% at 50% 0%,rgba(245,133,52,.12),transparent 62%),linear-gradient(180deg,#0f1318,#0a0c10); --cta-bg:radial-gradient(70% 120% at 50% 0%,rgba(245,133,52,.18),transparent 62%),#0b0d10; /* Gradientes de texto dos títulos */ --h1-grad:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.66)); --h2-grad:linear-gradient(180deg,#fff,rgba(255,255,255,.72)); /* Brilhos e sombras */ --glow-a:rgba(245,133,52,.20); --glow-b:rgba(20,40,80,.14); --grid-line:rgba(255,255,255,.035); --shadow-frame:0 40px 120px rgba(0,0,0,.6); --shadow-card:none; /* no escuro quem separa é a hairline */ --shadow-card-hover:none; --shadow-float:0 14px 40px rgba(0,0,0,.45); /* Estados do formulário */ --ok-bg:rgba(37,211,102,.1); --ok-line:rgba(37,211,102,.35); --ok-fg:#8ff0b6; --err-bg:rgba(241,90,22,.1); --err-line:rgba(241,90,22,.4); --err-fg:#ffb287; /* Layout */ --container:1140px; --gutter:24px; --header-h:76px; --radius:12px; --radius-lg:18px; --ease:cubic-bezier(.22,.8,.28,1); } /* -------- Tema claro: só os tokens mudam -------- Não é o escuro invertido. Escuro e claro constroem profundidade de formas diferentes: no escuro, véus translúcidos de branco sobre o quase-preto já separam as camadas; sobre o branco, o mesmo véu desaparece. Então aqui: a PÁGINA é tingida e o CARD é branco, flutuando com sombra — o contrário deixa o card acinzentado, parecendo afundado. */ :root[data-theme="light"]{ color-scheme:light; --bg:#f5f6f9; /* página levemente tingida, não branca */ --bg-soft:#fff; /* superfície elevada */ --surface:#fff; /* cards: brancos sobre a página tingida */ --surface-2:#fff; /* o hover se distingue por sombra, não por tom */ --line:rgba(16,24,40,.10); --line-strong:rgba(16,24,40,.24); --text:#101215; --text-dim:#5c626c; --text-faint:#666d78; /* era #868d97: 3,24:1, abaixo do mínimo */ /* Laranja mais fechado para texto: #f58534 não passa contraste no branco */ --accent:#ef7a22; --accent-ink:#bf5107; --accent-soft:rgba(239,122,34,.12); --spot:rgba(239,122,34,.16); /* Header navy translúcido desde o topo: o conteúdo passa desfocado por trás, como no escuro. O alfa é alto (.93) de propósito — a .72 o navy clareava para rgb(84,97,127) sobre a página e o header deixava de ler como escuro. A .93 ele fica em rgb(38,53,92), perto do navy puro, e o desfoque ainda deixa ver o que passa. Fica no navy em vez de transparente para o texto não precisar trocar de cor no meio da rolagem. */ --header-bg:rgba(22,39,80,.93); --panel-bg:rgba(22,39,80,.97); --header-fg:#fff; --header-fg-dim:rgba(255,255,255,.74); --header-line:rgba(255,255,255,.14); --header-surface:rgba(255,255,255,.1); --shot-bg:#eef0f2; --frame-bezel:linear-gradient(180deg,rgba(16,24,40,.10),rgba(16,24,40,.03)); /* Campo rebaixado dentro do card branco — se fosse branco sumiria nele */ --input-bg:#f4f5f8; --input-bg-focus:#fff; --wa-bg:#fff; /* As faixas fortes usam o navy da marca, como o header */ --surface-band:#eceef3; --band-bg:#162750; --cta-bg:radial-gradient(70% 120% at 50% 0%,rgba(245,133,52,.3),transparent 60%),#162750; --h1-grad:linear-gradient(180deg,#0d0f12 30%,rgba(13,15,18,.74)); --h2-grad:linear-gradient(180deg,#0d0f12,rgba(13,15,18,.78)); /* Brilho mais forte: sobre branco, o mesmo alfa do escuro simplesmente não aparece, e o hero perdia a atmosfera da marca por completo. */ --glow-a:rgba(245,133,52,.30); --glow-b:rgba(22,39,80,.09); --grid-line:rgba(16,24,40,.055); --shadow-frame:0 30px 70px rgba(16,24,40,.16); /* No claro a profundidade vem da sombra, não de transparência */ --shadow-card:0 1px 2px rgba(16,24,40,.04),0 6px 16px -6px rgba(16,24,40,.08); --shadow-card-hover:0 2px 4px rgba(16,24,40,.05),0 14px 30px -10px rgba(16,24,40,.16); --shadow-float:0 12px 32px rgba(16,24,40,.16); --ok-bg:rgba(23,150,74,.09); --ok-line:rgba(23,150,74,.3); --ok-fg:#116b36; --err-bg:rgba(203,52,0,.08); --err-line:rgba(203,52,0,.28); --err-fg:#a8330a; } /* ============================================================ RESET */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--text); font-family:Inter,-apple-system,"Segoe UI",Arial,sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .3s var(--ease),color .3s var(--ease); } h1,h2,h3,h4,p,ul,ol,figure{margin:0} ul,ol{padding:0;list-style:none} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button,input,textarea{font:inherit;color:inherit} ::selection{background:var(--accent);color:var(--btn-fg)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} /* Atalho para o conteúdo: invisível até receber foco pelo teclado */ .skip{ position:fixed;top:8px;left:8px;z-index:70; padding:10px 16px; background:var(--accent);color:var(--btn-fg); border-radius:8px;font-size:13px;font-weight:600; transform:translateY(-150%); transition:transform .2s var(--ease); } .skip:focus{transform:none} /* ============================================================ UTILITÁRIOS */ .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)} .section{position:relative;padding:88px 0;z-index:2} .section--tight{padding:60px 0} .section--line{border-top:1px solid var(--line)} /* Faixa de fundo alternada: é o que dá ritmo entre seções iguais */ .section--alt{background:var(--surface-band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .center{text-align:center} /* Cabeçalho de seção */ .eyebrow{ display:inline-block; font-size:13px;font-weight:500;letter-spacing:.02em; color:var(--accent-ink); margin-bottom:16px; } .h2{ font-size:clamp(28px,4.2vw,44px); font-weight:600;letter-spacing:-.028em;line-height:1.1; background:var(--h2-grad); -webkit-background-clip:text;background-clip:text;color:transparent; } .lead{color:var(--text-dim);font-size:18px;line-height:1.6;max-width:640px} /* Centralizado: com o texto só à esquerda sobrava um vazio enorme à direita em toda seção, e a página inteira ficava com o mesmo ritmo. */ .section-head{max-width:660px;margin:0 auto 46px;text-align:center} .section-head .lead{margin-left:auto;margin-right:auto} /* Botões */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; height:44px;padding:0 20px; border:1px solid transparent;border-radius:10px; font-size:14px;font-weight:500;letter-spacing:-.005em; cursor:pointer;white-space:nowrap; transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),opacity .18s; } .btn:active{transform:translateY(1px)} .btn-primary{position:relative;overflow:hidden;background:var(--accent);color:var(--btn-fg);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)} .btn-primary:hover{filter:brightness(1.08)} /* Brilho que atravessa o botão no hover */ .btn-primary::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,transparent 24%,rgba(255,255,255,.42) 50%,transparent 76%); transform:translateX(-115%); transition:transform .65s var(--ease); } .btn-primary:hover::after{transform:translateX(115%)} .btn-ghost{background:var(--surface-2);border-color:var(--line);color:var(--text)} .btn-ghost:hover{border-color:var(--line-strong)} .btn-sm{height:36px;padding:0 14px;font-size:13px;border-radius:8px} .btn-block{width:100%} .arrow{transition:transform .18s var(--ease)} .btn:hover .arrow,.pill:hover .arrow{transform:translateX(3px)} /* Card base com spotlight seguindo o cursor (--mx/--my vindos do JS) */ .card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; overflow:hidden; box-shadow:var(--shadow-card); transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease); } .card::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),var(--spot),transparent 68%); opacity:0;transition:opacity .3s var(--ease); } .card:hover{border-color:var(--line-strong);background:var(--surface-2);transform:translateY(-4px);box-shadow:var(--shadow-card-hover)} .card:hover::before{opacity:1} .card > *{position:relative} /* ============================================================ MOVIMENTO Regra geral: animar só opacity/transform/filter (composto na GPU). Todo estado inicial invisível vive sob .js, para a página funcionar sem script, e é desfeito no bloco prefers-reduced-motion no fim do arquivo. */ /* Revelação no scroll — só esconde quando há JS para revelar (.js no ). Sobe e cresce um fio; sem filtros, para tudo ficar em transform/opacity. */ .js [data-reveal]{ opacity:0;transform:translateY(30px) scale(.972); transition:opacity .75s var(--ease),transform .75s var(--ease); } .js [data-reveal].is-in{opacity:1;transform:none} /* Entrada do hero: sobe e desembaça, em cascata pelo --d de cada elemento */ .js [data-in]{opacity:0;animation:entrada .95s var(--ease) forwards;animation-delay:var(--d,0ms)} @keyframes entrada{ from{opacity:0;transform:translateY(30px) scale(.96);filter:blur(12px)} to{opacity:1;transform:none;filter:blur(0)} } /* Barra de progresso da leitura */ .progress-bar{ position:fixed;top:0;left:0;right:0;height:3px;z-index:50; background:linear-gradient(90deg,var(--accent),#ff9d5c); transform:scaleX(var(--p,0));transform-origin:0 50%; will-change:transform; } /* ============================================================ HEADER */ .header{ position:fixed;top:0;left:0;right:0;z-index:40; height:var(--header-h); display:flex;align-items:center; border-bottom:1px solid transparent; transition:background .25s var(--ease),border-color .25s var(--ease); } /* No escuro o header nasce transparente e só ganha o vidro ao rolar; no claro ele já nasce com o vidro navy, senão o texto branco não teria fundo no topo. */ .header.is-stuck, :root[data-theme="light"] .header{ background:var(--header-bg); border-bottom-color:var(--header-line); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); } .header .container{display:flex;align-items:center;justify-content:space-between;gap:24px} .logo{display:flex;align-items:center;flex:none} /* A marca precisa se sustentar ao lado do H1 do hero. A barra (--header-h) acompanha a altura do logo para manter o mesmo respiro acima e abaixo. */ .logo img{height:50px;width:auto} /* Logo negativo no escuro, versão de traço escuro no claro */ .logo-light,:root[data-theme="light"] .logo-dark{display:none} :root[data-theme="light"] .logo-light{display:block} /* Exceção: o header é escuro nos dois temas, então usa sempre o negativo */ :root[data-theme="light"] .header .logo-light{display:none} :root[data-theme="light"] .header .logo-dark{display:block} .nav{display:flex;align-items:center;gap:4px} .nav a{ padding:7px 12px;border-radius:8px; font-size:14px;font-weight:450;color:var(--header-fg-dim); transition:color .18s,background .18s; } .nav a:hover{color:var(--header-fg);background:var(--header-surface)} .nav a.is-active{color:var(--header-fg)} .nav a.is-active:hover{background:var(--header-surface)} .header-actions{display:flex;align-items:center;gap:10px;flex:none} /* O botão fantasma do header segue o contraste do header, não o da página */ .header .btn-ghost{background:var(--header-surface);border-color:var(--header-line);color:var(--header-fg)} .header .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)} /* Alternador de tema */ .theme-toggle{ width:36px;height:36px;flex:none; display:grid;place-items:center; background:var(--header-surface);border:1px solid var(--header-line);border-radius:8px; color:var(--header-fg-dim);cursor:pointer; transition:color .18s,border-color .18s var(--ease); } .theme-toggle:hover{color:var(--header-fg);border-color:rgba(255,255,255,.3)} /* Mostra o ícone do tema que o clique vai ativar */ .theme-toggle .ico-light,:root[data-theme="light"] .theme-toggle .ico-dark{display:none} :root[data-theme="light"] .theme-toggle .ico-light{display:block} .burger{ display:none; width:38px;height:38px; background:var(--header-surface);border:1px solid var(--header-line);border-radius:9px; cursor:pointer; } .burger span{display:block;width:16px;height:1.5px;margin:3px auto;background:var(--header-fg);transition:.2s var(--ease)} .header.is-open .burger span:nth-child(1){transform:translateY(4.5px) rotate(45deg)} .header.is-open .burger span:nth-child(2){opacity:0} .header.is-open .burger span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)} /* ============================================================ HERO */ .hero{position:relative;padding:calc(var(--header-h) + 88px) 0 40px;z-index:2;text-align:center} .hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} /* Brilho da marca atrás do título, em deriva lenta */ .hero-bg::before{ content:"";position:absolute;left:50%;top:-320px; width:1100px;height:760px; background:radial-gradient(50% 50% at 50% 50%,var(--glow-a),var(--glow-b) 45%,transparent 72%); filter:blur(20px); transform:translateX(-50%); animation:aurora 22s ease-in-out infinite; will-change:transform; } @keyframes aurora{ 0%,100%{transform:translateX(-50%) translate3d(0,0,0) scale(1);opacity:.85} 33%{transform:translateX(-50%) translate3d(-120px,40px,0) scale(1.22);opacity:1} 66%{transform:translateX(-50%) translate3d(110px,-26px,0) scale(1.08);opacity:.78} } /* Luz acompanhando o cursor no hero (--hx/--hy vindos do JS) */ .hero-spot{ position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(460px circle at var(--hx,50%) var(--hy,35%),var(--spot),transparent 68%); transition:opacity .45s var(--ease); } .hero:hover .hero-spot{opacity:1} /* Malha discreta, com fade nas bordas */ .hero-bg::after{ content:"";position:absolute;inset:0; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(60% 55% at 50% 25%,#000,transparent 75%); mask-image:radial-gradient(60% 55% at 50% 25%,#000,transparent 75%); } .hero .container{position:relative;z-index:2} .pill{ display:inline-flex;align-items:center;gap:9px; height:32px;padding:0 6px 0 12px; background:var(--surface-2);border:1px solid var(--line);border-radius:999px; font-size:13px;color:var(--text-dim); transition:border-color .2s var(--ease),color .2s} .pill:hover{border-color:var(--line-strong);color:var(--text)} .pill b{color:var(--text);font-weight:500} .pill .tag{ display:inline-flex;align-items:center;height:20px;padding:0 8px; background:var(--accent-soft);border-radius:999px; color:var(--accent-ink);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; } .hero h1{ margin:28px auto 0;max-width:21ch; font-size:clamp(38px,6.6vw,74px); font-weight:600;letter-spacing:-.035em;line-height:1.03; background:var(--h1-grad); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero h1 em{font-style:normal;color:var(--accent-ink);-webkit-text-fill-color:var(--accent-ink)} .hero .lead{margin:22px auto 0;max-width:56ch;font-size:clamp(16px,1.6vw,19px)} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px} .hero-meta{ display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center; margin-top:30px; font-size:13px;color:var(--text-faint); } .hero-meta span{display:inline-flex;align-items:center;gap:8px} .hero-meta span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.8} /* Moldura do visual — janela de app, como as capturas do linear. O wrapper carrega posição e a animação de entrada; a .frame fica só com a inclinação 3D dirigida pelo scroll (--rx/--sc vindos do JS), para as duas não disputarem a mesma propriedade transform. */ .frame-wrap{position:relative;margin:64px auto 0;max-width:1000px} .frame{ position:relative; background:var(--frame-bezel); border:1px solid var(--line);border-radius:var(--radius-lg); padding:1px; box-shadow:var(--shadow-frame); transform:perspective(1500px) rotateX(var(--rx,0deg)) scale(var(--sc,1)); transform-origin:50% 100%; will-change:transform; } .frame-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-bottom:1px solid var(--line)} .frame-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)} .frame-bar small{margin-left:8px;color:var(--text-faint);font-size:12px} .frame-body{background:var(--shot-bg);border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden} .frame-body img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top center} .frame-glow{ position:absolute;left:8%;right:8%;bottom:-38px;height:80px; background:radial-gradient(50% 100% at 50% 0%,var(--glow-a),transparent 70%); filter:blur(26px);z-index:-1; } /* ============================================================ HERO DE PÁGINA Abertura curta das páginas internas (/new-solucoes, /new-quem-somos) — não é a landing, então sem CTA nem moldura, só o título e a linha de apoio. */ .page-hero{position:relative;z-index:2;padding:calc(var(--header-h) + 74px) 0 58px;text-align:center} .page-hero .container{position:relative;z-index:2} .page-hero h1{ margin:0 auto;max-width:22ch; font-size:clamp(32px,5vw,56px); font-weight:600;letter-spacing:-.032em;line-height:1.06; background:var(--h1-grad); -webkit-background-clip:text;background-clip:text;color:transparent; } .page-hero h1 em{font-style:normal;color:var(--accent-ink);-webkit-text-fill-color:var(--accent-ink)} .page-hero .lead{margin:20px auto 0;max-width:58ch} /* Grade de três — equipes, e qualquer trio que não use .perks (que é de quatro) */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} /* ============================================================ CLIENTES */ .clients{padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .clients p{text-align:center;color:var(--text-faint);font-size:13px;letter-spacing:.02em;margin-bottom:28px} /* A arte de clientes tem fundo transparente com bolhas brancas: qualquer grayscale/brightness apagaria os logos. Só reduzimos a presença. */ /* Em painel com borda, a colagem lê como peça de design e não como imagem solta flutuando no meio da página. */ .clients figure{ max-width:760px;margin:0 auto;padding:20px 24px; background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-lg); opacity:.92;transition:opacity .4s var(--ease),border-color .4s var(--ease); } .clients figure:hover{opacity:1;border-color:var(--line-strong)} .clients img{width:100%;height:auto} /* ============================================================ LISTA DE ARGUMENTOS Marcadores com visto, usada nos cartões ao lado do texto (Produção, TLT, Logística). O que existia aqui antes — .pillars/.pillar com índice em marca d'água — saiu junto com a numeração das seções. */ .pillar-list{display:grid;gap:14px} .pillar-list li{display:flex;gap:10px;font-size:14px;color:var(--text-dim);line-height:1.5} .pillar-list li b{color:var(--text);font-weight:500} .check{flex:none;width:16px;height:16px;margin-top:3px;color:var(--accent-ink)} /* ============================================================ DIFERENCIAIS */ .perks{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .perk{padding:26px} .perk-ico{ width:36px;height:36px;margin-bottom:18px; display:grid;place-items:center; background:var(--accent-soft);border-radius:10px;color:var(--accent-ink); } .perk h3{font-size:15px;font-weight:600;margin-bottom:8px} .perk p{font-size:14px;color:var(--text-dim);line-height:1.5} /* ============================================================ SPLIT Duas colunas assimétricas: usado no problema e na Plataforma TLT, para a página não virar só uma sequência de grades de cards iguais. */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center} .split-text .h2{margin-bottom:16px} .split-text .lead{max-width:none} .split-text .lead + .lead{margin-top:14px} /* Lista de falhas — o que acontece sem padronização */ .flaws{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px} .flaw{ display:flex;align-items:flex-start;gap:9px; padding:12px 14px; background:var(--surface);border:1px solid var(--line);border-radius:10px; font-size:13px;color:var(--text-dim);line-height:1.4; } .flaw svg{flex:none;width:15px;height:15px;margin-top:1px;color:var(--accent-hot)} /* Cartão do argumento econômico */ .invest{ padding:30px; background:var(--surface); border:1px solid var(--line);border-left:2px solid var(--accent); border-radius:var(--radius); } .invest h3{font-size:clamp(20px,2.4vw,26px);font-weight:600;letter-spacing:-.022em;line-height:1.2;margin-bottom:14px} .invest h3 em{font-style:normal;color:var(--accent-ink)} .invest p{font-size:15px;color:var(--text-dim);line-height:1.6} .invest p + p{margin-top:12px} .invest-note{ display:flex;align-items:center;gap:12px; margin-top:22px;padding-top:18px;border-top:1px solid var(--line); font-size:14px;font-weight:500;color:var(--text); } .invest-note svg{flex:none;width:20px;height:20px;color:var(--accent)} /* ============================================================ PROCESSO */ .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:etapa} .step{position:relative;padding:24px 20px} .step-n{ display:grid;place-items:center; width:30px;height:30px;margin-bottom:16px; background:var(--accent-soft);border:1px solid var(--line);border-radius:50%; font-size:13px;font-weight:600;color:var(--accent-ink); } .step h3{font-size:15px;font-weight:600;line-height:1.3;margin-bottom:8px} .step p{font-size:13px;color:var(--text-dim);line-height:1.5} /* Fio ligando as etapas, só no desktop */ .step:not(:last-child)::after{ content:"";position:absolute;top:38px;right:-14px;width:14px;height:1px; background:var(--line-strong); } /* ============================================================ VÍDEOS */ .videos{display:grid;grid-template-columns:1fr 1fr;gap:20px} /* Um vídeo só ocupa a largura inteira da grade e fica centrado, maior */ .videos--one{grid-template-columns:1fr;max-width:880px;margin:0 auto} .video-card{ background:var(--frame-bezel); border:1px solid var(--line);border-radius:var(--radius-lg); padding:1px;overflow:hidden; box-shadow:var(--shadow-card); transition:border-color .25s var(--ease); } .video-card:hover{border-color:var(--line-strong)} .video-frame{position:relative;aspect-ratio:16/9;background:var(--shot-bg);border-radius:calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;overflow:hidden} .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .video-card figcaption{padding:16px 20px} .video-card h3{font-size:15px;font-weight:600;margin-bottom:5px} .video-card p{font-size:13px;color:var(--text-dim)} /* ============================================================ FAQ Sanfona com
nativo: abre e fecha sem JavaScript, é navegável por teclado de graça e a resposta fica no HTML — condição para o robô e o leitor de tela acharem, e para o FAQPage dos dados estruturados ser honesto. */ .faq{max-width:820px;margin:0 auto;display:grid;gap:10px} .faq details{ background:var(--surface); border:1px solid var(--line);border-radius:var(--radius); transition:border-color .25s var(--ease),background .25s var(--ease); } .faq details:hover{border-color:var(--line-strong)} .faq details[open]{background:var(--surface-2);border-color:var(--line-strong)} .faq summary{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:18px 22px;cursor:pointer; font-size:16px;font-weight:500;line-height:1.4; list-style:none; } /* Some com o triângulo padrão nos dois motores */ .faq summary::-webkit-details-marker{display:none} .faq summary::marker{content:""} .faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--radius)} .faq-ico{flex:none;width:18px;height:18px;color:var(--accent-ink);transition:transform .25s var(--ease)} .faq details[open] .faq-ico{transform:rotate(180deg)} .faq-a{padding:0 22px 20px;margin:0;max-width:72ch;font-size:15px;color:var(--text-dim);line-height:1.65} /* ============================================================ GANHOS */ .gains{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;margin:30px auto 0;max-width:760px;text-align:left} .gain{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-dim)} .gain b{color:var(--text);font-weight:500} .gain svg{flex:none;width:16px;height:16px;color:var(--accent)} /* ============================================================ NÚMEROS Faixa de largura total no navy da marca: no meio de tanta seção clara e cheia de cards, é o bloco de cor que segura a página. Sobre navy, o conteúdo é claro — reaproveita os tokens do header. */ .band{ position:relative;z-index:2; padding:76px 0; background:var(--band-bg); border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .band .section-head{margin-bottom:44px} .band .h2{background:linear-gradient(180deg,#fff,rgba(255,255,255,.76));-webkit-background-clip:text;background-clip:text;color:transparent} .band .lead{color:var(--header-fg-dim)} .band .eyebrow{color:var(--accent)} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 24px} .stat{padding-left:20px;border-left:1px solid var(--header-line)} .stat-v{ font-size:clamp(32px,3.8vw,46px); font-weight:600;letter-spacing:-.03em;line-height:1; color:var(--header-fg); font-variant-numeric:tabular-nums; } .stat-v .plus{color:var(--accent)} .stat-k{margin-top:10px;font-size:14px;color:var(--header-fg-dim)} .contact{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start} .form{padding:32px} .field{margin-bottom:14px} .field label{display:block;font-size:13px;color:var(--text-dim);margin-bottom:7px} .field input,.field textarea{ width:100%;padding:11px 13px; background:var(--input-bg);border:1px solid var(--line);border-radius:9px; font-size:14px; transition:border-color .18s,background .18s; } .field input::placeholder,.field textarea::placeholder{color:var(--text-faint)} .field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:var(--input-bg-focus)} .field textarea{min-height:112px;resize:vertical} .consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0;font-size:13px;color:var(--text-dim)} .consent input{width:16px;height:16px;margin-top:2px;accent-color:var(--accent);flex:none} .form-note{margin-top:14px;font-size:12px;color:var(--text-faint);line-height:1.5} .form-note a{color:var(--text-dim);text-decoration:underline;text-underline-offset:2px} .form-note a:hover{color:var(--accent-ink)} /* Selo do reCAPTCHA colide com o WhatsApp flutuante — a atribuição exigida pelo Google fica escrita em .form-note */ .grecaptcha-badge{visibility:hidden} .form-msg{ display:none;margin-top:16px;padding:13px 15px; border-radius:9px;font-size:14px;border:1px solid transparent; } .form-msg.is-on{display:block} .form-msg.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-fg)} .form-msg.err{background:var(--err-bg);border-color:var(--err-line);color:var(--err-fg)} .btn[aria-busy="true"]{opacity:.6;pointer-events:none} .info{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .info-row{background:var(--bg-soft);padding:22px 24px} .info-row h3{font-size:13px;font-weight:500;color:var(--text-faint);margin-bottom:7px} .info-row p,.info-row a{font-size:15px;color:var(--text);line-height:1.5} .info-row a:hover{color:var(--accent-ink)} .info-row.wa{background:linear-gradient(180deg,rgba(37,211,102,.09),transparent)} .wa-link{display:inline-flex;align-items:center;gap:9px;font-weight:500} /* Glifo do WhatsApp — usado no link de contato e no botão flutuante */ .wa-icon{width:18px;height:18px;flex:none;color:var(--whats);display:block} /* ============================================================ CTA FINAL */ .cta{ position:relative;overflow:hidden; border:1px solid var(--line);border-radius:var(--radius-lg); padding:72px 32px;text-align:center; background:var(--cta-bg); } .cta h2{margin-bottom:16px} .cta .lead{margin:0 auto} /* No tema claro o CTA é navy, então o conteúdo dele inverte: sobrescrevo o token do gradiente do título e o CTA inteiro acompanha. */ :root[data-theme="light"] .cta{--h2-grad:linear-gradient(180deg,#fff,rgba(255,255,255,.82))} :root[data-theme="light"] .cta .lead{color:rgba(255,255,255,.8)} :root[data-theme="light"] .cta .gain{color:rgba(255,255,255,.76)} :root[data-theme="light"] .cta .gain b{color:#fff} :root[data-theme="light"] .cta .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff} :root[data-theme="light"] .cta .btn-ghost:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.36)} .cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px} /* ============================================================ FOOTER */ .footer{border-top:1px solid var(--line);padding:64px 0 40px;position:relative;z-index:2} .footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px 24px} .footer-brand img{height:44px;width:auto;margin-bottom:18px} .footer-brand p{color:var(--text-dim);font-size:14px;max-width:34ch} /* Identificação legal: razão social, CNPJ e endereço completo */ .footer-legal{margin-top:18px;display:grid;gap:3px;font-size:12px;color:var(--text-faint);line-height:1.5} .footer-legal li:first-child{color:var(--text-dim)} .socials{display:flex;gap:8px;margin-top:20px} .socials a{ width:34px;height:34px;display:grid;place-items:center; background:var(--surface-2);border:1px solid var(--line);border-radius:9px; color:var(--text-dim);transition:.2s var(--ease); } .socials a:hover{color:var(--text);border-color:var(--accent);background:var(--accent-soft)} .footer-col h4{font-size:13px;font-weight:500;color:var(--text);margin-bottom:16px} .footer-col li{margin-bottom:10px} .footer-col a{font-size:14px;color:var(--text-dim)} .footer-col a:hover{color:var(--text)} .footer-bottom{ display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center; margin-top:56px;padding-top:24px;border-top:1px solid var(--line); font-size:13px;color:var(--text-faint); } /* WhatsApp flutuante */ .wa-float{ position:fixed;right:22px;bottom:22px;z-index:35; display:flex;align-items:center;gap:9px; padding:12px 16px; background:var(--wa-bg);border:1px solid rgba(37,211,102,.32);border-radius:999px; font-size:13px;font-weight:500; box-shadow:var(--shadow-float); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); transition:border-color .2s var(--ease),transform .2s var(--ease); } .wa-float:hover{border-color:var(--whats);transform:translateY(-2px)} /* Âncoras não somem atrás do header fixo */ [id]{scroll-margin-top:calc(var(--header-h) + 24px)} /* ============================================================ RESPONSIVO */ @media (max-width:1024px){ .perks{grid-template-columns:repeat(2,1fr)} .stats{grid-template-columns:repeat(2,1fr)} .contact,.split{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr} /* Cinco etapas não caberiam: viram duas fileiras e o fio de ligação sai */ .steps{grid-template-columns:repeat(2,1fr)} .step:not(:last-child)::after{display:none} } /* O menu vira painel antes do resto do layout: cinco itens mais o logo, o alternador de tema e o botão de contato não cabem numa linha abaixo de ~1000px, e o que acontecia era o menu quebrar em duas linhas. Este ponto de virada é só do header — o restante do layout continua mudando a 860px. Ao alterar, ajuste também o matchMedia de closeNav em new.js. */ @media (max-width:1000px){ .burger{display:block} .nav{ position:fixed;top:var(--header-h);left:0;right:0; flex-direction:column;align-items:stretch;gap:2px; padding:14px var(--gutter) 22px; background:var(--panel-bg); border-bottom:1px solid var(--header-line); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); transform:translateY(-8px);opacity:0;visibility:hidden; transition:.24s var(--ease); } .header.is-open .nav{transform:none;opacity:1;visibility:visible} .nav a{padding:12px;font-size:15px} } @media (max-width:860px){ :root{--gutter:18px} .section{padding:72px 0} .grid-3,.videos{grid-template-columns:1fr} .page-hero{padding-top:calc(var(--header-h) + 48px)} .hero{padding-top:calc(var(--header-h) + 56px)} .frame-wrap{margin-top:44px} .cta{padding:52px 22px} } @media (max-width:560px){ /* Com o logo em 50px de altura (217px de largura), o header não cabe logo + tema + CTA + hambúrguer: são ~466px necessários, e abaixo de ~500px o hambúrguer saía da tela. Quem sai é o CTA — o menu já tem "Contato" para o mesmo destino, o hero repete "Fale conosco" logo abaixo e o WhatsApp flutuante fica fixo. O ponto era 520px quando o logo tinha 38px. */ .header-actions .btn-primary{display:none} .header .container{gap:12px} } @media (max-width:520px){ .perks,.stats,.footer-grid,.flaws,.steps,.gains{grid-template-columns:1fr} .hero-cta .btn,.cta-actions .btn{width:100%} /* Só o rótulo sai; o ponto verde continua identificando o botão */ .wa-float span:last-child{display:none} .wa-float{padding:14px;right:14px;bottom:14px} } /* ============================================================ MOVIMENTO REDUZIDO Quem pede movimento reduzido está pedindo para nada *se deslocar* — não para a página ficar morta. Então sai tudo que viaja, gira ou fica em laço (parallax, inclinação, aurora, deslocamentos de entrada) e ficam as transições de opacidade e cor, que não disparam desconforto vestibular. Nenhum conteúdo pode acabar invisível aqui. Quem decide é o data-motion no , escrito pelo script do : escolha salva > preferência do sistema. Assim a preferência é respeitada por padrão e ainda existe um controle no rodapé para ligar tudo. */ @keyframes surge{from{opacity:0}to{opacity:1}} :root[data-motion="reduced"]{scroll-behavior:auto} /* Laços contínuos e movimento dirigido pelo scroll */ [data-motion="reduced"] .hero-bg::before{animation:none} [data-motion="reduced"] .frame{transform:none} [data-motion="reduced"] .progress-bar{transition:none} /* Entradas apenas esmaecem: sem viajar, sem desfoque */ [data-motion="reduced"].js [data-reveal]{transform:none;transition:opacity .45s linear} [data-motion="reduced"].js [data-in]{animation-name:surge;animation-duration:.5s} /* Respostas ao cursor continuam — são iniciadas pela pessoa e não deslocam a página. Só o brilho que atravessa o botão sai, porque é deslocamento. */ [data-motion="reduced"] .card:hover, [data-motion="reduced"] .wa-float:hover, [data-motion="reduced"] .btn:active{transform:none} [data-motion="reduced"] .btn-primary::after{display:none} /* Sem JavaScript não há data-motion. As entradas já não rodam (dependem de .js), então basta parar o único laço contínuo. */ @media (prefers-reduced-motion:reduce){ html:not([data-motion]){scroll-behavior:auto} html:not([data-motion]) .hero-bg::before{animation:none} } /* Controle de animações no rodapé */ .motion-toggle{ display:inline-flex;align-items:center;gap:8px; padding:7px 12px; background:var(--surface-2);border:1px solid var(--line);border-radius:999px; font-size:12px;color:var(--text-dim);cursor:pointer; transition:color .18s,border-color .18s var(--ease); } .motion-toggle:hover{color:var(--text);border-color:var(--line-strong)} .motion-toggle::before{ content:"";width:7px;height:7px;border-radius:50%; background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft); } [data-motion="reduced"] .motion-toggle::before{background:var(--text-faint);box-shadow:none}