/* ============================================================ VERSÃO A — "Tour do produto" Referência: Salesforce (trilho de abas verticais que troca o print do produto) + HubSpot (zigzag texto/imagem alternado, carrossel). Carrega DEPOIS de editorial.css e só ADICIONA: todas as classes usam o prefixo .va- para nunca brigar com o CSS existente. ============================================================ */ :root{ /* neutros derivados do amarelo da marca (não são cinzas "puros") */ --va-panel:#FFFFFF; --va-line:rgba(10,10,11,.12); --va-line-2:rgba(10,10,11,.20); --va-shadow:0 24px 60px -24px rgba(10,10,11,.35); --va-shadow-sm:0 10px 30px -14px rgba(10,10,11,.30); } /* .tools-top nasceu só para seções escuras (cor fixa clara). Agora ele também aparece sobre papel, então o texto de apoio precisa escurecer. */ .s-paper .tools-top .lead{ color:var(--txt-l); } /* destaque amarelo herdado do antigo bloco "Manifesto" (removido da home — ver comentário em index.html): a frase de efeito passou a abrir esta seção, então o .hl que dava o "soco" visual veio junto. */ .tools-top .lead .hl{ color:var(--yellow); font-weight:700; } .s-paper .tools-top .lead .hl{ color:var(--yellow-ink); } /* --------------------------------------------------------------- HERO — split com print flutuante + cartões de alerta sobrepostos --------------------------------------------------------------- */ .va-hero{ position:relative; overflow:hidden; padding-top:clamp(120px,13vw,168px); padding-bottom:clamp(72px,8vw,104px); } /* O print real do sistema é bem largo (1731x845), então ele precisa de mais coluna para a interface ficar legível — daí a coluna da imagem ser a maior e o H1 ter teto menor (ele é nowrap e a maior linha tem de caber). */ /* align-items:stretch (padrão do grid): a coluna de texto é mais alta que o vídeo por causa da faixa "+1.000 / 27 / R$10mi+". Em vez de forçar o vídeo pra cima/baixo dentro dessa altura (o que sempre deixava topo OU base descolados de um lado), o vídeo agora estica pra preencher a própria altura da coluna de texto — ver .va-video, que troca o aspect-ratio fixo por height:100%. Topo e base ficam alinhados nos dois lados ao mesmo tempo, sem mexer no espaçamento do texto. */ .va-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(30px,3.2vw,46px); align-items:stretch; position:relative; z-index:2; } .va-hero h1{ font-size:clamp(31px,3.5vw,46px); line-height:.98; letter-spacing:-.035em; } .va-hero h1 .line-wrap{ white-space:nowrap; } .va-hero h1 .hl{ color:var(--yellow); } .va-hero h1 .cyc{ display:inline-block; min-width:5.2ch; } .va-hero .va-sub{ margin-top:26px; max-width:46ch; font-size:clamp(16px,1.35vw,18.5px); line-height:1.6; color:var(--txt-d); } .va-hero .va-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:34px; } /* moldura do print. Avança até a borda do container (sem 100vw, para não criar rolagem lateral) e ganha largura sem tirar da coluna de texto. */ .va-shot{ position:relative; margin-right:calc(-1 * var(--pad)); height:100%; } .va-frame{ border:1px solid var(--line-d2); border-radius:14px; overflow:hidden; background:var(--ink-2); box-shadow:0 40px 90px -30px rgba(0,0,0,.85); } .va-frame .bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line-d); background:var(--ink-3); } .va-frame .dot{ width:10px; height:10px; border-radius:50%; background:var(--line-d2); flex:none; } .va-frame .url{ font-family:var(--f-mono); font-size:12px; color:var(--txt-d-dim); margin-left:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .va-frame img{ width:100%; height:auto; display:block; } /* ---- vídeo institucional no hero ---- height:100% (não aspect-ratio fixo): a caixa preenche a altura inteira da coluna de texto ao lado (que é quem manda no tamanho da linha do grid). O