/* ============================================================
Metta — versão 2 do protótipo
Camada por cima de styles.css: reaproveita tokens, botões e
header, e traz as dobras desta versão.
Todas as medidas saem do Figma 905:7739, tela de 1920.
============================================================ */
/* Uma coluna so para o site inteiro: 1511, que e a medida da barra do
menu no Figma. Todo bloco de conteudo nasce e termina nessa linha,
entao header, dobras e rodape compartilham as mesmas bordas. */
body.v2{ --container:1511px; }
/* A LINHA DO SITE: a barra do menu e a primeira dobra têm sempre a mesma
largura, e é esta. Declarada uma vez, para as duas não terem como
divergir.
Mora no BODY e não no :root de propósito. Dentro de uma propriedade
customizada o var() é resolvido no elemento onde ela é declarada, e
no :root o --container ainda vale os 1400 do widescreen, não os 1511
que o body.v2 define. Declarada lá, ela estreitava o menu em 111px
acima de 1728, no site inteiro. */
/* LARGURA, e nao cor. O nome e --linha-site porque --linha ja existe em
fundacao.css e e a COR de traco (#bbcfd9): declarar um comprimento com
o mesmo nome no body apagava a cor na pagina inteira, e a falha era
silenciosa, sem erro nenhum no console. */
body{ --linha-site: min(var(--container), 100% - var(--gutter) * 2); }
/* o header desce com a dobra: 70 no lugar dos 32 do protótipo original */
/* 46 e nao 70: Renan tirou 24 do respiro entre o topo da pagina e a
barra do menu em 15/09. So no desktop; no celular os 27 ficam, porque
3 colaria a barra na borda da tela. */
body.v2 .nav{ top:46px; }
/* ============================================================
01 · HERO
============================================================ */
.heroi{
position:relative; overflow:hidden;
height:960px; background:var(--branco); color:var(--ink);
}
.heroi-logo{
position:absolute; left:36.67%; top:105px; width:85.31%;
aspect-ratio:133 / 123;
z-index:0; pointer-events:none;
}
.heroi-logo canvas{
display:block; width:100%; height:100%;
opacity:0; transition:opacity .5s var(--ease);
}
.heroi-logo.esta-pronto canvas{ opacity:1; }
/* véu do Figma: branco que nasce transparente perto do miolo do símbolo
e fecha nas bordas, dissolvendo o anel em vez de cortá-lo */
.heroi-veu{
position:absolute; left:36.67%; top:70px; width:85.31%;
aspect-ratio:1638 / 1585;
z-index:1; pointer-events:none;
background:radial-gradient(ellipse 80.3% 85.7% at 36.7% 18.1%,
rgba(255,255,255,0) 23%, var(--branco) 78.7%);
}
.heroi-in{
position:relative; z-index:2;
width:min(var(--container), 100% - var(--gutter) * 2);
margin:0 auto; padding-top:244px;
}
/* uma medida só de respiro entre chapéu, título, apoio e botão */
.heroi-in > * + *{ margin-top:23px; }
.heroi-chapeu{
font-family:var(--texto); font-weight:500; font-size:14px; line-height:1.04;
text-transform:uppercase; color:var(--muted);
}
/* Figma 927:9308: caixa de 622x136, quatro linhas, com a segunda oração
em itálico. 136 em quatro linhas com entrelinha .84 da 40px de corpo. */
.heroi-titulo{
max-width:622px;
font-family:var(--display); font-weight:300; font-size:40px; line-height:.84;
letter-spacing:-.015em; color:var(--ink);
}
.heroi-titulo em{ font-weight:600; font-style:italic; }
.heroi-sub{ max-width:456px; font-size:14.4px; line-height:1.1; color:var(--ink); }
.heroi-btn{ width:247px; height:57px; padding:0; }
.heroi-banda{
position:absolute; left:0; right:0; bottom:0; height:195px; z-index:2;
background:rgba(255,255,255,.2);
backdrop-filter:blur(71.15px); -webkit-backdrop-filter:blur(71.15px);
border-top:1px solid var(--branco); border-bottom:1px solid var(--branco);
}
/* clientes e recado nascem na mesma coluna do título e do header */
.heroi-banda-in{
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
height:100%; display:flex; align-items:center; gap:64px;
}
.logobar.logobar--banda{
position:static; transform:none; flex:1 1 auto; min-width:0;
height:72px; background:transparent;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
}
/* devagar de propósito: a faixa é ambiente, não animação */
.logobar--banda .logobar-trilho{ animation-duration:150s; }
.logobar--banda .logobar-grupo{ gap:44px; padding-right:44px; }
/* Figma 927:9317: a mascara dos logos da faixa e chapada no azul escuro
da marca, nao no cinza-azulado que estava aqui. Decisao do Tiago em
17/09: sobre o branco do hero o cinza sumia. */
.logobar--banda .logobar-logo{
background-color:var(--ink); height:calc(var(--h, 30px) * .8);
}
/* 22/09, pedido do Renan: em Mentoria e Consultoria a faixa mora dentro
do hero ESCURO (foto com véu, data-tema="escuro"), não no claro da
Home -- o --ink chapado sumia contra o fundo escuro. Nessas duas
páginas a máscara vira branca, como no Figma; a Home (regra acima,
sem esse escopo) continua com o --ink de propósito. */
.mn-hero-banda .logobar-logo{
background-color:var(--branco);
}
/* 25/09, Figma 980:14182: a Consultoria virou hero CLARO, e a faixa dela
volta a ter logos escuros (#0C161B). Tamanho revisto no mesmo dia (Figma
980:14189, "ficou muito grande"): cada logo tem a LARGURA do arquivo
(Vivo 76, Leroy 56, Panvel 96, Sicoob e Sicredi 100, Zema 99), e a
altura sai dela pela proporção de cada máscara, que não é a mesma do
Figma. 62 entre eles. Vale igual no celular, pedido do Renan. */
.cs-hero-banda .logobar-logo{ background-color:var(--ink); }
.cs-hero-banda .logobar-logo[data-logo="vivo"]{ height:23.84px; }
.cs-hero-banda .logobar-logo[data-logo="leroy-merlin"]{ height:33.78px; }
.cs-hero-banda .logobar-logo[data-logo="panvel"]{ height:20.27px; }
.cs-hero-banda .logobar-logo[data-logo="sicoob"]{ height:22.31px; }
.cs-hero-banda .logobar-logo[data-logo="sicredi"]{ height:22.79px; }
.cs-hero-banda .logobar-logo[data-logo="zema"]{ height:26.5px; }
.cs-hero-banda .logobar-grupo{ gap:62px; padding-right:62px; }
/* Figma 927:9313: a banda tem só o recado, em 480 de largura */
.heroi-recado{
flex:0 0 480px;
font-family:var(--display); font-weight:400; font-size:24px; line-height:1.04;
color:var(--ink);
}
.heroi-recado em{ font-weight:600; font-style:italic; }
/* ============================================================
01c · HERO (box), Figma 1174:692, 22/09
Entra no mesmo sistema .e-painel que as outras páginas já usam (caixa,
largura, raio, faixa de logos no pé); aqui só o miolo específico da
Home. --dobra1-alt/--dobra1-alt-m seguem o padrão de altura por
página que o .e-painel espera (ver comentário dele em css/v2.css).
============================================================ */
/* degradê EXATO do arquivo (1485:6411): duas radiais SVG (o brilho amarelo
no canto superior direito + o azul-claro que domina o resto) por cima
de uma base sólida #34444d. preserveAspectRatio="none" é do próprio
arquivo -- a Figma já desenhou pra esticar 100% 100%, não é aproximação
minha. Embutido como data-URI (mesma técnica de .qs-hero/.painel-luz
acima) porque as duas radiais são giradas/inclinadas (gradientTransform
com matriz), que radial-gradient() do CSS puro não reproduz. */
.heroi3{
--dobra1-alt:660px; --banda-altura:83px; position:relative; color:var(--ink);
background-color:#34444d;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-size:100% 100%; background-repeat:no-repeat;
}
.heroi3-in{ position:relative; z-index:2; height:100%; }
/* 1485:6411 (472px, desktop) até 1500:4738 (307px, celular): mesma
lógica de clamp() do título -- a coluna estreita proporcionalmente,
não aos saltos, e é o que evita o botão/selo quebrarem linha antes da
hora acima de 1023 */
.heroi3-texto{ max-width:clamp(280px, 225.14px + 17.14vw, 472px); }
.heroi3-texto > * + *{ margin-top:20px; }
/* 1485:6411 (desktop, 32px) + 1500:4738 (celular, 24px): em vez de
trocar o tamanho em cada breakpoint aos saltos, um clamp() só escala
contínuo entre os dois -- 24px abaixo de 375 de largura, 32px acima
de 1440, e proporcional entre os dois (pedido do Renan em 22/09:
"diminuindo proporcionalmente ao tamanho da tela"). Mesma técnica que
.vid-texto/.vid-card já usam em outras dobras deste arquivo. */
.heroi3-titulo{
font-family:var(--display); font-weight:400; line-height:1.04;
font-size:clamp(24px, 21.18px + 0.751vw, 32px);
letter-spacing:-.01em; color:var(--ink);
}
.heroi3-titulo em{ font-weight:600; font-style:italic; }
.heroi3-sub{ font-size:14px; line-height:1.1; color:var(--ink); }
.heroi3-linha{ display:flex; align-items:center; gap:17px; flex-wrap:wrap; }
.heroi3-btn{ height:49px; padding:0 16px; font-size:14px; }
/* a foto sangra na borda direita e cola em cima da faixa de logos --
NÃO por trás dela (22/09: Renan corrigiu, a foto ficava escondida
atrás do vidro da faixa e perdia tamanho à toa). --banda-altura é a
mesma variável que .heroi3-banda declara, pra os dois nunca
descasarem se a altura da faixa mudar. Por isso mora fora de
.heroi3-in, encostada no painel, e não na coluna de texto. */
/* 07/10, foto nova (Figma 1485:6147, frame 1500:4521): no arquivo a
caixa da foto vai de x=683 a 1488 do painel de 1512 (53,2% de largura,
24 de folga à direita), de y=12 a 609 do painel de 650 (91,85% de
altura). Ela desce 55 por trás da faixa de logos, igual ao arquivo;
pedido do Renan em 07/10: "deixar visualmente como tem no Figma". */
.heroi3-foto{
position:absolute; z-index:1; top:1.85%; right:1.6%; height:91.85%;
width:53.2%;
display:flex; align-items:flex-end; justify-content:flex-end;
}
.heroi3-foto img{
display:block; width:100%; height:100%; max-width:none;
object-fit:contain; object-position:right bottom;
}
/* 07/10: no desktop o painel segue a proporção do arquivo (1512x650)
em vez dos 660 fixos, o que baixa a altura na largura de 1440 e deixa
a foto do tamanho do arquivo; o piso segura o texto nas telas
estreitas (piso de 540). O texto fica centrado na altura livre acima da faixa. */
@media (min-width:1024px){
body.v2 .dobra[data-dobra="hero"].e-painel.heroi3{
height:auto; aspect-ratio:1512 / 650; min-height:540px;
}
body.v2 .e-painel.heroi3 .heroi3-in{
display:flex; align-items:center;
padding-top:0; padding-bottom:var(--banda-altura, 83px);
}
}
/* 1500:4738 (iPhone 16, 22/09): no celular tudo centraliza -- texto,
botão e selo, e a foto entra no fluxo depois do texto, sempre em cima
da faixa de logos (nunca atrás), mesma lógica do desktop. */
@media (max-width:1023px){
/* a foto entra no fluxo, depois do texto -- mesma inversão de ordem
que .qs-hero-arte já faz (arte é camada de fundo no desktop, mas
precisa vir DEPOIS do texto na leitura do celular) */
/* 22/09, corrigido: o padding-bottom:32px sobrava depois da faixa,
que virou bloco em fluxo (order:3) -- "a faixa é o final da
sessão", pedido do Renan, não pode ter respiro depois dela. */
.heroi3{ --dobra1-alt:auto; display:flex; flex-direction:column; }
.heroi3-in{ order:1; display:flex; justify-content:center; }
.heroi3-texto{ text-align:center; }
.heroi3-texto > * + *{ margin-top:23px; }
.heroi3-linha{ flex-direction:column; align-items:center; gap:12px; }
.heroi3-btn{ width:247px; height:57px; }
.heroi3-foto{
order:2; position:static; width:100%; height:auto; margin-top:23px;
justify-content:center;
}
.heroi3-foto img{ width:80%; max-width:420px; height:auto; }
}
@media (max-width:767px){
.heroi3{ --dobra1-alt-m:auto; }
}
/* faixa de logos, 1485:6411: 83 de altura, padding 16 vertical, vidro
escuro fosco sobre a foto/o amarelo, logo em tinta escura (mesma
mecânica de .heroi-banda acima, só que o vidro é escuro aqui porque o
fundo por trás é claro). Posição própria, NÃO herda de .qs-logobar --
ver o comentário no HTML (home.py) sobre por que essa classe foi
evitada de propósito aqui. */
.heroi3-banda{
position:absolute; left:0; right:0; bottom:0; z-index:3;
height:var(--banda-altura, 83px); padding:16px 89px;
display:flex; align-items:center;
background:rgba(12,22,27,.32); backdrop-filter:blur(48px); -webkit-backdrop-filter:blur(48px);
border-top:1px solid rgba(255,255,255,.25);
}
.heroi3-banda .logobar.logobar--banda{
width:100%; height:100%;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
}
.heroi3-banda .logobar-logo{ background-color:var(--ink); }
@media (max-width:1023px){
/* no celular a faixa sai do absolute e entra no fluxo, depois da
foto -- é PRA aparecer aqui, diferente da faixa da Sobre Nós */
.heroi3-banda{ order:3; position:static; padding:16px 24px; }
}
/* ============================================================
04 · DEPOIMENTOS
Figma 913:8698 (dobra 1918x701 começando em y=3584 da tela de 1920).
O bloco de conteúdo abre em x=477 da página, 1116 de largura:
cartão de 465 à esquerda, coluna de texto de 556 à direita.
============================================================ */
.dpo{
position:relative; overflow:hidden;
padding:98px 0 173px; background:var(--branco);
}
/* Figma 913:8699 (16/09): a arte de fundo deixou de ser a fileira de
cinco anéis e passou a ser um par de arcos de 1027x588, o de fora
chapado em #e6edf2 e o de dentro em degradê que se apaga no branco
pela esquerda, fechando a dobra em vez de cortar na borda da tela.
No arquivo a arte abre 606 à esquerda do cartão da foto, e o cartão
nasce no centro do conjunto de 1137 (486 + 95 + 556): daí o 568,5
mais 606 medidos a partir do meio da tela. */
.dpo-aneis{
position:absolute; top:40px;
/* Dois jeitos de medir os mesmos 606, e vale o que estiver mais a
direita: pelo meio da tela, enquanto o conjunto de 1137 cabe inteiro
e fica centrado (568,5 + 606), ou pela margem da coluna, quando ele
deixa de caber e o cartao encosta nela. Sem o max() a arte saia de
prumo com o cartao entre 1024 e 1232, e no celular sumia da tela. */
left:max(calc(50% - 1174.5px), calc(var(--gutter) - 606px));
width:1027px; height:588px; max-width:none;
z-index:0; pointer-events:none;
}
.dpo-in{
position:relative; z-index:1;
width:min(var(--container), 100% - var(--gutter) * 2);
margin:0 auto;
}
.dpo-palco{ position:relative; }
/* o conjunto de cartao mais texto tem 1116 e nao preenche a coluna: em vez
de encostar na borda esquerda, ele fica centrado dentro dela */
.dpo-slide{
/* a coluna de texto pode encolher: entre 1024 e 1440 a coluna do site
fica menor que os 1116 do conjunto e sem isso ele estoura */
display:grid; grid-template-columns:486px minmax(0, 556px); gap:95px;
justify-content:center;
align-items:start; transition:opacity .55s var(--suave);
}
.dpo-slide:not(.esta-ativo){
position:absolute; inset:0; opacity:0; pointer-events:none;
}
/* Figma 913:8707: a moldura abriu de 9,9x13,6 para 24 por igual e o
canto foi de 24 para 80, com 60 na foto de dentro. A largura sobe de
465 para 486 porque a foto continua sendo 438: o que cresce e a
moldura, nao a imagem. */
.dpo-cartao{
width:486px; margin:0; padding:24px;
background:var(--branco);
border:1.24px solid rgba(150,150,150,.15); border-radius:80px;
box-shadow:0 69.53px 96.54px -53.49px rgba(0,0,0,.25);
}
.dpo-foto{
aspect-ratio:438 / 396; border-radius:60px;
overflow:hidden; background:var(--nevoa);
}
.dpo-foto img{ width:100%; height:100%; object-fit:cover; }
/* enquanto o retrato não chega, o lugar dele fica marcado na tela,
com o nome de quem vai ali */
.dpo-vazio{
display:flex; align-items:center; justify-content:center;
width:100%; height:100%; padding:0 40px;
background:var(--nevoa);
font-size:14px; line-height:1.4; text-align:center; color:var(--muted-2);
}
.dpo-texto{ padding-top:28.9px; }
.dpo-etiqueta{
font-family:var(--texto); font-weight:500; font-size:12px; line-height:1.25;
letter-spacing:1.2px; text-transform:uppercase; color:var(--ink);
}
/* a frase entre aspas carrega o resultado da operação, não o elogio.
o piso é a fala mais longa do carrossel, cinco linhas: assim a
assinatura, a seta e o traço ficam no mesmo lugar em todos os
depoimentos, sem pular na troca. o rodapé da dobra desconta essas
linhas a mais para a seção fechar nos 701 do Figma */
.dpo-frase{
margin-top:45px; max-width:466px; min-height:210px;
font-family:var(--display); font-weight:500; font-size:30px; line-height:1.4;
color:var(--ink);
}
/* Figma 985:1322: tarja amarela de 40 de altura e canto 6 atras do
trecho que carrega o numero. Aqui ela e inline, para acompanhar a fala
onde quer que o resultado apareça; clone faz cada linha ganhar a
propria tarja quando o trecho quebra. */
.dpo-frase mark{
background:var(--amarelo); color:var(--ink);
border-radius:6px; padding:5px 6px; margin:0 -2px;
box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.dpo-assina{
margin-top:45px; width:466px; max-width:100%;
display:flex; align-items:center; justify-content:space-between; gap:24px;
}
/* o Figma fecha em 134 porque o nome é curto; aqui a coluna cresce até
caber cargo e empresa numa linha, sem empurrar a seta */
.dpo-quem{ min-width:134px; max-width:360px; }
.dpo-nome{ display:block; font-weight:600; font-size:24px; line-height:1.04; color:var(--ink); }
.dpo-cargo{ display:block; font-size:14px; line-height:1.04; color:var(--ink); }
/* avancar e voltar andam juntos, sempre os dois */
.dpo-setas{ flex:0 0 auto; display:flex; align-items:center; gap:10px; }
/* Figma 913:8721: avancar e amarelo e voltar fica no cinza claro. As duas
eram cinza e a de avancar so acendia no hover, entao no celular, onde
nao ha hover, nada indicava para que lado a dobra anda. */
.dpo-seta{
flex:0 0 auto; width:40px; height:40px; border-radius:36px;
background:var(--amarelo); color:var(--ink);
display:flex; align-items:center; justify-content:center;
transition:transform .25s var(--ease), background-color .25s var(--ease);
}
.dpo-seta--volta{ background:var(--nevoa); }
.dpo-seta:hover{ transform:translateX(3px); }
.dpo-seta--volta:hover{ transform:translateX(-3px); background:var(--amarelo); }
/* o traço embaixo diz em que depoimento a dobra está; o pedaço aceso
vale um slide e desliza junto com a troca */
.dpo-barra{
margin-top:45px; position:relative;
width:475px; max-width:100%; height:1px;
background:rgba(12,22,27,.16); overflow:hidden;
}
.dpo-barra span{
position:absolute; inset:0 auto 0 0;
width:calc(100% / var(--n, 3)); background:var(--ink);
transform:translateX(calc(var(--i, 0) * 100%));
transition:transform .55s var(--suave);
}
/* ---------- ultimo slide: o convite, Figma 1445:4556 ----------
No lugar do retrato unico entra a colagem dos cinco depoentes, e no
lugar do nome e da empresa entra o botao.
Os cinco cartoes sao o MESMO desenho do .dpo-cartao em escalas
diferentes: no arquivo, em todos eles, o raio vale 16,46% da largura,
o respiro branco 4,94%, o raio da foto 12,35% e a sombra
14,31/19,86/-11,01%. Por isso cada cartao declara so onde fica e
quanto mede, em --x, --y e --w, e o resto sai por conta. A medida e
cqw do proprio quadro, entao a colagem inteira escala junto com a
coluna sem perder proporcao. */
.dpo-colagem{
position:relative; width:486px; max-width:100%;
aspect-ratio:486 / 444; container-type:inline-size;
}
.dpo-cv{
position:absolute; left:var(--x); top:var(--y);
width:calc(var(--w) * 1cqw); aspect-ratio:139 / 126.99;
padding:calc(var(--w) * .0494cqw);
background:var(--branco);
border:1px solid rgba(150,150,150,.15);
border-radius:calc(var(--w) * .1646cqw);
box-shadow:0 calc(var(--w) * .1431cqw) calc(var(--w) * .1986cqw)
calc(var(--w) * -.1101cqw) rgba(0,0,0,.25);
}
.dpo-cv img{
display:block; width:100%; height:100%; object-fit:cover;
border-radius:calc(var(--w) * .1235cqw);
}
/* a frase do convite nao e fala de ninguem, entao nao leva aspas; o
resto (corpo, entrelinha e a tarja amarela) e o mesmo da citacao.
A caixa fecha em 367 e nao nos 466 da citacao (Figma 1445:4566): e o
que faz a quebra cair depois de "resultados" e depois de "para", que e
onde as duas tarjas do arquivo comecam e terminam. */
.dpo-frase--convite{ font-weight:500; max-width:367px; }
/* o botao ocupa a vaga do nome, entao herda a mesma largura de coluna
para a seta continuar encostada na direita como nos outros slides */
.dpo-saiba{ flex:0 0 auto; height:46px; padding:0 17px; font-size:15px; }
/* ============================================================
02 · QUEM SOMOS
Medidas do Figma 927:9173, dobra começando em y=960 da página.
============================================================ */
/* 22/09: reescrito do zero (pedido do Renan) -- os seis depoimentos
deixaram de ser posicionados um a um (--x/--y/paralaxe) e viraram duas
linhas comuns, .eco-linha, flex com wrap, uma antes e outra depois do
texto central. A altura deixa de ser fixa (o texto e as linhas nao
tem mais posicao absoluta pra caber dentro de uma caixa com altura
travada): a secao cresce com o proprio conteudo, como qualquer dobra
do site. */
.eco{
position:relative;
background:var(--branco);
display:flex; flex-direction:column;
/* 22/09, corrigido: antes do redesenho o titulo ficava a 335px do topo
da dobra (ver historico abaixo) porque a linha de cima flutuava por
cima dele, sem ocupar espaco de fluxo. Com .eco-linha--cima virando
elemento normal, esse respiro tem que morar ANTES dela, nao depois
-- senao a linha cola no fim do hero e ainda sobra um vao enorme
antes do titulo (os 335px do eco-in somados aos 64px do proprio
margin-bottom da linha). Valor pareado com o respiro que outras
dobras usam logo depois do hero. */
padding-top:120px;
}
/* ---------- texto que acende palavra a palavra ---------- */
.eco-in, .eco-apoio{
position:relative; z-index:1;
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
text-align:center;
}
.eco-titulo{
width:min(747px, 100%); margin:0 auto;
font-family:var(--display); font-weight:600; font-size:64.26px; line-height:1.04;
letter-spacing:-0.32px; color:var(--ink);
}
/* a segunda oração não é itálico, e desde 16/09 também não tem cor
própria: a frase inteira acende no mesmo escuro. O #738f9e que a
segunda oração usava era uma terceira cor no meio do efeito, e Renan
pediu duas e só duas. */
.eco-titulo em{ font-style:normal; }
/* frase de abertura do corpo, em peso alto */
.eco-lead{
width:min(641px, 100%); margin:54px auto 0;
font-weight:800; font-size:20px; line-height:1.1; color:var(--ink);
}
/* a palavra nasce apagada e um fio abaixo da linha; quando o scroll
chega nela ela acende e assenta. O deslocamento é pequeno de
propósito: em texto corrido qualquer coisa maior vira solavanco. */
.scroll-words .palavra{
display:inline-block;
/* as duas cores do efeito, e nenhuma outra: #aac3cf em repouso e o
#0c161b do texto quando acende. A opacidade de 0,7 que havia aqui
clareava o cinza contra o branco e virava um terceiro tom na tela,
entao a palavra nasce opaca e quem faz a entrada e o deslocamento. */
color:#aac3cf;
transform:translate3d(0, .06em, 0);
transition:color .55s var(--suave), transform .55s var(--suave);
}
.scroll-words .palavra.esta-acesa{
color:var(--ink); transform:none;
}
.eco-corpo{
width:min(641px, 100%); margin:44px auto 0;
font-size:16px; line-height:1.1; color:var(--ink);
}
/* no Figma os parágrafos são separados por uma linha vazia, então o
respiro entre eles é exatamente uma entrelinha */
.eco-corpo p + p{ margin-top:17.6px; }
/* ---------- linhas de depoimento, acima e abaixo do texto ----------
22/09, reescrito: era posicionamento absoluto por pessoa (--x/--y +
paralaxe); o Renan pediu estrutura simples, então virou isto: duas
linhas comuns (flex, wrap), uma antes do texto e outra depois (ver
home.py, LINHA_CIMA/LINHA_BAIXO). Em tela larga os três pares de cada
linha cabem lado a lado; conforme o espaço encolhe, o PRÓPRIO wrap do
flexbox empurra quem não cabe mais pra a linha de baixo -- sem media
query por pessoa, sem breakpoint calculado à mão.
width trava na mesma coluna do cabeçalho (--linha-site) e centraliza,
então a linha nunca encosta na margem da tela: sobra o mesmo respiro
dos dois lados que o menu já usa. gap garante o respiro entre pares
na mesma linha (32 columna, 40 entre linhas quando quebra) e, por ser
margin/gap normal de fluxo (não mais posição absoluta sobre o texto),
a linha nunca fica em cima do bloco de texto: um vem antes, o outro
depois, sempre em sequência vertical. */
.eco-linha{
display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
gap:40px 48px;
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
padding:0 40px;
}
.eco-linha--cima{ margin-bottom:64px; }
.eco-linha--baixo{ margin-top:64px; }
/* Pirâmide (22/09, pedido do Renan): só a linha de cima, só entre 768px
e 1023px (a mesma banda "tablet" que o resto do site já usa). Fora
dessa faixa (tela larga OU mobile) .eco-item--apice não recebe nada
e os três seguem em DOM/ordem normal (Roberta, Fagner, Alexandre) --
em tela larga lado a lado, no mobile empilhados 1 a 1, os dois
estados já corretos antes deste ajuste.
Nessa banda intermediária, sem mexer no HTML: order:-1 tira o do meio
(Fagner, marcado como eco-item--apice em home.py) do lugar dele no
DOM e bota primeiro visualmente; flex-basis:100% faz ele sozinho
ocupar a linha inteira, o que empurra quem vem depois (Roberta e
Alexandre, que não mudaram de order) pra segunda linha, lado a lado
-- é a pirâmide (1 em cima, 2 embaixo, perto do título) sem precisar
de wrapper novo nem de "quem não coube desce", que é o que o wrap
comum faria sozinho e deixaria o do meio embaixo, não em cima. */
@media (max-width:1023px) and (min-width:768px){
.eco-item--apice{
order:-1; flex-basis:100%;
justify-content:center;
}
}
/* cada item: foto à esquerda, coluna de texto à direita, flex row comum
-- sem inversão, sem recuo por pessoa. fw/fh/gap são o valor único do
Figma (927:9393); --pw é a única medida que ainda varia por pessoa,
porque calibra a quebra de linha da fala (ver comentário no PARES). */
.eco-item{
display:flex; align-items:center; gap:23.45px;
flex:0 1 auto;
}
.eco-item .eco-retrato{ width:81.06px; height:106px; flex:none; }
.eco-item .eco-dep{ width:var(--pw); }
/* entrada por scroll, um item de cada vez (22/09, pedido do Renan): não é
mais o data-anima/is-dentro genérico do site (esse acende a linha
inteira junto, no instante em que a DOBRA cruza a tela). Aqui quem
decide é o .esta-foco que o v2.js acende item a item, calculado pela
posição da LINHA no scroll (ver "linhasEco" em v2.js) -- conforme a
pessoa rola, o primeiro depoimento foca, depois o segundo, depois o
terceiro, conduzindo a leitura em vez de soltar os três juntos. */
.eco-item{
opacity:0; filter:blur(10px); transform:translateY(40px);
transition:opacity var(--dur) var(--suave), transform var(--dur) var(--suave), filter var(--dur) var(--suave);
}
.eco-item.esta-foco{ opacity:1; filter:blur(0); transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
.eco-item{ opacity:1; filter:none; transform:none; transition:none; }
}
/* o card do Figma tem canto de 15% da largura e uma sombra baixa; a foto
ja vem cortada na janela certa, entao so preenche */
.eco-retrato{
width:100%; aspect-ratio:121 / 158.23;
border-radius:14.96% / 11.44%; overflow:hidden;
background:var(--nevoa);
box-shadow:0 9px 17px rgba(0,0,0,.1);
}
.eco-retrato img{ display:block; width:100%; height:100%; object-fit:cover; }
/* Figma 985:2334: a etiqueta deixou de ser pilula. Agora cada solto e um
depoimento assinado: a fala em display, e embaixo a pessoa e a empresa
no azul acinzentado. Sem fundo e sem sombra, o texto assenta direto na
dobra, que e o que o Figma mostra. */
.eco-dep{
display:flex; flex-direction:column; align-items:center; gap:12px;
text-align:center;
}
.eco-dep-frase{
font-family:var(--display); font-weight:700; font-size:18px;
line-height:1.1; letter-spacing:-0.18px; color:var(--ink);
/* 18/09: quebra "crua" (wrap), nao balance, por padrao. Ao remedir os
quatro pela arvore do arquivo e testar a quebra de linha contra o
Figma, so o Fagner precisa de balance pra bater com o arquivo
("milhões em um / mês. Batemos", uma redistribuicao que o wrap
comum nao produz em nenhuma largura); nos outros tres o balance
puxava uma palavra pra linha de baixo (o "a" de "operacional a",
o "os" de "atingir os", o "em" de "Crescemos em") e a quebra
nao batia com o arquivo em nenhuma largura testada. Ver excecao
do Fagner logo abaixo. */
text-wrap:wrap;
}
.eco-item[data-nome="fagner"] .eco-dep-frase{ text-wrap:balance; }
/* pessoa e empresa sao um bloco so, com o respiro curto do Figma */
.eco-dep-assina{ display:flex; flex-direction:column; gap:5px; }
.eco-dep-quem,
.eco-dep-empresa{
font-family:var(--texto); font-size:14px; line-height:1;
letter-spacing:-0.14px; color:#738f9e;
}
.eco-dep-quem{ font-weight:700; }
.eco-dep-empresa{ font-weight:400; }
/* ---------- cartão amarelo dos números ---------- */
/* Figma 1099:1172. O Renan desenhou quatro tamanhos do componente, wide
1474, desktop 1166, tablet 1044 e mobile 355, e o que manda em qual
deles vale e a largura da PROPRIA faixa, nao a da janela: por isso a
caixa e um container de consulta e as medidas vao em cqw. Dentro de
cada faixa o card escala sozinho, entao nao existe largura em que ele
quebre, e nos quatro pontos desenhados ele bate com o Figma. */
/* 22/09: era absoluto (top:1122px fixo), calibrado pra quando .eco tinha
altura travada e os depoimentos eram uma camada por cima. Com a seção
em fluxo normal agora (ver .eco-linha), o card também entra no fluxo
-- só mantém a paralaxe vertical leve (--desl) por cima da posição
normal, não mais no lugar dela. */
.eco-card-caixa{
position:relative; margin:96px auto 0;
transform:translate3d(0, var(--desl, 0px), 0);
z-index:1; width:min(var(--container), 100% - var(--gutter) * 2);
container-type:inline-size;
will-change:transform;
}
.eco-card{
position:relative; width:100%;
height:var(--card-h); margin-bottom:var(--card-mb, 0);
border-radius:var(--card-r);
/* a faixa nao e amarelo chapado: escurece por volta de 30% da
largura e vai clareando ate quase creme na direita. as paradas
foram lidas no render do Figma */
background:linear-gradient(90deg,
#ffeab4 0%, #ffe397 5%, #ffdc7c 10%, #ffd566 15%, #ffd057 20%,
#ffd046 24%, #ffcc45 29%, #ffcd4d 34%, #ffdf80 62%, #ffe18b 67%,
#ffe696 72%, #ffe8a4 77%, #ffe9b1 81%, #ffeeb6 86%, #fff0c0 91%,
#fff2cd 96%, #fff4d5 100%);
}
/* os dois numeros sao ancorados pelo centro, que e o que se mantem
estavel quando o corpo muda de tamanho entre uma faixa e outra */
.eco-card-num{
position:absolute; top:var(--num-t, 50%);
transform:translate(-50%, -50%);
display:flex; flex-direction:column; align-items:center; text-align:center;
font-family:var(--display); font-weight:400; line-height:1; color:var(--ink);
white-space:nowrap;
}
/* os dois nao ficam na mesma altura: no arquivo o da esquerda e o da
direita tem centros proprios em cada versao (1202:3865 a 3868), e a
diferenca entre eles chega a 1,3% da faixa no desktop */
.eco-card-num--esq{ left:var(--num-esq); top:var(--num-t-esq, var(--num-t, 50%)); }
.eco-card-num--dir{ left:var(--num-dir); top:var(--num-t-dir, var(--num-t, 50%)); }
/* o par numero/unidade nao e uma pilha de linha cheia: no arquivo o valor
da esquerda tem caixa de 0,94 do corpo e o da direita sobe a unidade com
uma margem negativa de 0,1953 do corpo. Os dois fatores sao os mesmos nas
quatro versoes (1202:3865 a 3868), entao entram em em, nao em px. */
.eco-card-num--esq .eco-card-valor{ line-height:0.94; }
.eco-card-num--dir .eco-card-valor{ margin-bottom:-0.1953em; }
.eco-card-num--esq .eco-card-valor{ font-size:var(--num-esq-v); }
.eco-card-num--esq .eco-card-unidade{ font-size:var(--num-esq-u); }
.eco-card-num--dir .eco-card-valor{ font-size:var(--num-dir-v); }
.eco-card-num--dir .eco-card-unidade{ font-size:var(--num-dir-u); }
/* as duas fotos: cada uma tem a propria janela de corte, tirada do Figma,
e por isso o recorte vive numa camada separada da imagem.
As medidas do da esquerda nao vem do design context, que devolve
errado para esse no: sairam de ajuste de silhueta contra o render
isolado. Errar nelas encolhe a pessoa e parece outra foto. */
.eco-dupla{
position:absolute; left:var(--dupla-x); top:var(--dupla-t); z-index:2;
width:var(--dupla-w); aspect-ratio:var(--dupla-ar); pointer-events:none;
}
/* cada foto tem a propria janela de corte, e no quadro novo a janela
muda de faixa para faixa: no tablet ela abre mais embaixo e e mais
baixa que no desktop */
.eco-dupla span{
position:absolute; top:var(--foto-t, 0); height:var(--foto-h, 100%);
overflow:hidden;
}
.eco-dupla img{ position:absolute; max-width:none; }
.eco-dupla-dir{ left:var(--dir-x); width:var(--dir-w); }
.eco-dupla-dir img{
left:-0.04%; top:var(--dir-img-t, -8.82%);
width:105.45%; height:var(--dir-img-h, 186.08%);
}
.eco-dupla-esq{ left:var(--esq-x); width:var(--esq-w); }
.eco-dupla-esq img{ left:-10.23%; top:-23.71%; width:110.45%; height:236.47%; }
/* nome e cargo de quem aparece na foto, ao lado de cada rosto e nao por
cima dele */
.eco-nome{
position:absolute; top:var(--nome-t); z-index:3;
display:flex; flex-direction:column; gap:var(--nome-gap);
line-height:1; width:var(--nome-w, auto);
}
.eco-nome--esq{ left:var(--nome-esq); }
.eco-nome--dir{ left:var(--nome-dir); }
.eco-nome-quem{
font-family:var(--display); font-weight:700;
font-size:var(--nome-quem); color:var(--ink);
}
.eco-nome--esq .eco-nome-quem{ width:var(--nome-quem-w, 100%); }
.eco-nome-cargo{ font-size:var(--nome-cargo); color:#354e5b; }
/* --- wide, referencia 1474 --- */
@container (min-width:1320px){
.eco-card{ --card-h:18.045cqw; --card-r:2.751cqw; }
.eco-card-num{
--num-esq:13.6%; --num-dir:87.11%;
--num-t-esq:49.812%; --num-t-dir:50%;
--num-esq-v:4.2225cqw; --num-esq-u:2.7883cqw;
--num-dir-v:4.5401cqw; --num-dir-u:2.9986cqw;
}
.eco-dupla{
--dupla-x:29.24%; --dupla-w:43.22%; --dupla-ar:637 / 351;
--dupla-t:-30.45%; --foto-t:5.13%; --foto-h:93.73%;
--dir-x:24.96%; --dir-w:67.98%; --esq-x:9.26%; --esq-w:73.63%;
}
/* no quadro novo o nome fecha em duas linhas, com a caixa de 117 */
.eco-nome{
--nome-t:37.97%; --nome-esq:31.41%; --nome-dir:62.21%;
--nome-quem:1.133cqw; --nome-cargo:0.9498cqw;
--nome-gap:0.2714cqw; --nome-w:7.938cqw; --nome-quem-w:6.852cqw;
}
}
/* --- desktop, referencia 1166 --- */
@container (min-width:1105px) and (max-width:1319.98px){
.eco-card{ --card-h:18.268cqw; --card-r:3.478cqw; }
.eco-card-num{
--num-esq:14.45%; --num-dir:86.15%;
--num-t-esq:51.085%; --num-t-dir:52.347%;
--num-esq-v:3.6664cqw; --num-esq-u:2.4214cqw;
--num-dir-v:4.0544cqw; --num-dir-u:2.6777cqw;
}
.eco-dupla{
--dupla-x:26.42%; --dupla-w:47.23%; --dupla-ar:550.72 / 300;
--dupla-t:-40.85%; --foto-t:5.19%; --foto-h:94.77%;
--dir-x:24.96%; --dir-w:68.01%; --esq-x:9.26%; --esq-w:73.69%;
}
.eco-nome{
--nome-t:33.03%; --nome-esq:28.79%; --nome-dir:62.45%;
--nome-quem:1.2384cqw; --nome-cargo:1.0381cqw;
--nome-gap:0.2965cqw; --nome-w:8.675cqw; --nome-quem-w:7.489cqw;
}
}
/* --- tablet, referencia 1044 --- */
@container (min-width:620px) and (max-width:1104.98px){
.eco-card{ --card-h:17.816cqw; --card-r:3.884cqw; }
.eco-card-num{
--num-esq:11.83%; --num-dir:88.79%;
--num-t-esq:48.898%; --num-t-dir:49.245%;
--num-esq-v:3.3711cqw; --num-esq-u:2.2264cqw;
--num-dir-v:3.2148cqw; --num-dir-u:2.1233cqw;
}
.eco-dupla{
--dupla-x:23.66%; --dupla-w:52.75%; --dupla-ar:550.72 / 300;
--dupla-t:-46.77%; --foto-t:13.33%; --foto-h:77.81%;
--dir-x:29.64%; --dir-w:55.84%; --esq-x:16.75%; --esq-w:60.51%;
}
.eco-nome{
--nome-t:37.82%; --nome-esq:26.31%; --nome-dir:63.9%;
--nome-quem:1.3831cqw; --nome-cargo:1.1594cqw;
--nome-gap:0.3312cqw; --nome-w:9.689cqw; --nome-quem-w:8.364cqw;
}
}
/* --- mobile, referencia 355: os dois numeros descem para fora da faixa
e ficam lado a lado embaixo dela, que e o unico ponto em que o
desenho muda de arranjo e nao so de tamanho --- */
@container (max-width:619.98px){
.eco-card{ --card-h:52.507cqw; --card-r:5.941cqw; --card-mb:19cqw; }
.eco-card-num{
--num-t:calc(100% + 10.53cqw);
--num-esq:25.86%; --num-dir:73.46%;
--num-esq-v:7.9752cqw; --num-esq-u:5.2673cqw;
--num-dir-v:8.5758cqw; --num-dir-u:5.6639cqw;
}
/* no quadro novo a dupla tem caixa propria de recorte, 333,456x221,992
comecando 35,59 acima da faixa: e ela que impede o corpo de escorrer
por cima dos numeros, sem precisar encolher a foto */
.eco-dupla{
--dupla-x:3.166%; --dupla-w:93.93%; --dupla-ar:333.456 / 221.992;
--dupla-t:-19.09%; --foto-t:0; --foto-h:132.15%;
--dir-x:24.86%; --dir-w:67.54%; --esq-x:9.26%; --esq-w:73.16%;
--dir-img-t:-5.15%; --dir-img-h:108.55%;
overflow:hidden;
}
/* no celular a foto entra na largura da janela, na proporcao natural do
PNG, ancorada pelo TOPO: com `cover` ancorado embaixo a cabeca dele
saia cortada na borda de cima */
.eco-dupla-esq img{ left:0; top:0; width:100%; height:auto; }
.eco-nome{
--nome-t:19.6%; --nome-esq:4.69%; --nome-dir:76.63%;
--nome-quem:3.227cqw; --nome-cargo:2.7051cqw;
--nome-gap:0.7729cqw; --nome-w:22.606cqw; --nome-quem-w:19.514cqw;
}
}
/* ============================================================
05 · SOLUÇÕES
============================================================ */
.solucoes-v2{
position:relative; overflow:hidden;
padding:66px 0 55px; background:var(--branco);
}
/* A palavra gigante é textura de fundo e também a entrada da dobra:
começa pequena e desfocada no meio da tela e, conforme o scroll, sobe
e cresce até parar em 66px do topo, no tamanho do Figma. --e é o
progresso, de 0 a 1, e --marca-topo vem do JS em px porque depende de
onde a tela está em relação à seção. */
/* a palavra fecha na largura do grid, a mesma dos cards e do cabecalho.
A caixa carrega essa largura e vira container de consulta; a palavra
mede-se em cqw, entao a relacao nunca se perde ao mudar de tela. */
.sol-marca-caixa{
position:absolute; left:50%; top:0; transform:translateX(-50%);
width:min(var(--container), 100% - var(--gutter) * 2);
container-type:inline-size;
z-index:0; pointer-events:none;
}
.sol-marca{
position:absolute; left:50%; top:var(--marca-topo, 66px); z-index:0;
transform:translateX(-50%);
font-family:var(--display); font-weight:500; line-height:1;
/* o percurso é de --marca-inicio a --marca-fim; os breakpoints
trocam --marca-inicio, nunca o font-size, senão a animação
some junto com o valor fixo.
14,2949cqw é o corpo em que "SOLUÇÕES" mede exatamente a largura da
caixa: o glifo ocupa 6,9951 vezes o corpo e o espacejamento, agora
em em, soma outros 0,08. Trocar a palavra muda esse número. */
--marca-inicio:40px;
--marca-fim:14.2949cqw;
font-size:calc(var(--marca-inicio) + var(--e, 1) * (var(--marca-fim) - var(--marca-inicio)));
letter-spacing:calc(var(--e, 1) * 0.01em);
filter:blur(calc((1 - var(--e, 1)) * 14px));
opacity:calc(.2 + var(--e, 1) * .8);
color:var(--ink); white-space:nowrap; pointer-events:none;
will-change:top, font-size, filter;
}
/* O resto da dobra entra depois da palavra, um bloco de cada vez. O
progresso de cada um (--p0 a --p3) vem do JS já suavizado, com uma
desaceleração longa: o elemento faz quase todo o caminho no começo e
chega quase parado, que é o que dá o ar suave.
Cada um sobe, cresce de --escala até 1 e limpa um desfoque leve. Nos
cards o --lado abre o conjunto: o da esquerda nasce deslocado para
dentro e o da direita para o outro lado, então eles se afastam do
centro conforme entram, um atrás do outro. */
.sol-cabecalho, .sol-card{
--lado:0;
--escala:.9;
--entrada:1;
opacity:var(--entrada);
transform:translate3d(calc(var(--lado) * (1 - var(--entrada)) * 64px),
calc((1 - var(--entrada)) * 88px), 0)
scale(calc(var(--escala) + var(--entrada) * (1 - var(--escala))));
filter:blur(calc((1 - var(--entrada)) * 5px));
will-change:transform, opacity, filter;
}
.sol-cabecalho{ --escala:.97; --entrada:var(--p0, 1); }
.sol-card:nth-child(1){ --lado:1; --entrada:var(--p1, 1); }
.sol-card:nth-child(2){ --lado:0; --entrada:var(--p2, 1); }
.sol-card:nth-child(3){ --lado:-1; --entrada:var(--p3, 1); }
.sol-in{
position:relative; z-index:1;
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
}
.sol-cabecalho{
padding-top:280px;
display:flex; align-items:flex-end; justify-content:space-between; gap:64px;
}
.sol-cab-esq{ display:flex; flex-direction:column; gap:6px; }
/* Figma 927:9178: 860 de largura, 32px, e dois trechos em bold dentro de
um corpo regular */
.sol-hero{
max-width:860px;
font-family:var(--display); font-weight:400; font-size:32px; line-height:1.04;
color:var(--ink);
}
.sol-hero strong{ font-weight:700; }
/* Figma 927:9179: o texto de apoio passou a 14px e a caixa abriu de 405
para 527, que e a medida do arquivo. A ultima frase vai em bold. */
.sol-cab-apoio{ flex:0 0 527px; font-size:14px; line-height:1.52; color:var(--corpo); }
.sol-cab-apoio strong{ font-weight:700; }
.sol-cards{ margin-top:42px; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
/* no computador os tres cards cabem lado a lado: nao ha esteira, entao
nao ha o que as setas facam */
.sol-setas{ display:none; }
/* ---------- o card, do Figma 1419:5123 / 1419:5189 / 1419:5217 ----------
Cada um tem duas variantes, Padrao e Variante 2, e a segunda e o hover.
Entre elas mudam tres coisas, e so tres: o veu escuro sobe por cima da
foto, o chapeu e a headline aparecem em fade in up, e o botao redondo
de "+" vira a pilula "Saiba mais".
TODA medida daqui e o valor do arquivo dividido por 503, a largura do
card desenhado, escrita em cqw. O card e o container de consulta, entao
1cqw e 1% da largura dele: a composicao fica identica a do arquivo em
qualquer largura de tela, sem uma media query para cada degrau.
Um elemento nao pode se medir em cqw, e por isso existe a
.sol-card-caixa: o card so declara o container e a proporcao, e quem
carrega fundo, canto e recorte e a caixa de dentro. */
.sol-card{
container-type:inline-size;
position:relative; display:block; text-decoration:none;
aspect-ratio:503 / 706;
}
.sol-card-caixa{
position:absolute; inset:0; display:block; overflow:hidden;
background:var(--fundo, var(--ink));
/* o raio mora numa propriedade porque cada largura tem o seu, e o
crescimento da superelipse (logo abaixo) e uma conta so para todos */
--sol-r:14.7117cqw;
border-radius:var(--sol-r);
}
/* borda no jeito iOS: o canto do Figma nao e um arco de circulo, e uma
superelipse com suavizacao, entao ele avanca um decimo alem do raio.
Onde corner-shape nao existe fica so o raio redondo.
O raio do arquivo e 56 no card de 503. O Renan pediu 18 a mais em
17/09, entao aqui ele e 74, e 81,4 na superelipse. Como tudo no card e
medido em cqw, esses 18 sao os 18 do desenho de 503: numa tela de 1920
o card renderiza a ~497 e o acrescimo chega como ~17,8 reais.
O x1,1 vale para QUALQUER largura: os raios de celular, la embaixo em
RESPONSIVO, so trocam --sol-r e herdam a conta. Ate 18/09 eles eram
escritos direto em border-radius, ficavam de fora dela e por isso o
canto do card de celular lia menor que o do arquivo. */
@supports (corner-shape: squircle){
.sol-card-caixa{ border-radius:calc(var(--sol-r) * 1.1); corner-shape:squircle; }
}
/* ---------- a arte do card ----------
O card parado nao e foto dentro de moldura: e colagem. A cabeca da
pessoa VAZA para cima da moldura arredondada e passa por cima da
palavra da solucao, entao fundo, palavra e foto chegam numa peca so,
exportada do arquivo pelo Renan em 17/09. Tentar remontar isso em CSS
(fundo + texto + foto numa janela) devolve a foto presa dentro da
caixa, que foi como este card nasceu aqui e estava errado.
O fundo em token continua declarado porque ele aparece enquanto a arte
carrega e nos cantos, onde a arte e transparente: consultoria fecha no
escuro da marca, mentoria no amarelo e palestras no azul claro. */
.sol-arte{
position:absolute; inset:0; display:block;
}
.sol-arte img{
display:block; width:100%; height:100%;
object-fit:cover; max-width:none; border-radius:inherit;
}
.sol-card[data-sol="mentoria"]{ --fundo:var(--amarelo); --med:70.9742cqw; }
.sol-card[data-sol="palestras"]{ --fundo:var(--linha); --med:89.2644cqw; }
/* o veu. No arquivo ele e uma caixa alta com um degrade que sai de
transparente e fecha no escuro, e a diferenca entre as duas variantes
e a altura dela: 1264 na parada e 781 no hover, com o topo no mesmo
lugar. Em vez de animar altura, que reflui, a caixa tem sempre os 781 e
desliza: parada ela desce 275 e joga a parte escura para fora do card,
no hover ela volta ao lugar e a escuridao sobe. Mesma imagem, com
transform em vez de layout.
O arquivo poe um desfoque de fundo de 5px nessa mesma camada, e ele
ficou de fora. backdrop-filter junto com transform no MESMO elemento
quebra no Chrome: o navegador amostra o fundo no espaco local e so
depois aplica a transformacao, entao o que aparece e uma copia da foto
deslocada, nao um vidro. Sem ele o degrade escuro faz o trabalho, que
e o que se ve. */
.sol-veu{
position:absolute; left:-1.9881cqw; top:-3.1809cqw;
width:104.5726cqw; height:155.2684cqw;
border-radius:8.5229cqw; pointer-events:none;
background:linear-gradient(180deg,
rgba(12,22,27,0) 57.013%, rgba(12,22,27,.68) 75.823%, #0c161b 93.416%);
transform:translateY(35.2113%);
transition:transform .55s var(--suave);
}
/* A cópia desfocada da arte só serve ao celular, onde o texto nasce
ligado sobre a foto. No computador o texto só aparece no hover, e ali
o véu que desliza já faz o trabalho: aqui ela fica fora de cena. */
.sol-turvo{ display:none; }
.sol-pe{
position:absolute; left:0; right:0; bottom:8.9463cqw;
padding:0 5.3269cqw;
display:flex; flex-direction:column; align-items:flex-start; gap:4.7714cqw;
}
/* o texto fica no fluxo mesmo apagado, como no arquivo: e isso que
segura o botao no mesmo lugar nas duas variantes */
.sol-texto{ display:flex; flex-direction:column; align-items:flex-start; gap:3.4091cqw; }
/* o chapeu do card e amarelo, e a headline tem peso misto: regular de
corpo com um trecho em semibold */
.sol-tag{
font-family:var(--display); font-weight:600; font-size:2.6383cqw; line-height:.93;
color:var(--amarelo);
}
.sol-titulo{
margin:0; max-width:var(--med, 79.0489cqw);
font-family:var(--display); font-weight:400; font-size:5.966cqw; line-height:.93;
color:var(--branco);
}
.sol-titulo strong{ font-weight:600; }
/* o botao troca de rotulo e de largura no mesmo gesto. Cada rotulo mora
numa grade de uma coluna que vai de 0fr a 1fr: e assim que se anima
largura automatica sem saber o numero antes. */
.sol-btn{
display:inline-flex; align-items:center; justify-content:center;
height:9.162cqw; padding:0 3.4091cqw; border-radius:12.7841cqw;
background:var(--amarelo); color:var(--ink);
font-family:var(--texto); font-weight:500; font-size:2.9829cqw; line-height:1;
white-space:nowrap;
}
.sol-btn-rot{
display:grid; grid-template-columns:1fr;
transition:grid-template-columns .5s var(--suave), opacity .3s var(--suave);
}
.sol-btn-rot > span{ display:block; overflow:hidden; min-width:0; }
.sol-btn-rot--saiba{ grid-template-columns:0fr; opacity:0; }
/* ---------- os dois estados ----------
O hover vale para o card inteiro, e o foco de teclado leva o mesmo
tratamento: quem chega pelo Tab ve o que quem chega pelo mouse ve.
A opacidade mora no GRUPO e o deslocamento nos dois filhos: uma
propriedade animada por elemento, e o escalonamento entre chapeu e
headline sai do transform.
O grupo apaga com visibility alem da opacidade, e nao e contorno de
defeito de navegador: opacidade zero sozinha deixaria a headline
selecionavel com o mouse e achavel no Ctrl+F com o card parado, o que
parece defeito para quem usa. O atraso de .42s no desligamento e o que
deixa o fade de saida acontecer antes de o texto sumir. Como
visibility:hidden tambem tira o texto da arvore de acessibilidade, o
link do card carrega um aria-label proprio, senao ele ficaria sem nome
para quem usa leitor de tela. */
.sol-texto{
opacity:0; visibility:hidden;
transition:opacity .42s var(--suave), visibility 0s .42s;
}
.sol-texto .sol-tag,
.sol-texto .sol-titulo{
transform:translateY(2.8cqw);
transition:transform .5s var(--suave);
}
.sol-texto .sol-titulo{ transition-delay:.08s; }
.sol-card:hover .sol-veu,
.sol-card:focus-visible .sol-veu{ transform:translateY(0); }
.sol-card:hover .sol-texto,
.sol-card:focus-visible .sol-texto{
opacity:1; visibility:visible;
transition:opacity .42s var(--suave), visibility 0s;
}
.sol-card:hover .sol-texto .sol-tag,
.sol-card:hover .sol-texto .sol-titulo,
.sol-card:focus-visible .sol-texto .sol-tag,
.sol-card:focus-visible .sol-texto .sol-titulo{ transform:none; }
.sol-card:hover .sol-btn-rot--mais,
.sol-card:focus-visible .sol-btn-rot--mais{ grid-template-columns:0fr; opacity:0; }
.sol-card:hover .sol-btn-rot--saiba,
.sol-card:focus-visible .sol-btn-rot--saiba{ grid-template-columns:1fr; opacity:1; }
/* Aparelho de toque nao tem hover, e largura nao e o mesmo que ponteiro:
um tablet deitado passa dos 1023 e continua sem mouse. Sem isto o card
ficaria preso no "+" e a pessoa nunca leria a headline. Aqui ele entrega
os dois estados de uma vez, que e o que o Renan pediu para o celular. */
@media (hover: none){
.sol-texto{ opacity:1; visibility:visible; transition:none; }
.sol-texto .sol-tag,
.sol-texto .sol-titulo{ transform:none; transition:none; }
.sol-veu{ transform:translateY(0); transition:none; }
.sol-btn-rot--mais{ display:none; }
.sol-btn-rot--saiba{ grid-template-columns:1fr; opacity:1; }
}
/* ============================================================
06 · RESULTADOS
============================================================ */
.result{ position:relative; background:var(--branco); padding:60px 0 40px; }
.result-in{ width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto; }
.result-cabecalho{
display:flex; align-items:flex-start; justify-content:space-between; gap:64px;
}
.result-cab-esq{ display:flex; flex-direction:column; gap:6px; }
.result-hero{
max-width:573px;
font-family:var(--display); font-weight:400; font-size:37.4px; line-height:1.04;
color:var(--ink);
}
.result-cab-apoio{ flex:0 0 306px; margin-top:30px; font-size:16px; line-height:1.5; color:var(--corpo); }
.result-palco{ margin-top:60px; }
/* a janela corta os cards que esperam nas laterais, mas o corte vale
pela caixa de padding: os 120 de baixo deixam a sombra do card do
meio terminar de dissolver antes do corte, e a margem negativa devolve
esse espaco para o fluxo, entao a dobra nao muda de altura */
.result-janela{
overflow:hidden; container-type:inline-size;
padding-bottom:var(--sobra-janela); margin-bottom:calc(var(--sobra-janela) * -1);
}
.result-trilho{
display:flex; align-items:center; gap:1.519cqw;
transition:transform .72s var(--suave); will-change:transform;
}
/* três tamanhos, como no Figma: o do meio abre e ganha a etiqueta.
---------- canto iOS, corrigido em 17/09 ----------
O raio destes cards estava em 12px fixos nas laterais e 1,7cqw na foto
do centro, o que dava 5,5% da largura da foto. No arquivo ele é 8,59%,
e o bloco de celular mais abaixo já trazia esse número certo: a foto do
card central mede 21,593 num quadro de 251,25. Era só o desktop que
estava fora, com o canto apertado demais.
Agora cada tamanho leva a proporção do arquivo sobre a própria largura:
15,64% no card pequeno, 13,19% no do meio, 6,45% na moldura branca do
central e 8,59% na foto dele. E entra a superelipse, que é o canto iOS
que o resto do site usa e faltava aqui. */
.caso{
flex:none; width:10.56cqw; border-radius:1.6513cqw; background:transparent;
transition:width .72s var(--suave), border-radius .72s var(--suave),
padding .72s var(--suave), background-color .72s var(--suave),
box-shadow .72s var(--suave);
}
.caso.e-meio{ border-radius:2.641cqw; }
.caso-foto{ position:relative; border-radius:1.6513cqw; overflow:hidden; background:var(--nevoa); }
.caso.e-meio .caso-foto{ border-radius:2.641cqw; }
@supports (corner-shape: squircle){
.caso, .caso-foto{ corner-shape:squircle; }
}
.caso-foto img{ width:100%; aspect-ratio:1.438; object-fit:cover; display:block; }
/* Figma 985:1333 e 985:1332: o pe da capa escurece e recebe a frase-chave
do case. Nos cards laterais nao ha espaco para ler, entao os dois so
aparecem no card do meio, no mesmo tempo da etiqueta. */
.caso-veu, .caso-chave{
position:absolute; opacity:0;
transition:opacity .34s var(--suave);
}
/* Figma 1233:1528, revisto em 17/09: o Tiago reclamou que a frase-chave
sumia dentro da foto. O degrade agora comeca mais cedo (42,6% em vez
de 55,6%) e ganha um degrau a mais no meio, entao o pe da capa chega
bem mais escuro sob a linha do texto. */
.caso-veu{
inset:0; pointer-events:none;
background:linear-gradient(180deg,
rgba(12,22,27,0) 42.61%, rgba(12,22,27,.321) 59.36%,
rgba(12,22,27,.629) 78.21%, #0c161b 100%);
}
/* O desfoque atras do texto e uma SEGUNDA copia da capa, desfocada e
apagando para cima, e nao um backdrop-filter: no Chromium a mascara
NAO recorta backdrop-filter (a foto inteira saia borrada, topo
incluso). Com a copia o filtro e comum e a mascara faz o que deve.
O scale de 1.04 joga a franja transparente que o blur cria nas bordas
para fora do corte, senao a copia deixa a foto nitida aparecer num fio
de 3px em volta. */
/* a copia entra como e nao como background numa custom property:
url() dentro de var() resolve contra o ARQUIVO CSS, entao o caminho
virava /css/assets/... e as oito capas davam 404 em silencio, com a
camada existindo e nao pintando nada. */
.caso-turvo{
position:absolute; inset:0; opacity:0; pointer-events:none; overflow:hidden;
filter:blur(2.85px); transform:scale(1.04);
transition:opacity .34s var(--suave);
-webkit-mask-image:linear-gradient(180deg, transparent 40%, #000 72%);
mask-image:linear-gradient(180deg, transparent 40%, #000 72%);
}
.caso-turvo img{ display:block; width:100%; height:100%; object-fit:cover; }
.caso.e-centro .caso-turvo{ opacity:1; }
.caso-chave{
left:8.92%; top:71.5%; width:54.8%;
font-family:var(--display); font-weight:500; font-size:1.648cqw; line-height:1.2;
color:var(--branco);
}
.caso.e-centro .caso-veu,
.caso.e-centro .caso-chave{ opacity:1; }
.caso-vazio{ display:block; width:100%; aspect-ratio:1.438; background:var(--nevoa); }
.caso-info{
height:0; opacity:0; overflow:hidden;
display:flex; align-items:center; justify-content:space-between;
padding:0 1.36cqw; gap:1cqw;
transition:height .72s var(--suave), opacity .34s var(--suave);
}
/* Figma 1070:7387: 4 entre o segmento e o nome do cliente. Os dois
vinham colados, um encostado no outro pela entrelinha. */
.caso-nomes{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.caso-seg{
font-family:var(--texto); font-weight:500; font-size:min(13px, 1cqw); line-height:1.3;
/* no celular o corpo proporcional vira 3,5px: ver o bloco de correcao
no fim do arquivo, onde estes tres textos ganham medida fixa */
text-transform:uppercase; color:var(--muted-2);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.caso-cliente{
font-family:var(--display); font-weight:500; font-size:min(18px, 1.4cqw); line-height:1.3;
text-transform:uppercase; color:var(--ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Figma 1446:4629: a bolinha amarela com a seta virou um botao escrito.
A seta para a direita fazia a pessoa esperar que o carrossel andasse,
quando na verdade o clique abre o case. */
.caso-ver{
flex:none;
display:flex; align-items:center; justify-content:center;
height:max(34px, 3.04cqw); padding:0 max(13px, 1.26cqw);
border-radius:100px; background:var(--amarelo); color:var(--ink);
font-family:var(--texto); font-weight:600; font-size:min(15px, 1.18cqw);
line-height:1; white-space:nowrap;
transition:transform .3s var(--ease);
}
.caso:hover .caso-ver{ transform:translateY(-1px); }
.caso.e-meio{ width:20.03cqw; }
/* no arquivo a foto é MAIS arredondada que a moldura branca que a segura,
e não menos: 8,59% contra 6,45%. Não é engano de leitura, é o desenho */
.caso.e-centro{
width:32.75cqw; border-radius:2.1127cqw; padding:.73cqw 1cqw;
background:var(--branco);
box-shadow:0 69px 96px -53px rgba(0,0,0,.25);
}
.caso.e-centro .caso-foto{ border-radius:2.6423cqw; }
.caso.e-centro .caso-info{ height:4.64cqw; opacity:1; }
/* Figma 1446:4639: no desktop as setas saem do pe da dobra e vao para as
laterais dos cards, uma de cada lado, na altura do meio da esteira.
A janela e quem corta os cards, entao elas nao podem morar dentro
dela: ficam ancoradas no palco e o involucro sai do fluxo com
display:contents. O deslocamento negativo joga cada uma para a margem
da pagina; onde a margem nao cabe, elas encostam na borda da coluna. */
/* a janela cresce 120 alem dos cards para a sombra do card do meio
dissolver antes do corte, e o palco herda essa altura. Quem precisa do
meio dos CARDS, e nao do meio do palco, desconta essa sobra. */
.result-palco{ position:relative; --sobra-janela:120px; }
.result-setas{ display:contents; }
.result-seta{
width:44px; height:44px; border-radius:100px;
background:var(--nevoa); color:var(--ink);
display:flex; align-items:center; justify-content:center;
transition:background-color .25s var(--ease);
}
.result-seta:hover{ background:var(--amarelo); }
/* so as duas da esteira de cases saem do fluxo: a mesma classe serve as
setas da galeria de evento e as de "onde a gente esteve", que seguem
sendo caixa comum no lugar delas. */
.result-palco .result-seta{
position:absolute; top:calc((100% - var(--sobra-janela)) / 2);
transform:translateY(-50%); z-index:3;
}
/* As setas moram a 8 do card mais externo, e NAO a uma distancia fixa da
borda da janela. A conta anterior era ancorada na tela e nao no card:
em 1440 dava no mesmo, mas em 1920 a margem da pagina cresce para 260 e
as setas iam junto, parando na ponta do navegador, longe da esteira.
Aqui o -52 e a propria seta (44) mais o respiro (8), entao elas ficam
sempre encostadas na coluna. O max() e o unico limite: onde a margem da
pagina for menor que isso, elas param a 4 da borda em vez de sair da
tela. */
.result-palco .result-seta--volta{ left:max(-52px, calc((100% - 100vw) / 2 + 4px)); }
.result-palco .result-seta--vai{ right:max(-52px, calc((100% - 100vw) / 2 + 4px)); }
/* ============================================================
07 · CTA FINAL
Figma 927:9269: painel de 1532x575 chapado em #0c161b, tudo centrado.
O ritmo vertical do arquivo é 88 de topo, título (147), 24, corpo
(130), 33, botão (48) e 105 de rodapé, que fecha os 575.
============================================================ */
.cta2{ width:min(var(--container), 100% - var(--gutter) * 2); margin:60px auto 0; }
.cta2-painel{
position:relative; overflow:hidden;
/* 60 de raio com canto iOS cheio, como Renan pediu em 15/09 para todo
box de CTA final. O arquivo desenha 56; 60 alinha com a primeira
dobra e e o numero que ele passou. */
border-radius:60px; background:var(--ink);
color:var(--branco); text-align:center;
padding:88px 64px 105px;
display:flex; flex-direction:column; align-items:center;
}
.cta2-titulo{
width:614px; max-width:100%; margin-bottom:24px;
font-family:var(--display); font-weight:500; font-size:42px; line-height:1.16;
}
.cta2-texto{ width:688px; max-width:100%; margin-bottom:33px; }
.cta2-texto p{ font-size:17px; line-height:1.5; }
.cta2-texto p + p{ margin-top:14px; } /* mesmo respiro do painel generico */
.cta2-btn{ height:48px; padding:0 26px; border-radius:40px; font-size:15px; font-weight:600; }
/* ============================================================
08 · RODAPÉ
Figma 928:9844: quadro de 1920x890 com a coluna de 1507 centrada.
Branco em cima, brilho dourado embaixo e a palavra metta em branco
por cima do brilho.
============================================================ */
/* a altura sai da soma das partes e fecha nos 890 do Figma sozinha:
62 de topo + 140 do bloco + 81 da linha de copyright + 163 de folga +
a palavra + 129 embaixo. assim o rodape acompanha telas menores */
/* Rodape, Figma 1306:15419 (variantes "2") lidas em 16/09; versao 3
(Figma 1485:5904, lida em 22/09) e a MESMA estrutura, so troca o fundo
atras do simbolo de degrade amarelo pra branco liso -- o "anel dourado"
que aparece parado no arquivo (no 1485:6066) e so a captura estatica
do mesmo simbolo em shader, porque o Figma nao renderiza WebGL: ao
vivo continua sendo o canvas animado, nao virou imagem.
A dobra tem tres camadas, de tras para a frente: o fundo branco liso
da propria .rod2, uma capa branca que cobre o topo e fecha com canto
grande (existe pra dar o corte arredondado onde o simbolo sangra pros
lados, mesmo sendo a mesma cor do fundo), o simbolo da Metta em WebGL
(o mesmo shader do hero, em segunda instancia) que sobe por tras da
capa e sai cortado pela base, e o conteudo.
Tudo que muda de um tamanho de tela para o outro esta nas cinco
variaveis abaixo. Os valores sairam n o a n o das cinco variantes e
sao interpolados entre elas, para a composicao nao saltar nas larguras
intermediarias. As ancoras sao 393, 1080, 1450, 1920 e 2550, as mesmas
larguras desenhadas; o bloco base traz a de 1450.
--rod-faixa altura do fundo que aparece abaixo da capa
--rod-raio canto inferior da capa
--rod-logo largura do simbolo; a altura sai da proporcao 133/123
do SVG, a mesma do hero
--rod-sobe quanto o topo do simbolo sobe acima da base da capa
--rod-topo respiro do topo da capa ate o conteudo
--rod-base respiro do conteudo ate a base da capa
A capa nao tem altura fixa: ela vai do topo ate --rod-faixa acima do
fim da dobra, e quem manda na altura e o conteudo mais os dois
respiros. Assim o rodape aguenta o texto refluir sem descolar o
desenho. */
.rod2{
--rod-faixa:457px;
--rod-raio:120px;
--rod-logo:2076px;
--rod-sobe:227px;
--rod-topo:86px;
--rod-base:229px;
position:relative; overflow:hidden;
/* 25/09: recorte redundante de propósito. Em parte dos iPhones o Safari
cortava o desenho do símbolo mas contava a área dele na altura da
página, e sobrava um vão branco de centenas de px abaixo do rodapé.
contain:paint e clip-path dizem ao navegador que nada aqui dentro
pode passar da caixa, nem para desenhar nem para rolar. */
contain:paint; clip-path:inset(0);
background:var(--branco);
padding-bottom:calc(var(--rod-base) + var(--rod-faixa));
}
/* a janela do símbolo: começa onde ele aparece (faixa + sobe acima da base)
e termina na base do rodapé. É ela quem recorta, e o símbolo lá dentro
mantém o tamanho inteiro, porque o logo-degrade.js desenha o shader na
medida da caixa dele. */
.rod2-janela{
position:absolute; z-index:2; pointer-events:none;
left:0; right:0; bottom:0; height:calc(var(--rod-faixa) + var(--rod-sobe));
overflow:hidden; contain:paint; clip-path:inset(0);
}
/* a capa branca. Ela sangra nas laterais: no arquivo a borda passa da
largura do quadro dos dois lados, entao so os cantos de baixo
aparecem */
.rod2-capa{
position:absolute; left:0; right:0; top:0; bottom:var(--rod-faixa);
z-index:1; pointer-events:none;
background:var(--branco);
border-radius:0 0 var(--rod-raio) var(--rod-raio);
}
/* o simbolo. Fica preso a base da dobra, nao ao conteudo: o topo dele
nasce --rod-sobe acima da base da capa e o resto sai pela base da
pagina. A conta de baixo e faixa + sobe - altura, com a altura vindo
da proporcao do SVG (123/133 = 0,924812). */
.rod2-simbolo{
/* dentro da janela o topo dele é o topo dela: o mesmo ponto de antes
(faixa + sobe acima da base), o resto fica recortado */
position:absolute; pointer-events:none;
left:50%; transform:translateX(-50%);
top:0;
width:var(--rod-logo); height:calc(var(--rod-logo) * 0.924812);
}
.rod2-simbolo canvas{
display:block; width:100%; height:100%;
opacity:0; transition:opacity .5s var(--ease);
}
.rod2-simbolo.esta-pronto canvas{ opacity:1; }
/* sem WebGL o degrade nao acontece; entra o SVG chapado do design
system, que e o mesmo desenho sem o relevo */
.rod2-simbolo.sem-shader{
background:url(../assets/logos/simbolo_metta_amarelo.svg) 50% 50% / 100% 100% no-repeat;
}
.rod2-in{
position:relative; z-index:3;
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
padding-top:var(--rod-topo);
}
/* --------- as cinco ancoras de largura do arquivo ---------
Fora das faixas o desenho congela no valor da ponta. Dentro delas o
valor anda em linha reta de uma ancora a outra: calc(A + (100vw - La)
* k), com k = (B - A) / (Lb - La). */
@media (max-width:392.98px){
.rod2{
--rod-faixa:226px; --rod-raio:60px; --rod-logo:649px;
--rod-sobe:67px; --rod-topo:89px; --rod-base:113px;
}
}
@media (min-width:393px) and (max-width:1079.98px){
.rod2{
--rod-faixa:calc(226px + (100vw - 393px) * .21106);
--rod-raio: calc(60px + (100vw - 393px) * .08734);
--rod-logo: calc(649px + (100vw - 393px) * 1.08151);
--rod-sobe: calc(67px + (100vw - 393px) * .20815);
--rod-topo: calc(89px + (100vw - 393px) * .05531);
--rod-base: calc(113px + (100vw - 393px) * .27802);
}
}
@media (min-width:1080px) and (max-width:1449.98px){
.rod2{
--rod-faixa:calc(371px + (100vw - 1080px) * .23243);
--rod-logo: calc(1392px + (100vw - 1080px) * 1.84865);
--rod-sobe: calc(210px + (100vw - 1080px) * .04595);
--rod-topo: calc(127px - (100vw - 1080px) * .11081);
--rod-base: calc(304px - (100vw - 1080px) * .20270);
}
}
@media (min-width:1450px) and (max-width:1919.98px){
.rod2{ --rod-topo:calc(86px + (100vw - 1450px) * .14468); }
}
@media (min-width:1920px) and (max-width:2549.98px){
.rod2{ --rod-topo:calc(154px + (100vw - 1920px) * .02063); }
}
@media (min-width:2550px){
.rod2{ --rod-topo:167px; }
}
.rod2-topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:64px; }
.rod2-marca{ width:300px; }
/* a assinatura inteira, simbolo mais palavra: 445x123 no arquivo, entao
41px de altura da a mesma palavra de 70px do menu */
.rod2-logo{ display:block; height:41px; width:auto; margin:4px 0 0 0; }
.rod2-frase{ margin-top:16px; font-size:15px; line-height:1.5; color:var(--ink); }
.rod2-colunas{ display:flex; gap:64px; }
.rod2-col{ display:flex; flex-direction:column; gap:14px; }
.rod2-titulo{ font-weight:600; font-size:13px; line-height:1.2; color:var(--ink); }
/* o titulo de Solucoes tambem e link: precisa vencer o .rod2-col a, que
e mais especifico e o deixaria com o corpo de 14 dos itens da lista */
.rod2-col a.rod2-titulo{
font-weight:600; font-size:13px; text-decoration:none;
}
/* no arquivo TODO texto do rodape e #0c161b, inclusive os links das
colunas, que aqui estavam num cinza-azul mais claro */
.rod2-col a{
font-size:14px; line-height:1.2; color:var(--ink);
transition:opacity .2s var(--ease);
}
.rod2-col a:hover{ opacity:.65; }
.rod2-base{
margin-top:49px; height:32px;
display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.rod2-copy{ font-size:14px; color:var(--ink); }
/* A rede social do arquivo (1306:15369) é quadrado, não círculo: 32 de
lado, 8 de raio, fundo branco a 68% e o ícone em #34444d, que é o
--hero-bg. O desenho anterior era círculo com traço, de outra versão. */
.rod2-social{ display:flex; gap:8px; }
.rod2-social a{
width:32px; height:32px; border-radius:8px;
background:rgba(255,255,255,.68);
display:flex; align-items:center; justify-content:center;
transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.rod2-social a:hover{ background:var(--branco); transform:translateY(-2px); }
/* três dos quatro vetores já vêm desenhados na medida do quadrado; o do
LinkedIn vem menor e centrado, como no arquivo */
.rod2-social img{ display:block; width:100%; height:100%; }
.rod2-social .rede--in img{ width:17.65px; height:17.42px; }
/* ============================================================
01b · HERO, VERSÃO 2
Figma 951:11742, quadro de 1920x890. Tudo em % da largura da tela,
que é a base de 1920 do arquivo, para a composição não descolar.
O arco é forma chapada, não é mais o símbolo 3D renderizado.
============================================================ */
.heroi2{
position:relative; overflow:hidden;
height:890px; background:var(--ink); color:var(--branco);
}
.heroi2-fundo{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.heroi2-fundo img{ position:absolute; max-width:none; }
/* a arte chega achatada do Figma, ja com foto desfocada, arco amarelo e
o recorte do empresario mesclados, no tamanho exato da dobra */
.heroi2-foto{ left:0; top:0; width:100%; height:100%; object-fit:cover; }
.heroi2-in{
position:relative; z-index:2;
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
padding-top:244px;
}
/* o arquivo pede 23 de respiro entre os quatro blocos */
.heroi2-chapeu{
font-family:var(--texto); font-weight:500; font-size:14px; line-height:1.04;
text-transform:uppercase; color:var(--branco);
}
.heroi2-titulo{
margin-top:0; width:622px; max-width:100%;
font-family:var(--display); font-weight:300; font-size:40px; line-height:.84;
letter-spacing:0; color:var(--branco);
}
.heroi2-titulo em{ font-weight:600; font-style:italic; }
.heroi2-sub{
margin-top:23px; width:456px; max-width:100%;
font-size:14.388px; line-height:1.1; color:var(--branco);
}
.heroi2-btn{
margin-top:23px; width:247px; height:57px; padding:0;
border-radius:100px; font-size:14px; font-weight:500;
}
/* ---------- banda do pé ----------
escura, de vidro, com seis logos parados. não é o carrossel da outra
hero: aqui as marcas ficam distribuídas numa faixa de 779 */
.heroi2-banda{
position:absolute; left:0; right:0; top:695px; z-index:2;
height:195px;
background:rgba(0,0,0,.2);
backdrop-filter:blur(71.15px); -webkit-backdrop-filter:blur(71.15px);
border:1px solid rgba(255,255,255,.05);
}
.heroi2-banda-in{
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
/* o arquivo nao centra o conteudo na banda: as duas colunas comecam
a 52 do topo dela */
height:100%; display:flex; align-items:flex-start; gap:118.5px;
padding-top:52px;
}
.heroi2-logos{
flex:0 1 779px; height:72px;
display:flex; align-items:center; justify-content:space-between;
}
/* os PNGs do Figma são máscara de alfa, o RGB deles é lixo: entram como
recorte sobre preenchimento branco */
.heroi2-logo{
flex:none; width:var(--w); height:var(--h);
background-color:var(--branco);
mask:var(--l) center/contain no-repeat;
-webkit-mask:var(--l) center/contain no-repeat;
}
.heroi2-logo[data-marca="vivo"]{ --l:url(../assets/hero-v2/logo-vivo-mask.png); }
.heroi2-logo[data-marca="leroy-merlin"]{ --l:url(../assets/hero-v2/logo-leroy-merlin-mask.png); }
.heroi2-logo[data-marca="panvel"]{ --l:url(../assets/hero-v2/logo-panvel-mask.png); }
.heroi2-logo[data-marca="sicoob"]{ --l:url(../assets/hero-v2/logo-sicoob-mask.png); }
.heroi2-logo[data-marca="sicredi"]{ --l:url(../assets/hero-v2/logo-sicredi-mask.png); }
.heroi2-logo[data-marca="zema"]{ --l:url(../assets/hero-v2/logo-zema-mask.png); }
.heroi2-recado{
flex:0 1 480px;
font-family:var(--display); font-weight:400; font-size:24px; line-height:1.04;
color:var(--branco);
}
.heroi2-recado em{ font-weight:600; font-style:italic; color:#bbcfd9; }
@media (max-width:1439px){
.heroi2{ height:auto; padding-bottom:215px; }
.heroi2-in{ padding-top:190px; padding-bottom:90px; }
.heroi2-banda{ top:auto; bottom:0; }
.heroi2-banda-in{ gap:56px; }
}
@media (max-width:1023px){
.heroi2-titulo{ font-size:44px; width:100%; }
.heroi2-sub{ width:100%; max-width:456px; }
.heroi2-banda{ height:auto; padding:20px 0; }
.heroi2-banda-in{ flex-direction:column; align-items:flex-start; gap:20px; }
.heroi2-logos{ flex:0 0 auto; width:100%; max-width:779px; height:auto; flex-wrap:wrap; gap:24px 32px; justify-content:flex-start; }
.heroi2-recado{ flex:0 0 auto; font-size:20px; }
}
@media (max-width:767px){
.heroi2-in{ padding-top:150px; }
.heroi2-titulo{ font-size:34px; }
.heroi2-btn{ width:100%; max-width:247px; }
.heroi2-recado{ font-size:18px; }
}
/* ============================================================
09 · CONTATO
Figma 928:9554 (lead) e 928:9649 (cliente). Os dois quadros foram
desenhados em 1440 com coluna de 1272 e margem de 84, que é a grade
base do site, então as medidas entram como estão, sem converter.
A dobra deixa de ser escura e vira clara, com degradê frio e os arcos
brancos escapando pelo canto de baixo à esquerda. O cartão nasce
dentro da faixa e transborda dela.
============================================================ */
.ct-hero{ position:relative; padding-bottom:0; }
/* a faixa só cobre os 793 do topo; o resto da dobra é branco e é por
onde o cartão passa */
.ct-faixa{
position:absolute; left:0; right:0; top:0; height:793px;
overflow:hidden; z-index:0; pointer-events:none;
/* duas camadas: o azul frio que ja existia, com as paradas novas, e por
cima dele um amarelo que nasce fora do quadro, embaixo e a direita */
background:
radial-gradient(1937px 1059px at 1374px 955px,
rgba(255,186,10,1) 0%, rgba(255,190,25,.9375) 4.38%, rgba(254,194,40,.875) 8.75%,
rgba(254,203,71,.75) 17.51%, rgba(253,220,132,.5) 35.01%,
rgba(250,253,255,0) 70.02%, rgba(255,255,255,0) 100%),
radial-gradient(1310px 716px at -160px 396px,
#e8f3f9 7.21%, #fafdff 70.02%, #ffffff 100%);
}
.ct-arcos{
position:absolute; left:-1356px; top:636px;
width:2513px; height:709.75px; max-width:none;
}
/* o simbolo borrado passa da faixa para o branco de baixo, entao ele fica
na dobra e nao dentro da faixa, que tem overflow:hidden */
.ct-borrao{
position:absolute; z-index:0; pointer-events:none;
left:33px; top:657px; width:242.67px; height:auto;
}
.ct-in{
position:relative; z-index:1;
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
padding-top:187px;
display:grid; grid-template-columns:556px minmax(0, 1fr); gap:73px;
align-items:start;
}
/* ---------- coluna da esquerda ---------- */
.ct-texto{ display:flex; flex-direction:column; gap:18px; }
/* o selo é os três retratos sobrepostos mais o rótulo, com um fio por
baixo do conjunto */
.ct-selo{
align-self:flex-start;
display:flex; align-items:center; gap:8px;
padding-bottom:8px; border-bottom:1px solid #c5e6f6;
}
.ct-avatares{ display:flex; }
.ct-avatares img{
flex:none;
width:54.25px; height:54.25px; border-radius:100px;
border:1.55px solid var(--ink); object-fit:cover; background:var(--nevoa);
}
.ct-avatares img + img{ margin-left:-10.08px; }
/* so o rotulo tem largura fixa: se a regra pegar tambem o span dos
avatares, a fileira encolhe para 97 e o texto monta em cima dela */
.ct-selo > span:last-child{
width:97px; font-weight:500; font-size:16px; line-height:1; color:var(--ink);
}
.ct-titulo{
font-family:var(--display); font-weight:600; font-size:40px; line-height:1.04;
color:var(--ink);
}
.ct-titulo i{ font-style:italic; }
.ct-titulo em{ font-style:normal; color:var(--muted); }
.ct-apoio{ font-size:16px; line-height:1.1; color:var(--ink); }
.ct-apoio p + p{ margin-top:1em; }
/* ---------- cartão da direita ---------- */
.ct-cartao{
background:var(--branco); border-radius:24px; padding:40px;
display:flex; flex-direction:column; gap:24px;
box-shadow:0 34px 15.6px rgba(95,115,126,.1);
/* a caixa deste cartao, que as linhas de escolha do .fp-* herdam:
aqui o campo e branco com fio cinza e canto 8, e nao o cinza claro
de canto 10 da Sessao */
--fp-campo-fundo:var(--branco);
--fp-campo-linha:#d8d8d8;
--fp-campo-raio:8px;
--fp-campo-alt:44px;
--fp-campo-fonte:14px;
/* sem faixa escura e sem nota, o cartao fecha em 40+16+24+500+24+50+40 */
--fp-palco-alt:500px;
}
/* o corpo some quando o painel de fim entra, e o hidden perde para o
display:flex */
.ct-cartao-corpo[hidden]{ display:none; }
.ct-cartao-corpo{ display:flex; flex-direction:column; gap:24px; }
/* o campo do arquivo tem fio próprio: cinza quando vazio, escuro quando
já tem valor. serve de regra para os inputs do site inteiro */
.ct-cartao .campo input,
.ct-cartao .campo select,
.ct-cartao .campo textarea{
border:1px solid #d8d8d8; border-radius:8px; padding:12px;
}
.ct-cartao .campo input,
.ct-cartao .campo select{ height:44px; }
.ct-cartao .campo select{ height:43px; }
.ct-cartao .campo select:valid{ border-color:var(--ink); }
.ct-cartao .campo textarea{ height:100px; min-height:100px; }
.ct-cartao .btn--escuro{
height:51px; padding:0 32px; border-radius:100px;
font-size:16px; font-weight:600;
}
/* ---------- cartões de canal, na página de cliente ---------- */
.ct-canal{
border:1px solid #d7d7d7; border-radius:16px; padding:22px 24px;
display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.ct-canal h3{
font-family:var(--display); font-weight:500; font-size:17px; line-height:1.24;
color:var(--ink);
}
.ct-canal p{ font-size:15px; line-height:1.5; color:#435965; }
.ct-canal .btn{
height:41px; padding:0 22px; border-radius:100px;
font-size:14px; font-weight:500;
}
.ct-nota{ font-size:13px; line-height:1.4; color:var(--muted); }
/* ---------- fluxo do formulário ----------
O mecanismo de etapas mora no bloco .fp-* deste arquivo, compartilhado
com a Sessao Estrategica. O que sobra aqui e so o que e do contato. */
.ct-cartao .btn--escuro[disabled]{ opacity:.35; pointer-events:none; }
/* na página de cliente o selo troca de cor e o texto desce 50 */
.ct-hero--cliente .ct-texto{ margin-top:50px; }
.ct-hero--cliente .ct-selo{ border-bottom-color:var(--muted); }
.ct-hero--cliente .ct-selo > span:last-child{ color:var(--muted); }
.ct-hero--cliente .ct-avatares img{ border-color:var(--branco); }
/* o CTA destas duas páginas é chapado, como no arquivo; as outras
páginas do wireframe seguem com o degradê antigo */
.ct-hero + .cta-dobra .painel{ background:var(--ink); }
.ct-hero + .cta-dobra{ margin-top:133px; }
@media (max-width:1023px){
.ct-in{ grid-template-columns:minmax(0, 1fr); gap:48px; padding-top:150px; }
.ct-texto{ max-width:556px; }
.ct-faixa{ height:560px; }
.ct-titulo{ font-size:32px; }
.ct-hero + .cta-dobra{ margin-top:64px; }
}
@media (max-width:767px){
.ct-in{ padding-top:120px; }
/* mesma regra da Sessao: no celular o cartao ocupa a largura da dobra e
o recuo interno cai para 16, que e o que sobra de area para preencher.
O involucro para de recuar (senao o cartao nasce 40 mais estreito que
a dobra) e quem recua passa a ser so a coluna de texto. */
.ct-cartao{ padding:24px 16px; }
/* .ct-hero no seletor porque a regra generica dos involucros de painel,
la no fim do arquivo, tem a mesma especificidade e vem depois */
body.v2 .e-painel.ct-hero .ct-in{ padding-left:0; padding-right:0; }
.ct-texto{ padding-left:20px; padding-right:20px; }
.ct-titulo{ font-size:26px; }
.ct-faixa{ height:460px; }
}
/* ============================================================
10 · PALESTRAS
Figma 949:11059. O quadro do arquivo tem 1435 e nao 1440, entao os x de
la entram aqui somados de 5. O que e coluna de conteudo foi alinhado no
container do site, 1272 a partir de 84, que e onde o arquivo tambem
coloca o header.
============================================================ */
.pal-hero{
position:relative; overflow:hidden; height:796px;
background:radial-gradient(120% 130% at 78% 72%, #ffffff 0%, #e6edf2 100%);
}
/* esta pagina foi desenhada em 1440, nao em 1920: as porcentagens saem
da divisao por 1440 */
.pal-hero-arco{
position:absolute; left:48.33%; top:138px; width:43.19%; height:auto;
z-index:0; pointer-events:none;
}
/* a foto estoura o pe da dobra e e cortada pelo overflow, como no arquivo */
.pal-hero-foto{
position:absolute; left:44.86%; top:77px; width:50.07%; height:auto;
z-index:1; pointer-events:none;
}
.pal-hero-in{
position:relative; z-index:2;
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
padding-top:217px;
}
.pal-hero-titulo{
width:570px; max-width:100%;
font-family:var(--display); font-weight:400; font-size:40px; line-height:1.04;
color:var(--ink);
}
.pal-hero-titulo em{ font-weight:600; font-style:italic; }
.pal-hero-apoio{
margin-top:18px; width:570px; max-width:100%;
font-size:18px; line-height:1.1; color:var(--ink);
}
.pal-hero-btn{ margin-top:36px; height:49px; padding:0 32px; border-radius:100px; font-size:14px; font-weight:500; }
/* ---------- faixa de pastilhas de tema ---------- */
.pal-chips-dobra{
width:min(var(--container), 100% - var(--gutter) * 2); margin:57px auto 0;
}
.pal-chips{ display:flex; flex-wrap:wrap; gap:12px; }
/* o Figma usa Arimo aqui, que esta fora do design system; fica em Inter */
.pal-chip{
padding:19px 37px; border-radius:55px;
background:#ffd771;
box-shadow:0 37px 36px rgba(0,0,0,.1), inset 0 0 12px #fff5db;
backdrop-filter:blur(62.7px); -webkit-backdrop-filter:blur(62.7px);
font-weight:400; font-size:26px; line-height:1; letter-spacing:-.01em;
text-transform:uppercase; color:#000; white-space:nowrap;
}
/* ---------- dobra de leitura presa ----------
A coluna da esquerda para no topo enquanto a lista passa. O acender dos
itens vem do driver de [data-presa] no v2.js: o item que cruza a linha
de leitura troca de cor e nao volta a apagar. */
/* a secao e mais alta que a tela de proposito: esse excedente e o curso
em que a pagina fica presa e os itens acendem um por um. --curso e
quanto de rolagem cada item ganha, e vem do numero de itens */
.pal-presa{
position:relative; background:var(--branco);
--curso:960px;
height:calc(100vh + var(--curso));
}
.pal-presa--temas{ --curso:800px; }
.pal-presa-palco{
position:sticky; top:0; height:100vh;
display:flex; align-items:center; overflow:hidden;
}
.pal-presa-in{
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
display:grid; grid-template-columns:506px minmax(0, 1fr); gap:151px;
align-items:start;
}
.pal-presa-lado{ padding-top:6px; }
.pal-presa-titulo{
margin-top:21px; font-family:var(--display); font-weight:400;
font-size:40px; line-height:1.04; color:var(--ink);
}
.pal-presa-apoio{ margin-top:27px; width:482px; max-width:100%; font-size:18px; line-height:1.52; color:var(--corpo); }
.pal-presa-lista{ display:flex; flex-direction:column; gap:7px; }
.presa-item{
padding:7px 0; border-bottom:1px solid #adc8d5;
color:#adc8d5;
transition:color .45s var(--suave), border-color .45s var(--suave);
}
.presa-item.esta-acesa{ color:var(--ink); border-bottom-color:var(--ink); }
.pal-passo{ display:grid; grid-template-columns:45px minmax(0, 1fr); gap:36px; align-items:start; }
.pal-num{ font-family:var(--display); font-weight:400; font-size:60px; line-height:1.04; color:inherit; }
.pal-passo p{ font-size:16px; line-height:1.52; color:inherit; }
.pal-tema{ display:flex; flex-direction:column; gap:8px; }
.pal-tema h3{ font-family:var(--display); font-weight:400; font-size:40px; line-height:1.04; color:inherit; }
.pal-tema p{ font-size:16px; line-height:1.52; color:inherit; }
.pal-tema p + p{ margin-top:8px; }
/* ---------- cartão amarelo do 98% ---------- */
.pal-98-dobra{ width:min(var(--container), 100% - var(--gutter) * 2); margin:44px auto 0; }
.pal-98{
position:relative; overflow:hidden;
height:446px; border-radius:40.55px; background:var(--amarelo);
}
.pal-98-textura{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; opacity:.55; pointer-events:none;
}
.pal-98-num{
position:absolute; left:41%; top:-24px; z-index:1;
font-family:var(--display); font-weight:400; font-size:422px; line-height:1.04;
letter-spacing:-.13em; color:#ffeaaa; pointer-events:none;
}
.pal-98-texto{
position:relative; z-index:2;
width:401px; max-width:100%; padding:77px 0 0 75px;
}
.pal-98-texto h2{
font-family:var(--display); font-weight:600; font-size:24px; line-height:1;
color:#000;
}
.pal-98-texto p{ margin-top:23px; width:398px; max-width:100%; font-size:16px; line-height:1.52; color:#111; }
/* ---------- Tiago ---------- */
.pal-tiago{ padding:129px 0 0; }
.pal-tiago-in{
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
display:grid; grid-template-columns:645px minmax(0, 1fr); gap:73px; align-items:start;
}
/* a colagem e posicionada em % da propria caixa, como no arquivo */
.pal-colagem{ position:relative; height:680px; }
/* cada foto tem a propria janela de corte, lida do Figma. a principal ja
vem cortada no arquivo, por isso e a unica que fica em cover simples */
.pal-colagem > span{ position:absolute; display:block; overflow:hidden; }
.pal-colagem img{ position:absolute; max-width:none; }
.pal-col-1{ left:10.08%; top:0; width:89.92%; height:440px; border-radius:23px; }
.pal-col-1 img{ inset:0; width:100%; height:100%; object-fit:cover; }
.pal-col-2{ left:0; top:144px; width:20.18%; height:189px; border-radius:16.27px;
box-shadow:-1px 23px 61.5px -9px rgba(115,143,158,.4); }
.pal-col-2 img{ left:-32.265%; top:-16.931%; width:160.56%; height:165.61%; }
.pal-col-3{ left:66.82%; top:282px; width:30.14%; height:288px; border-radius:20.9px;
box-shadow:-1px 23px 61.5px -9px rgba(115,143,158,.4);
background:radial-gradient(120% 120% at 30% 20%, #9bafe5 0%, #7988b2 60%, #56617f 100%); }
.pal-col-3 img{ left:-14.4%; top:-14.93%; width:143.5%; height:131.27%;
transform:rotate(-2.78deg); }
.pal-col-4{ left:10.08%; top:467px; width:53.33%; height:186.33px; border-radius:11.2px;
box-shadow:-1px 25px 67.8px -10px rgba(115,143,158,.4); }
.pal-col-4 img{ left:-35.577%; top:-11.209%; width:135.58%; height:167.55%; }
.pal-tiago-texto{ padding-top:155px; width:458px; max-width:100%; }
.pal-tiago-texto h2{
width:360px; max-width:100%;
font-family:var(--display); font-weight:600; font-size:38px; line-height:1.12; color:var(--ink);
}
.pal-tiago-cargo{ margin-top:9px; font-weight:600; font-size:16px; color:var(--muted); }
.pal-tiago-texto p:not(.pal-tiago-cargo){ margin-top:24px; font-size:16px; line-height:1.6; color:var(--ink); }
.pal-assinatura{ display:block; margin-top:30px; width:140px; height:auto; }
/* ---------- time da Metta ---------- */
.pal-time-dobra{ width:min(var(--container), 100% - var(--gutter) * 2); margin:126px auto 0; }
.pal-time{
border-radius:30px; background:#283845; color:var(--branco);
padding:49px 67px 56px;
}
.pal-time-topo{ display:grid; grid-template-columns:342px minmax(0, 1fr); gap:232px; align-items:start; }
.pal-time-topo h2{ font-family:var(--display); font-weight:600; font-size:38px; line-height:1.12; }
.pal-time-topo p{ width:548px; max-width:100%; margin-top:7px; font-size:16px; line-height:1.6; }
.pal-time-fotos{ margin-top:53px; display:grid; grid-template-columns:repeat(5, 1fr); gap:44px; }
.pal-time-fotos span{ display:block; height:174px; border-radius:17px; background:var(--cinza-card); }
/* ---------- onde a gente esteve ---------- */
.pal-eventos{ padding:100px 0 0; }
.pal-eventos-in{ width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto; }
.pal-eventos-titulo{
margin-top:23px;
font-family:var(--display); font-weight:500; font-size:42px; line-height:1.16; color:var(--ink);
}
/* o trilho estoura o container de proposito: os cartoes seguem para fora
da tela pela direita, como no arquivo */
/* a janela corta o que espera na lateral, mas o corte vale pela caixa de
padding: os 150 de baixo deixam a sombra funda do cartao terminar de
dissolver antes do corte, e a margem negativa devolve esse espaco ao
fluxo, entao a dobra nao muda de altura. Os 40 de cima abrem espaco
para o cartao subir no hover sem ser decepado. */
.pal-eventos-janela{
margin-top:26px; padding:40px 0 150px; margin-bottom:-150px;
overflow-x:auto; scroll-snap-type:x mandatory;
/* sem isto o snap gruda o primeiro cartao na borda da tela e come a
margem da coluna */
scroll-padding-left:calc((100vw - min(var(--container), 100vw - var(--gutter) * 2)) / 2);
-ms-overflow-style:none; scrollbar-width:none;
}
.pal-eventos-janela::-webkit-scrollbar{ display:none; }
.pal-eventos-trilho{
/* sem max-content o flex fica preso na largura da janela e os cartoes
vazam para a esquerda, ignorando a margem da coluna */
display:flex; gap:24px; width:max-content;
/* o 100% aqui seria a largura do trilho, que estoura a tela, entao a
conta da margem usa vw */
padding-left:calc((100vw - min(var(--container), 100vw - var(--gutter) * 2)) / 2);
padding-right:var(--gutter);
}
.pal-evento{
flex:none; width:412px; height:465px; scroll-snap-align:start;
background:var(--branco); border:1.39px solid rgba(150,150,150,.15);
border-radius:40px; padding:11.1px 15.3px;
box-shadow:0 78px 108.3px -60px rgba(104,126,137,.35);
}
.pal-evento-foto{
height:378px; border-radius:33.35px; overflow:hidden; background:rgba(12,22,27,.05);
}
.pal-evento-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.pal-evento-pe{
height:70.3px; padding:0 20.8px;
display:flex; flex-direction:column; justify-content:center;
}
/* o pe trocou o ano pelo cliente com a headline da palestra embaixo */
.pal-evento-cliente{
font-family:var(--display); font-weight:500; font-size:16px; line-height:1.2;
color:#435965;
}
.pal-evento-titulo{
font-family:var(--display); font-weight:500; font-size:18px; line-height:1.2;
color:var(--ink);
}
.pal-eventos + .cta-dobra{ margin-top:0; }
@media (max-width:1439px){
.pal-hero{ height:auto; padding-bottom:120px; }
.pal-hero-in{ padding-top:190px; }
.pal-hero-foto{ left:auto; right:-4%; width:46%; }
.pal-hero-arco{ left:auto; right:6%; width:40%; }
.pal-presa-in{ gap:80px; grid-template-columns:420px minmax(0, 1fr); }
.pal-98-num{ font-size:320px; left:44%; }
.pal-tiago-in{ grid-template-columns:520px minmax(0, 1fr); gap:48px; }
.pal-colagem{ height:560px; }
.pal-col-1{ height:360px; }
.pal-tiago-texto{ padding-top:80px; }
.pal-time-topo{ grid-template-columns:300px minmax(0, 1fr); gap:64px; }
.pal-time-fotos{ gap:24px; }
}
@media (max-width:1023px){
.pal-hero-titulo{ font-size:32px; width:100%; }
/* sem duas colunas nao ha o que prender: a secao volta a ter altura
natural e o JS cai sozinho na linha de leitura */
.pal-presa{ height:auto; padding:64px 0 0; }
.pal-presa-palco{ position:static; height:auto; display:block; overflow:visible; }
.pal-hero-foto, .pal-hero-arco{ display:none; }
.pal-chip{ font-size:18px; padding:14px 24px; }
.pal-presa-in{ grid-template-columns:minmax(0, 1fr); gap:40px; }
.pal-presa-titulo{ font-size:30px; }
.pal-98{ height:auto; }
.pal-98-num{ font-size:200px; left:auto; right:-2%; top:auto; bottom:-40px; }
.pal-98-texto{ padding:40px 24px; width:100%; }
.pal-98-texto p{ width:100%; }
.pal-tiago-in{ grid-template-columns:minmax(0, 1fr); gap:48px; }
.pal-colagem{ max-width:520px; }
.pal-tiago-texto{ padding-top:0; }
.pal-time{ padding:32px 24px 40px; }
.pal-time-topo{ grid-template-columns:minmax(0, 1fr); gap:20px; }
.pal-time-fotos{ grid-template-columns:repeat(3, 1fr); gap:16px; }
/* ---------- cartao de evento fora do desktop, Figma 951:11691 ----------
O cartao tinha altura travada em 465, que e a medida do desenho para
um cartao de 412. Encolhendo a largura sem soltar a altura, a foto e
o pe subiam e sobrava um vao branco embaixo: 93 no tablet e 153 no
celular. Agora a altura sai do conteudo e a foto guarda a proporcao
do arquivo (381,43 por 378), entao o respiro de cima e o de baixo
voltam a ser os mesmos. O resto e a escala de 412 para 320: respiro
11,1/15,3 vira 8,6/11,9, canto 40 vira 31, canto da foto 33,35 vira
25,9 e o pe de 70,3 vira 54,6. Os dois textos NAO encolhem junto:
abaixo de 16 e 18 o nome do cliente deixa de ler. */
.pal-evento{
width:min(320px, 82vw); height:auto;
padding:8.6px 11.9px; border-radius:31px;
}
.pal-evento-foto{
height:auto; aspect-ratio:381.434 / 378; border-radius:25.9px;
}
.pal-evento-pe{ height:54.6px; padding:0 16.2px; }
}
@media (max-width:767px){
.pal-hero-titulo{ font-size:26px; }
.pal-chip{ font-size:15px; padding:12px 20px; }
.pal-num{ font-size:40px; }
.pal-passo{ grid-template-columns:34px minmax(0, 1fr); gap:18px; }
.pal-tema h3{ font-size:28px; }
.pal-eventos-titulo{ font-size:28px; }
.pal-time-fotos{ grid-template-columns:repeat(2, 1fr); }
/* o cartao de evento mantem a medida do bloco de cima */
}
/* ---------- galeria do evento ----------
O cartao virou botao, entao ele precisa zerar o visual de botao e o
conteudo volta a se comportar como bloco. */
.pal-evento{
display:block; text-align:left; font:inherit; color:inherit;
cursor:pointer; appearance:none;
transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pal-evento:hover{ transform:translateY(-4px); box-shadow:0 88px 118px -60px rgba(0,0,0,.3); }
.pal-evento-foto{ display:block; }
.pal-evento-pe{ display:flex; flex-direction:column; justify-content:center; }
.pal-eventos-setas{
position:relative; z-index:1;
width:min(var(--container), 100% - var(--gutter) * 2); margin:26px auto 0;
display:flex; justify-content:flex-end; gap:12px;
}
/* ---------- painel do clique no evento ----------
Figma 996:6765: mosaico de cinco fotos a esquerda, ocupando dois
tercos do painel, e a coluna de texto a direita. O mosaico e um palco
de 1157x870 com as vagas em posicao fixa, que e o que mantem a
disposicao do arquivo em qualquer largura. As setas so aparecem
quando o evento tem mais de cinco fotos. */
.pal-gal-tela{
position:fixed; inset:0; z-index:200;
display:flex; align-items:center; justify-content:center;
/* 60 nos lados: a seta tem 44 e fica a 8 do painel, entao sem esse
respiro ela nasceria por baixo da borda da tela */
padding:24px 60px;
}
.pal-gal-tela[hidden]{ display:none; }
.pal-gal-fundo{ position:absolute; inset:0; background:rgba(12,22,27,.72); backdrop-filter:blur(6px); }
/* O painel nao rola: ele se dimensiona para caber inteiro na tela, em
largura e altura, mantendo as proporcoes do arquivo.
A conta: a coluna de fotos e 1157 dos 1717 do painel e o mosaico tem
proporcao 1157/870, entao a altura do painel e sempre 0,5696 vez a
largura. Invertendo, a maior largura que cabe na altura disponivel e
1,7556 vez essa altura. O menor entre isso, a largura da tela e os
1717 do arquivo e o tamanho final.
O miolo e medido em cqw, ou seja em fracao da largura do painel, e por
isso o desenho encolhe inteiro em vez de se desmontar. So o texto tem
piso: abaixo de um certo corpo ele deixaria de ser legivel, e ai e a
coluna de texto que rola, nunca o painel. */
.pal-gal{
position:relative; z-index:1; container-type:inline-size;
width:min(1717px, 100%, calc((100vh - 48px) * 1.7556));
background:var(--branco); border-radius:2.33cqw;
}
@supports (corner-shape: squircle){
.pal-gal{ corner-shape:squircle; }
}
.pal-gal-in{
display:grid;
/* minmax(0, …) e o que impede a coluna de texto de crescer com o
conteudo e roubar largura do mosaico */
grid-template-columns:minmax(0, 1157fr) minmax(0, 401fr);
gap:2.388cqw; padding:3.145cqw 3.436cqw;
}
.pal-gal-x{
position:absolute; right:1.28cqw; top:1.28cqw; z-index:2;
width:2.21cqw; height:2.21cqw; min-width:30px; min-height:30px;
border-radius:100px;
background:var(--nevoa); color:var(--ink);
display:flex; align-items:center; justify-content:center;
transition:background-color .25s var(--ease);
}
.pal-gal-x:hover{ background:var(--amarelo); }
/* O palco das fotos: as linhas sao montadas pelo js/v2.js, que mede a
largura daqui e escolhe a divisao que melhor preenche a altura. A
proporcao 1157/870 e a do arquivo e continua definindo o formato do
painel; o que mudou e que dentro dela nao ha mais vaga de medida fixa.
Cada foto entra na proporcao que tem: a caixa recebe a largura em px
do JS e a altura vem da linha, entao a imagem preenche sem corte. */
.pal-gal-fotos{
position:relative;
/* O palco tem a medida do arquivo, 1157x870, e nao muda de evento para
evento: o pop-up abre sempre do mesmo tamanho. O que muda e a divisao
da grade, que o js/v2.js escolhe pela quantidade de fotos.
O vao e o mesmo nos dois sentidos e a grade cobre o palco inteiro:
nenhuma foto fica com espaco diferente da vizinha, nem do lado nem
em cima. */
display:grid; gap:12px;
aspect-ratio:1157 / 870;
overflow:hidden;
}
.pal-gal-vaga{
position:relative; min-width:0; overflow:hidden;
border-radius:1.864cqw; background:rgba(12,22,27,.05);
}
@supports (corner-shape: squircle){
.pal-gal-vaga{ corner-shape:squircle; }
}
.pal-gal-vaga img{ width:100%; height:100%; object-fit:cover; display:block; }
/* evento sem material: o palco leva o aviso no lugar das fotos */
.pal-gal-fotos.e-marcado::after{
content:attr(data-aviso);
position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
font-size:13px; line-height:1.4; color:var(--muted-2); text-align:center;
}
.pal-gal-texto{
padding-top:2.272cqw; min-height:0; overflow-y:auto;
scrollbar-width:thin; scrollbar-color:var(--nevoa) transparent;
}
.pal-gal-cliente{
font-family:var(--display); font-weight:500; line-height:1.2; color:#435965;
font-size:max(0.932cqw, 13px);
}
.pal-gal-titulo{
font-family:var(--display); font-weight:500; line-height:1.2; color:var(--ink);
font-size:max(1.398cqw, 19px);
}
.pal-gal-corpo{
margin-top:2.038cqw; line-height:1.6; color:var(--ink);
font-size:max(0.932cqw, 14px);
}
.pal-gal-corpo p + p{ margin-top:1.165cqw; }
/* As setas vivem FORA da caixa branca, uma de cada lado, a 8 do painel e
centradas na altura dele. Cada uma e posicionada em relacao ao painel,
e por isso `right:calc(100% + 8px)` joga a da esquerda para fora pela
esquerda, sem depender de conta com a largura da tela. */
.pal-gal-setas{ display:contents; }
.pal-gal-setas[hidden]{ display:none; }
.pal-gal-setas .result-seta{
position:absolute; top:50%; transform:translateY(-50%); z-index:2;
}
.pal-gal-setas [data-passo="-1"]{ right:calc(100% + 8px); }
.pal-gal-setas [data-passo="1"]{ left:calc(100% + 8px); }
/* o contador de paginas fica no pe do painel, por dentro, e so aparece
quando o evento tem mais de uma pagina */
.pal-gal-conta{
position:absolute; left:50%; bottom:1.1cqw; transform:translateX(-50%);
font-size:14px; color:var(--muted-2);
}
.pal-gal-conta:empty{ display:none; }
@media (max-width:1023px){
/* numa tela estreita nao existe lado de fora: a seta ficaria em cima da
borda da janela. Aqui elas voltam para o pe do painel, lado a lado
com o contador, que e onde sempre estiveram no celular. */
.pal-gal-tela{ padding:24px 12px; }
.pal-gal-setas{
display:flex; align-items:center; justify-content:center; gap:12px;
margin-top:16px;
}
.pal-gal-setas .result-seta{ position:static; transform:none; }
.pal-gal-conta{ position:static; transform:none; }
.pal-gal{ width:100%; border-radius:24px; }
.pal-gal-in{ grid-template-columns:1fr; gap:24px; padding:24px; }
.pal-gal-texto{ padding-top:0; }
/* no celular a proporcao do desenho (4:3 deitado) deixaria o palco com
223 de altura numa coluna de 297, e foto nenhuma se le assim. O
tamanho continua fixo, so que medido na tela: mesma caixa para todo
evento, mais alta que larga, que e como as fotos empilham aqui. */
.pal-gal-fotos{ aspect-ratio:auto; height:min(62vh, 560px); }
}
/* ============================================================
GALERIA DE EVENTO NO CELULAR: FAIXA, Figma 1451:8950
As fotos deixam de empilhar em grade paginada e viram uma linha que
corre de lado com o dedo. Cada uma entra na propria proporcao, na
altura da faixa, entao nada e cortado e nada vira miniatura. As setas
do pe param de paginar foto e passam a trocar de EVENTO.
============================================================ */
@media (max-width:767px){
.pal-gal-in{ padding:23px; gap:20px; }
.pal-gal-fotos.e-faixa{
display:flex; height:auto; aspect-ratio:auto; gap:10px;
overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none;
/* a faixa sangra ate a borda do cartao e volta pelo padding, para a
foto seguinte aparecer cortada na beirada em vez de sumir. Os 23px
batem com o recuo lateral do arquivo (Figma 1451:8950): a foto
comeca em x=23 de um cartao de 383, e o mesmo 23 sobra do lado
direito depois do esmaecimento (383-360). */
margin:0 -23px; padding:0 23px;
/* SEM ISTO o proprio padding acima nao aparecia: com scroll-snap e
scroll-snap-align:start no filho, o navegador reajusta o scroll
inicial para o snap point mais proximo de 0, que aqui e 23 (o
inicio da 1a foto), e a faixa carrega ja rolada 23px pra dentro,
cancelando visualmente o respiro esquerdo por completo (conferido
lendo scrollLeft no navegador: chegava em 23, nao em 0). Dizer ao
snap que a "borda" e 23px pra dentro resolve, porque af 0 volta a
ser um ponto valido de encaixe. */
scroll-padding-left:23px;
/* esmaecimento da direita, mesmo mecanismo da .pal2-chips-faixa
(mask-image em vez de tarja por cima). So do lado direito: e o
que o arquivo mostra (a 2a foto apagando pro branco do cartao,
sinalizando que da pra rolar); o arquivo nao desenha o estado
"ja rolei", entao a esquerda fica sem mascara nenhuma, sempre
solida. Medido no arquivo: o esmaecimento comeca a 106px do fim
(383-277) e fecha no branco a 23px do fim (383-360), que e a
mesma medida do respiro lateral. Os valores entram como
calc(100% - Npx) pra nao depender da largura do cartao, que muda
de 390 a 767. */
-webkit-mask-image:linear-gradient(90deg, #000, #000 calc(100% - 106px), transparent calc(100% - 23px));
mask-image:linear-gradient(90deg, #000, #000 calc(100% - 106px), transparent calc(100% - 23px));
}
.pal-gal-fotos.e-faixa::-webkit-scrollbar{ display:none; }
.pal-gal-fotos.e-faixa .pal-gal-vaga{
flex:0 0 auto; height:189px; width:calc(189px * var(--ar, 1));
max-width:82vw; scroll-snap-align:start;
border-radius:20px;
}
.pal-gal-fotos.e-faixa .pal-gal-vaga img{ object-position:center 38%; }
/* as setas vao para a esquerda, no pe do cartao, e a de avancar e
amarela: e o mesmo par das outras dobras */
.pal-gal-setas{ justify-content:flex-start; gap:12px; margin-top:20px; }
.pal-gal-setas .result-seta[data-passo="1"]{ background:var(--amarelo); }
/* O arquivo mostra cliente e headline embaixo da faixa (o frame se
chama "sem resumo"), entao no celular a coluna de texto volta, mas
so com essas duas linhas: o paragrafo de descricao segue desligado
porque esse texto ainda nao existe. O seletor tem dois niveis de
proposito, para vencer a regra geral que desliga a coluna inteira e
que vem depois deste bloco no arquivo. */
.pal-gal .pal-gal-texto{ display:block; padding-top:0; }
.pal-gal .pal-gal-corpo{ display:none; }
.pal-gal .pal-gal-cliente{ font-size:16px; line-height:1.2; }
.pal-gal .pal-gal-titulo{ font-size:22px; line-height:1.2; margin-top:2px; }
}
/* ============================================================
GALERIA DE EVENTOS, COLUNA DE TEXTO DESLIGADA (14/09/2026)
Enquanto o titulo e a descricao de cada evento nao existem, o
painel mostra so o mosaico de fotos: e o layout que esta em
aprovacao, e texto de mentira no meio atrapalha a leitura dele.
PARA RELIGAR: apague este bloco inteiro. A marcacao, o JS e o
conteudo seguem no lugar, so a coluna esta escondida.
============================================================ */
.pal-gal-in{ grid-template-columns:minmax(0, 1fr); }
.pal-gal-texto{ display:none; }
/* sem a coluna ao lado, o painel encolhe em vez de esticar o mosaico: 1242
e a largura que devolve ao mosaico os 1157 do desenho (ele ocupa 93,1%
do painel, o resto e o padding lateral). A proporcao 1.31 e a do painel
sem texto, e e ela que mantem tudo dentro da altura da tela. */
.pal-gal{ width:min(1242px, 100%, calc((100vh - 48px) * 1.31)); }
.pal-98-dobra{ width:min(var(--container), 100% - var(--gutter) * 2); margin:44px auto 0; }
.pal-98{
position:relative; overflow:hidden;
height:446px; border-radius:40.55px; background:var(--amarelo);
}
.pal-98-textura{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; opacity:.55; pointer-events:none;
}
.pal-98-num{
position:absolute; left:41%; top:-24px; z-index:1;
font-family:var(--display); font-weight:400; font-size:422px; line-height:1.04;
letter-spacing:-.13em; color:#ffeaaa; pointer-events:none;
}
.pal-98-texto{
position:relative; z-index:2;
width:401px; max-width:100%; padding:77px 0 0 75px;
}
.pal-98-texto h2{
font-family:var(--display); font-weight:600; font-size:24px; line-height:1;
color:#000;
}
.pal-98-texto p{ margin-top:23px; width:398px; max-width:100%; font-size:16px; line-height:1.52; color:#111; }
/* ---------- Tiago ---------- */
.pal-tiago{ padding:129px 0 0; }
.pal-tiago-in{
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
display:grid; grid-template-columns:645px minmax(0, 1fr); gap:73px; align-items:start;
}
/* a colagem e posicionada em % da propria caixa, como no arquivo */
.pal-colagem{ position:relative; height:680px; }
/* cada foto tem a propria janela de corte, lida do Figma. a principal ja
vem cortada no arquivo, por isso e a unica que fica em cover simples */
.pal-colagem > span{ position:absolute; display:block; overflow:hidden; }
.pal-colagem img{ position:absolute; max-width:none; }
.pal-col-1{ left:10.08%; top:0; width:89.92%; height:440px; border-radius:23px; }
.pal-col-1 img{ inset:0; width:100%; height:100%; object-fit:cover; }
.pal-col-2{ left:0; top:144px; width:20.18%; height:189px; border-radius:16.27px;
box-shadow:-1px 23px 61.5px -9px rgba(115,143,158,.4); }
.pal-col-2 img{ left:-32.265%; top:-16.931%; width:160.56%; height:165.61%; }
.pal-col-3{ left:66.82%; top:282px; width:30.14%; height:288px; border-radius:20.9px;
box-shadow:-1px 23px 61.5px -9px rgba(115,143,158,.4);
background:radial-gradient(120% 120% at 30% 20%, #9bafe5 0%, #7988b2 60%, #56617f 100%); }
.pal-col-3 img{ left:-14.4%; top:-14.93%; width:143.5%; height:131.27%;
transform:rotate(-2.78deg); }
.pal-col-4{ left:10.08%; top:467px; width:53.33%; height:186.33px; border-radius:11.2px;
box-shadow:-1px 25px 67.8px -10px rgba(115,143,158,.4); }
.pal-col-4 img{ left:-35.577%; top:-11.209%; width:135.58%; height:167.55%; }
.pal-tiago-texto{ padding-top:155px; width:458px; max-width:100%; }
.pal-tiago-texto h2{
width:360px; max-width:100%;
font-family:var(--display); font-weight:600; font-size:38px; line-height:1.12; color:var(--ink);
}
.pal-tiago-cargo{ margin-top:9px; font-weight:600; font-size:16px; color:var(--muted); }
.pal-tiago-texto p:not(.pal-tiago-cargo){ margin-top:24px; font-size:16px; line-height:1.6; color:var(--ink); }
.pal-assinatura{ display:block; margin-top:30px; width:140px; height:auto; }
/* ---------- time da Metta ---------- */
.pal-time-dobra{ width:min(var(--container), 100% - var(--gutter) * 2); margin:126px auto 0; }
.pal-time{
border-radius:30px; background:#283845; color:var(--branco);
padding:49px 67px 56px;
}
.pal-time-topo{ display:grid; grid-template-columns:342px minmax(0, 1fr); gap:232px; align-items:start; }
.pal-time-topo h2{ font-family:var(--display); font-weight:600; font-size:38px; line-height:1.12; }
.pal-time-topo p{ width:548px; max-width:100%; margin-top:7px; font-size:16px; line-height:1.6; }
.pal-time-fotos{ margin-top:53px; display:grid; grid-template-columns:repeat(5, 1fr); gap:44px; }
.pal-time-fotos span{ display:block; height:174px; border-radius:17px; background:var(--cinza-card); }
/* ---------- onde a gente esteve ---------- */
.pal-eventos{ padding:100px 0 0; }
.pal-eventos-in{ width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto; }
.pal-eventos-titulo{
margin-top:23px;
font-family:var(--display); font-weight:500; font-size:42px; line-height:1.16; color:var(--ink);
}
/* o trilho estoura o container de proposito: os cartoes seguem para fora
da tela pela direita, como no arquivo */
/* a janela corta o que espera na lateral, mas o corte vale pela caixa de
padding: os 150 de baixo deixam a sombra funda do cartao terminar de
dissolver antes do corte, e a margem negativa devolve esse espaco ao
fluxo, entao a dobra nao muda de altura. Os 40 de cima abrem espaco
para o cartao subir no hover sem ser decepado. */
.pal-eventos-janela{
margin-top:26px; padding:40px 0 150px; margin-bottom:-150px;
overflow-x:auto; scroll-snap-type:x mandatory;
/* sem isto o snap gruda o primeiro cartao na borda da tela e come a
margem da coluna */
scroll-padding-left:calc((100vw - min(var(--container), 100vw - var(--gutter) * 2)) / 2);
-ms-overflow-style:none; scrollbar-width:none;
}
.pal-eventos-janela::-webkit-scrollbar{ display:none; }
.pal-eventos-trilho{
/* sem max-content o flex fica preso na largura da janela e os cartoes
vazam para a esquerda, ignorando a margem da coluna */
display:flex; gap:24px; width:max-content;
/* o 100% aqui seria a largura do trilho, que estoura a tela, entao a
conta da margem usa vw */
padding-left:calc((100vw - min(var(--container), 100vw - var(--gutter) * 2)) / 2);
padding-right:var(--gutter);
}
.pal-evento{
flex:none; width:412px; height:465px; scroll-snap-align:start;
background:var(--branco); border:1.39px solid rgba(150,150,150,.15);
border-radius:40px; padding:11.1px 15.3px;
box-shadow:0 78px 108.3px -60px rgba(104,126,137,.35);
}
.pal-evento-foto{
height:378px; border-radius:33.35px; overflow:hidden; background:rgba(12,22,27,.05);
}
.pal-evento-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.pal-evento-pe{
height:70.3px; padding:0 20.8px;
display:flex; flex-direction:column; justify-content:center;
}
/* o pe trocou o ano pelo cliente com a headline da palestra embaixo */
.pal-evento-cliente{
font-family:var(--display); font-weight:500; font-size:16px; line-height:1.2;
color:#435965;
}
.pal-evento-titulo{
font-family:var(--display); font-weight:500; font-size:18px; line-height:1.2;
color:var(--ink);
}
.pal-eventos + .cta-dobra{ margin-top:0; }
@media (max-width:1439px){
.pal-hero{ height:auto; padding-bottom:120px; }
.pal-hero-in{ padding-top:190px; }
.pal-hero-foto{ left:auto; right:-4%; width:46%; }
.pal-hero-arco{ left:auto; right:6%; width:40%; }
.pal-presa-in{ gap:80px; grid-template-columns:420px minmax(0, 1fr); }
.pal-98-num{ font-size:320px; left:44%; }
.pal-tiago-in{ grid-template-columns:520px minmax(0, 1fr); gap:48px; }
.pal-colagem{ height:560px; }
.pal-col-1{ height:360px; }
.pal-tiago-texto{ padding-top:80px; }
.pal-time-topo{ grid-template-columns:300px minmax(0, 1fr); gap:64px; }
.pal-time-fotos{ gap:24px; }
}
@media (max-width:1023px){
.pal-hero-titulo{ font-size:32px; width:100%; }
/* sem duas colunas nao ha o que prender: a secao volta a ter altura
natural e o JS cai sozinho na linha de leitura */
.pal-presa{ height:auto; padding:64px 0 0; }
.pal-presa-palco{ position:static; height:auto; display:block; overflow:visible; }
.pal-hero-foto, .pal-hero-arco{ display:none; }
.pal-chip{ font-size:18px; padding:14px 24px; }
.pal-presa-in{ grid-template-columns:minmax(0, 1fr); gap:40px; }
.pal-presa-titulo{ font-size:30px; }
.pal-98{ height:auto; }
.pal-98-num{ font-size:200px; left:auto; right:-2%; top:auto; bottom:-40px; }
.pal-98-texto{ padding:40px 24px; width:100%; }
.pal-98-texto p{ width:100%; }
.pal-tiago-in{ grid-template-columns:minmax(0, 1fr); gap:48px; }
.pal-colagem{ max-width:520px; }
.pal-tiago-texto{ padding-top:0; }
.pal-time{ padding:32px 24px 40px; }
.pal-time-topo{ grid-template-columns:minmax(0, 1fr); gap:20px; }
.pal-time-fotos{ grid-template-columns:repeat(3, 1fr); gap:16px; }
/* ---------- cartao de evento fora do desktop, Figma 951:11691 ----------
O cartao tinha altura travada em 465, que e a medida do desenho para
um cartao de 412. Encolhendo a largura sem soltar a altura, a foto e
o pe subiam e sobrava um vao branco embaixo: 93 no tablet e 153 no
celular. Agora a altura sai do conteudo e a foto guarda a proporcao
do arquivo (381,43 por 378), entao o respiro de cima e o de baixo
voltam a ser os mesmos. O resto e a escala de 412 para 320: respiro
11,1/15,3 vira 8,6/11,9, canto 40 vira 31, canto da foto 33,35 vira
25,9 e o pe de 70,3 vira 54,6. Os dois textos NAO encolhem junto:
abaixo de 16 e 18 o nome do cliente deixa de ler. */
.pal-evento{
width:min(320px, 82vw); height:auto;
padding:8.6px 11.9px; border-radius:31px;
}
.pal-evento-foto{
height:auto; aspect-ratio:381.434 / 378; border-radius:25.9px;
}
.pal-evento-pe{ height:54.6px; padding:0 16.2px; }
}
@media (max-width:767px){
.pal-hero-titulo{ font-size:26px; }
.pal-chip{ font-size:15px; padding:12px 20px; }
.pal-num{ font-size:40px; }
.pal-passo{ grid-template-columns:34px minmax(0, 1fr); gap:18px; }
.pal-tema h3{ font-size:28px; }
.pal-eventos-titulo{ font-size:28px; }
.pal-time-fotos{ grid-template-columns:repeat(2, 1fr); }
/* o cartao de evento mantem a medida do bloco de cima */
}
/* ---------- galeria do evento ----------
O cartao virou botao, entao ele precisa zerar o visual de botao e o
conteudo volta a se comportar como bloco. */
.pal-evento{
display:block; text-align:left; font:inherit; color:inherit;
cursor:pointer; appearance:none;
transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pal-evento:hover{ transform:translateY(-4px); box-shadow:0 88px 118px -60px rgba(0,0,0,.3); }
.pal-evento-foto{ display:block; }
.pal-evento-pe{ display:flex; flex-direction:column; justify-content:center; }
.pal-eventos-setas{
position:relative; z-index:1;
width:min(var(--container), 100% - var(--gutter) * 2); margin:26px auto 0;
display:flex; justify-content:flex-end; gap:12px;
}
.pal-98-dobra{ width:min(var(--container), 100% - var(--gutter) * 2); margin:44px auto 0; }
.pal-98{
position:relative; overflow:hidden;
height:446px; border-radius:40.55px; background:var(--amarelo);
}
.pal-98-textura{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; opacity:.55; pointer-events:none;
}
.pal-98-num{
position:absolute; left:41%; top:-24px; z-index:1;
font-family:var(--display); font-weight:400; font-size:422px; line-height:1.04;
letter-spacing:-.13em; color:#ffeaaa; pointer-events:none;
}
.pal-98-texto{
position:relative; z-index:2;
width:401px; max-width:100%; padding:77px 0 0 75px;
}
.pal-98-texto h2{
font-family:var(--display); font-weight:600; font-size:24px; line-height:1;
color:#000;
}
.pal-98-texto p{ margin-top:23px; width:398px; max-width:100%; font-size:16px; line-height:1.52; color:#111; }
/* ---------- Tiago ---------- */
.pal-tiago{ padding:129px 0 0; }
.pal-tiago-in{
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
display:grid; grid-template-columns:645px minmax(0, 1fr); gap:73px; align-items:start;
}
/* a colagem e posicionada em % da propria caixa, como no arquivo */
.pal-colagem{ position:relative; height:680px; }
/* cada foto tem a propria janela de corte, lida do Figma. a principal ja
vem cortada no arquivo, por isso e a unica que fica em cover simples */
.pal-colagem > span{ position:absolute; display:block; overflow:hidden; }
.pal-colagem img{ position:absolute; max-width:none; }
.pal-col-1{ left:10.08%; top:0; width:89.92%; height:440px; border-radius:23px; }
.pal-col-1 img{ inset:0; width:100%; height:100%; object-fit:cover; }
.pal-col-2{ left:0; top:144px; width:20.18%; height:189px; border-radius:16.27px;
box-shadow:-1px 23px 61.5px -9px rgba(115,143,158,.4); }
.pal-col-2 img{ left:-32.265%; top:-16.931%; width:160.56%; height:165.61%; }
.pal-col-3{ left:66.82%; top:282px; width:30.14%; height:288px; border-radius:20.9px;
box-shadow:-1px 23px 61.5px -9px rgba(115,143,158,.4);
background:radial-gradient(120% 120% at 30% 20%, #9bafe5 0%, #7988b2 60%, #56617f 100%); }
.pal-col-3 img{ left:-14.4%; top:-14.93%; width:143.5%; height:131.27%;
transform:rotate(-2.78deg); }
.pal-col-4{ left:10.08%; top:467px; width:53.33%; height:186.33px; border-radius:11.2px;
box-shadow:-1px 25px 67.8px -10px rgba(115,143,158,.4); }
.pal-col-4 img{ left:-35.577%; top:-11.209%; width:135.58%; height:167.55%; }
.pal-tiago-texto{ padding-top:155px; width:458px; max-width:100%; }
.pal-tiago-texto h2{
width:360px; max-width:100%;
font-family:var(--display); font-weight:600; font-size:38px; line-height:1.12; color:var(--ink);
}
.pal-tiago-cargo{ margin-top:9px; font-weight:600; font-size:16px; color:var(--muted); }
.pal-tiago-texto p:not(.pal-tiago-cargo){ margin-top:24px; font-size:16px; line-height:1.6; color:var(--ink); }
.pal-assinatura{ display:block; margin-top:30px; width:140px; height:auto; }
/* ---------- time da Metta ---------- */
.pal-time-dobra{ width:min(var(--container), 100% - var(--gutter) * 2); margin:126px auto 0; }
.pal-time{
border-radius:30px; background:#283845; color:var(--branco);
padding:49px 67px 56px;
}
.pal-time-topo{ display:grid; grid-template-columns:342px minmax(0, 1fr); gap:232px; align-items:start; }
.pal-time-topo h2{ font-family:var(--display); font-weight:600; font-size:38px; line-height:1.12; }
.pal-time-topo p{ width:548px; max-width:100%; margin-top:7px; font-size:16px; line-height:1.6; }
.pal-time-fotos{ margin-top:53px; display:grid; grid-template-columns:repeat(5, 1fr); gap:44px; }
.pal-time-fotos span{ display:block; height:174px; border-radius:17px; background:var(--cinza-card); }
/* ---------- onde a gente esteve ---------- */
.pal-eventos{ padding:100px 0 0; }
.pal-eventos-in{ width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto; }
.pal-eventos-titulo{
margin-top:23px;
font-family:var(--display); font-weight:500; font-size:42px; line-height:1.16; color:var(--ink);
}
/* o trilho estoura o container de proposito: os cartoes seguem para fora
da tela pela direita, como no arquivo */
/* a janela corta o que espera na lateral, mas o corte vale pela caixa de
padding: os 150 de baixo deixam a sombra funda do cartao terminar de
dissolver antes do corte, e a margem negativa devolve esse espaco ao
fluxo, entao a dobra nao muda de altura. Os 40 de cima abrem espaco
para o cartao subir no hover sem ser decepado. */
.pal-eventos-janela{
margin-top:26px; padding:40px 0 150px; margin-bottom:-150px;
overflow-x:auto; scroll-snap-type:x mandatory;
/* sem isto o snap gruda o primeiro cartao na borda da tela e come a
margem da coluna */
scroll-padding-left:calc((100vw - min(var(--container), 100vw - var(--gutter) * 2)) / 2);
-ms-overflow-style:none; scrollbar-width:none;
}
.pal-eventos-janela::-webkit-scrollbar{ display:none; }
.pal-eventos-trilho{
/* sem max-content o flex fica preso na largura da janela e os cartoes
vazam para a esquerda, ignorando a margem da coluna */
display:flex; gap:24px; width:max-content;
/* o 100% aqui seria a largura do trilho, que estoura a tela, entao a
conta da margem usa vw */
padding-left:calc((100vw - min(var(--container), 100vw - var(--gutter) * 2)) / 2);
padding-right:var(--gutter);
}
.pal-evento{
flex:none; width:412px; height:465px; scroll-snap-align:start;
background:var(--branco); border:1.39px solid rgba(150,150,150,.15);
border-radius:40px; padding:11.1px 15.3px;
box-shadow:0 78px 108.3px -60px rgba(104,126,137,.35);
}
.pal-evento-foto{
height:378px; border-radius:33.35px; overflow:hidden; background:rgba(12,22,27,.05);
}
.pal-evento-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.pal-evento-pe{
height:70.3px; padding:0 20.8px;
display:flex; flex-direction:column; justify-content:center;
}
/* o pe trocou o ano pelo cliente com a headline da palestra embaixo */
.pal-evento-cliente{
font-family:var(--display); font-weight:500; font-size:16px; line-height:1.2;
color:#435965;
}
.pal-evento-titulo{
font-family:var(--display); font-weight:500; font-size:18px; line-height:1.2;
color:var(--ink);
}
.pal-eventos + .cta-dobra{ margin-top:0; }
@media (max-width:1439px){
.pal-hero{ height:auto; padding-bottom:120px; }
.pal-hero-in{ padding-top:190px; }
.pal-hero-foto{ left:auto; right:-4%; width:46%; }
.pal-hero-arco{ left:auto; right:6%; width:40%; }
.pal-presa-in{ gap:80px; grid-template-columns:420px minmax(0, 1fr); }
.pal-98-num{ font-size:320px; left:44%; }
.pal-tiago-in{ grid-template-columns:520px minmax(0, 1fr); gap:48px; }
.pal-colagem{ height:560px; }
.pal-col-1{ height:360px; }
.pal-tiago-texto{ padding-top:80px; }
.pal-time-topo{ grid-template-columns:300px minmax(0, 1fr); gap:64px; }
.pal-time-fotos{ gap:24px; }
}
@media (max-width:1023px){
.pal-hero-titulo{ font-size:32px; width:100%; }
/* sem duas colunas nao ha o que prender: a secao volta a ter altura
natural e o JS cai sozinho na linha de leitura */
.pal-presa{ height:auto; padding:64px 0 0; }
.pal-presa-palco{ position:static; height:auto; display:block; overflow:visible; }
.pal-hero-foto, .pal-hero-arco{ display:none; }
.pal-chip{ font-size:18px; padding:14px 24px; }
.pal-presa-in{ grid-template-columns:minmax(0, 1fr); gap:40px; }
.pal-presa-titulo{ font-size:30px; }
.pal-98{ height:auto; }
.pal-98-num{ font-size:200px; left:auto; right:-2%; top:auto; bottom:-40px; }
.pal-98-texto{ padding:40px 24px; width:100%; }
.pal-98-texto p{ width:100%; }
.pal-tiago-in{ grid-template-columns:minmax(0, 1fr); gap:48px; }
.pal-colagem{ max-width:520px; }
.pal-tiago-texto{ padding-top:0; }
.pal-time{ padding:32px 24px 40px; }
.pal-time-topo{ grid-template-columns:minmax(0, 1fr); gap:20px; }
.pal-time-fotos{ grid-template-columns:repeat(3, 1fr); gap:16px; }
/* ---------- cartao de evento fora do desktop, Figma 951:11691 ----------
O cartao tinha altura travada em 465, que e a medida do desenho para
um cartao de 412. Encolhendo a largura sem soltar a altura, a foto e
o pe subiam e sobrava um vao branco embaixo: 93 no tablet e 153 no
celular. Agora a altura sai do conteudo e a foto guarda a proporcao
do arquivo (381,43 por 378), entao o respiro de cima e o de baixo
voltam a ser os mesmos. O resto e a escala de 412 para 320: respiro
11,1/15,3 vira 8,6/11,9, canto 40 vira 31, canto da foto 33,35 vira
25,9 e o pe de 70,3 vira 54,6. Os dois textos NAO encolhem junto:
abaixo de 16 e 18 o nome do cliente deixa de ler. */
.pal-evento{
width:min(320px, 82vw); height:auto;
padding:8.6px 11.9px; border-radius:31px;
}
.pal-evento-foto{
height:auto; aspect-ratio:381.434 / 378; border-radius:25.9px;
}
.pal-evento-pe{ height:54.6px; padding:0 16.2px; }
}
@media (max-width:767px){
.pal-hero-titulo{ font-size:26px; }
.pal-chip{ font-size:15px; padding:12px 20px; }
.pal-num{ font-size:40px; }
.pal-passo{ grid-template-columns:34px minmax(0, 1fr); gap:18px; }
.pal-tema h3{ font-size:28px; }
.pal-eventos-titulo{ font-size:28px; }
.pal-time-fotos{ grid-template-columns:repeat(2, 1fr); }
/* o cartao de evento mantem a medida do bloco de cima */
}
/* ---------- galeria do evento ----------
O cartao virou botao, entao ele precisa zerar o visual de botao e o
conteudo volta a se comportar como bloco. */
.pal-evento{
display:block; text-align:left; font:inherit; color:inherit;
cursor:pointer; appearance:none;
transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pal-evento:hover{ transform:translateY(-4px); box-shadow:0 88px 118px -60px rgba(0,0,0,.3); }
.pal-evento-foto{ display:block; }
.pal-evento-pe{ display:flex; flex-direction:column; justify-content:center; }
.pal-eventos-setas{
position:relative; z-index:1;
width:min(var(--container), 100% - var(--gutter) * 2); margin:26px auto 0;
display:flex; justify-content:flex-end; gap:12px;
}
/* ============================================================
11 · HERO DE RESULTADOS
Figma 951:13885, quadro de 1440x858 com coluna de 1272 em x=84. A arte
e posicionada em px relativos a coluna, ou seja com 84 ja descontado,
e por isso acompanha a coluna do site em vez de esticar com a tela.
============================================================ */
.res-hero{
position:relative; overflow:hidden;
height:858px;
/* Figma 951:12922: branco com um amarelo que nasce fora do quadro,
embaixo e a direita, e um azul frio que vem de cima pela esquerda.
Os dois sao ancorados na borda de onde nascem, para acompanharem a
tela sem escorregar do lugar. */
background:
radial-gradient(1742px 1742px at calc(100% - 134px) 855px,
rgba(255,186,10,1) 31.37%, rgba(255,190,25,.9375) 33.78%,
rgba(254,194,40,.875) 36.20%, rgba(254,203,71,.75) 41.03%,
rgba(253,220,132,.5) 50.69%, rgba(250,253,255,0) 70.02%,
rgba(255,255,255,0) 100%),
radial-gradient(1638px 1175px at -428px -486px,
#e8f3f9 7.21%, #fafdff 70.02%, #ffffff 100%),
var(--branco);
}
.res-hero-in{
position:relative; z-index:1;
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
height:742px;
}
/* ---------- colagem da direita ----------
22/09: virou uma peça só (res-arte.png), já composta com a mulher e
os 6 avatares -- antes era foto+arcos+recorte+3 minis, cada um
posicionado à mão. Continua medida a partir da borda DIREITA da tela,
não da coluna, pra colar nela em qualquer largura. */
.res-arte{ position:absolute; left:0; right:0; top:0; height:742px; z-index:0; overflow:hidden; pointer-events:none; }
.res-arte img{ position:absolute; right:0; top:0; height:100%; width:auto; max-width:none; }
/* ---------- órbita (24/09, Figma 1575:12340 "Tela 1" e 1577:12497) ----------
A peça única sai e entra a composição em camadas: fundo escuro fixo, a
mulher com desfoque progressivo e, em volta, avatares, ícones e citações
que giram em volta dela, passando por trás e pela frente. O palco tem a
medida do quadro desktop, 1360x660; quem move os itens é o js/v2.js
(bloco "órbita"), e o CSS só os põe no ponto de partida.
No celular (1577:12497) o arquivo desenhou a MESMA composição reduzida a
45,44% (a mulher vai de 607 para 275,8), então é o mesmo palco com
scale(), e a órbita gira igual. No tablet (768 a 1023) segue a dobra de
texto, que o arquivo não desenhou. */
/* o botão "Ver cases" do hero leva a #casos; sem respiro a seção parava
colada no topo e o chapéu "Nossos resultados" ficava cortado */
#casos{ scroll-margin-top:120px; }
/* 25/09, Figma 951:12941: o cabeçalho dos cases de Resultados é CENTRADO,
chapéu e título: chapéu em Inter bold 14 espaçado 1,2 no #738F9E, e o
título em Zalando medium 32/1,16 numa caixa de 800, 8 entre os dois */
.solucoes#casos .cabecalho{ justify-content:center; }
.solucoes#casos .cab-esq{ width:min(800px, 100%); align-items:center; text-align:center; gap:8px; }
.solucoes#casos .cab-esq .chapeu{
font-family:var(--texto); font-weight:700; font-size:14px; line-height:normal;
letter-spacing:1.2px; color:#738f9e;
}
.solucoes#casos .cab-esq .d-hero{
max-width:800px; font-weight:500; font-size:32px; line-height:1.16; letter-spacing:0;
}
@media (max-width:767px){
.solucoes#casos .cab-esq .d-hero{ font-size:24px; }
}
/* os "Entre em contato" da Consultoria levam ao formulário, e não ao topo
da seção: no celular o formulário fica abaixo do texto (25/09) */
#seForm{ scroll-margin-top:120px; }
.res-orbita{ display:none; }
@media (max-width:767px), (min-width:1024px){
.res-hero .res-arte{ display:none; }
.res-orbita{ display:block; position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.orb-palco{ position:absolute; width:1360px; height:660px; }
.orb-palco img{ max-width:none; }
/* desfoque PROGRESSIVO do arquivo (nítida no rosto, desfocada no corpo):
a cópia de baixo leva o desfoque inteiro (31,35, o valor do nó) e a de
cima, nítida, some por máscara de cima para baixo. As duas no mesmo
lugar, então no rosto só a nítida aparece e no corpo só a turva. */
.orb-mulher{ position:absolute; left:680px; top:10px; width:607px; height:713px; z-index:2; }
.orb-mulher--turva{ filter:blur(31.35px); }
.orb-mulher--nitida{
-webkit-mask-image:linear-gradient(to bottom, #000 42%, rgba(0,0,0,0) 74%);
mask-image:linear-gradient(to bottom, #000 42%, rgba(0,0,0,0) 74%);
}
.orb-item{
position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h);
z-index:3; will-change:transform;
}
.orb-dep{
border-radius:var(--r); overflow:hidden; background:var(--bg);
box-shadow:-7px 41px 43.9px rgba(0,0,0,.25);
}
.orb-dep--leve{ box-shadow:0 7.261px 14.107px rgba(0,0,0,.1); }
.orb-dep img{ display:block; width:100%; height:100%; }
/* desfoque do arquivo, de propósito: vale girando também */
.orb-item[style*="--blur"]{ filter:blur(var(--blur)); }
.orb-icone{
display:flex; align-items:center; justify-content:center;
border-radius:10.108px; overflow:hidden;
box-shadow:-14px 35px 27.1px rgba(29,33,36,.1);
background:0 0 / 100% 100% no-repeat;
}
.orb-icone--ouro{ background-image:url(../assets/resultados/orbita/icone-fundo-ouro.svg); }
.orb-icone--azul{ background-image:url(../assets/resultados/orbita/icone-fundo-azul.svg); }
.orb-icone--pct{ background-image:url(../assets/resultados/orbita/icone-fundo-pct.svg); }
/* os dois ícones nítidos estão a 82% do arquivo, como os avatares */
.orb-icone--ouro img{ width:19.34px; height:19.34px; }
.orb-icone--azul img{ width:19.68px; height:19.68px; }
.orb-icone--pct b{
font-family:var(--display); font-weight:600; font-size:33.173px; line-height:1.2;
color:#7e5e0c;
text-shadow:-16.586px 97.148px 104.02px rgba(0,0,0,.25), -5.339px 31.274px 33.486px rgba(0,0,0,.25);
}
/* as citações (1575:12264): Zalando Bold em #e7f5fd, centradas na
própria caixa; 100M e 192% crescem pelo contador padrão (data-conta) */
.orb-num{
display:flex; flex-direction:column; align-items:center;
font-family:var(--display); font-weight:700; line-height:1;
color:#e7f5fd; text-align:center; white-space:nowrap;
}
.orb-num b{ font-weight:700; font-size:32.718px; }
.orb-num small{ font-weight:700; text-transform:uppercase; }
.orb-num--fat small{ font-size:9.915px; }
.orb-num--cresc{ gap:3px; }
.orb-num--cresc small{ font-size:12.575px; }
.orb-num--tripl small{ font-size:11.122px; line-height:1.01; }
/* texto branco e botão amarelo sobre o fundo escuro, e a faixa de vidro
sem o contorno branco, que não existe no arquivo */
body.v2 .e-painel.res-hero .res-titulo,
body.v2 .e-painel.res-hero .res-apoio{ color:#fff; }
body.v2 .e-painel.res-hero .res-btn{ background:#ffbe18; color:#0c161b; }
body.v2 .e-painel.res-hero .res-faixa{
border:0; backdrop-filter:blur(35.6px); -webkit-backdrop-filter:blur(35.6px);
}
}
@media (min-width:1024px){
body.v2 .res-hero{ background:#273230; }
.orb-palco{ top:0; right:0; }
/* o export do quadro tem 1360; foi estendido 600 para a esquerda
repetindo a primeira coluna (sem espelho: espelhando, o degradê da
borda formava um vale escuro na emenda, visível acima do "Somos"),
para cobrir painel mais largo sem corte */
.orb-fundo{ position:absolute; left:-600px; top:0; width:1960px; height:660px; }
/* texto e faixa medidos pela borda do PAINEL, como no quadro: o bloco
de texto abre em (52, 131) com 593 de largura e a faixa de vidro em
y=553. O texto cede largura se o painel for mais estreito, para nunca
encostar no ponto mais à esquerda da órbita (660 do quadro). */
body.v2 .e-painel.res-hero .res-hero-in{ width:auto; margin:0; padding:0 0 0 52px; }
body.v2 .e-painel.res-hero .res-texto{ padding-top:131px; width:min(593px, calc(100% - 704px)); }
body.v2 .e-painel.res-hero .res-titulo em{ color:#bbcfd9; }
body.v2 .e-painel.res-hero .res-apoio{ font-size:16px; line-height:1.1; }
/* a faixa é branco a 20% sobre desfoque de fundo de 71,15 no Figma, que
no CSS é a metade (35,6). Ela termina na base do painel (107 de altura,
e não os 131 do arquivo): passando da base, o desfoque de fundo puxava
o branco da página e a faixa saía clara. */
body.v2 .e-painel.res-hero .res-faixa{ top:553px; bottom:auto; height:107px; }
/* no quadro o conteúdo da faixa centra em 57 do topo dela, não em 65 */
body.v2 .e-painel.res-hero .res-faixa-in{ height:114px; }
}
@media (max-width:767px){
/* Figma 1577:12497, 371x984. O painel cresce para 984 (declarado no
--dobra1-alt-m) para a órbita e a faixa caberem inteiras, sem nada
encavalar. O fundo é o quadro 1577:12739 exportado inteiro. */
body.v2 .e-painel.res-hero{
background:#2c3638 url(../assets/resultados/orbita/fundo-mobile.jpg) center top / cover no-repeat;
}
.orb-fundo{ display:none; }
/* o palco de 1360x660 reduzido a 45,44% e posto de modo que a mulher
caia em (27, 474) do quadro de 371: esquerda = 27 - 680 x 0,4544 =
-282, que é o centro do painel menos 467,5; topo = 474 - 10 x 0,4544 */
.orb-palco{
left:calc(50% - 467.5px); top:469.46px;
transform:scale(.4544); transform-origin:0 0;
}
/* o "triplicamos" não está no quadro do celular */
.orb-num--tripl{ display:none; }
/* texto: bloco de 291 centrado, abrindo em 49; título 24, apoio 14/1,14,
tudo branco (no celular o itálico também é branco), 18 entre os três */
body.v2 .e-painel.res-hero .res-hero-in{ padding-top:49px; }
body.v2 .e-painel.res-hero .res-titulo em{ color:#fff; }
body.v2 .e-painel.res-hero .res-apoio{ margin-top:18px; font-size:14px; line-height:1.14; }
body.v2 .e-painel.res-hero .res-btn{ margin-top:18px; }
/* faixa: começa em 775 e tem 209, com o branco a 51% (mais claro que no
desktop, pedido do Renan para ler melhor); logos em cima, números
embaixo, 30 entre eles, 37 de respiro em cima e embaixo */
body.v2 .e-painel.res-hero .res-faixa{
top:775px; bottom:auto; height:209px; padding:0;
background:rgba(255,255,255,.51);
}
body.v2 .e-painel.res-hero .res-faixa-in{
height:100%; padding:37px 0; gap:30px; justify-content:flex-start;
}
body.v2 .e-painel.res-hero .res-logos--loop{ height:41px; display:flex; align-items:center; }
/* no celular os logos são 8,35% maiores que no desktop e têm 37 entre si */
body.v2 .e-painel.res-hero .res-logo{ width:calc(var(--w) * 1.0835); height:calc(var(--h) * 1.0835); }
body.v2 .e-painel.res-hero .res-logos-grupo{ gap:37px; padding-right:37px; }
body.v2 .e-painel.res-hero .res-numeros{ gap:8.525px; justify-content:center; }
body.v2 .e-painel.res-hero .res-num{ padding:0; }
body.v2 .e-painel.res-hero .res-num:first-child{ width:157px; }
body.v2 .e-painel.res-hero .res-num:last-child{ width:142.081px; }
body.v2 .e-painel.res-hero .res-num-fio{ height:64px; }
body.v2 .e-painel.res-hero .res-num-valor{ font-size:26.979px; }
body.v2 .e-painel.res-hero .res-num:first-child .res-num-rotulo{ font-size:17.818px; }
body.v2 .e-painel.res-hero .res-num-valor--maior{ font-size:29.01px; margin-bottom:-5.667px; }
body.v2 .e-painel.res-hero .res-num:last-child .res-num-rotulo{ font-size:19.16px; }
}
@media (min-width:1440px){
/* logos em x=71 do painel, com 632 de largura; números abrindo em 799
e fechando a 115 da borda direita, nos corpos do arquivo */
body.v2 .e-painel.res-hero .res-faixa-in{ padding:0 115px 0 71px; gap:48px; }
body.v2 .e-painel.res-hero .res-num{ padding:0; }
body.v2 .e-painel.res-hero .res-num:first-child{ width:221px; }
body.v2 .e-painel.res-hero .res-num:last-child{ width:199.613px; }
body.v2 .e-painel.res-hero .res-num-valor{ font-size:37.977px; }
body.v2 .e-painel.res-hero .res-num:first-child .res-num-rotulo{ font-size:25.082px; }
body.v2 .e-painel.res-hero .res-num-valor--maior{ font-size:40.836px; margin-bottom:-7.977px; }
body.v2 .e-painel.res-hero .res-num:last-child .res-num-rotulo{ font-size:26.97px; }
}
/* ---------- coluna de texto ---------- */
.res-texto{ position:relative; z-index:2; padding-top:215px; width:591px; max-width:100%; }
.res-titulo{
font-family:var(--display); font-weight:600; font-size:40px; line-height:1.04;
color:var(--ink);
}
.res-titulo em{ font-weight:500; font-style:italic; color:#738f9e; }
.res-apoio{ margin-top:18px; font-size:18px; line-height:1.1; color:var(--ink); }
.res-btn{
margin-top:34px; height:49px; padding:0 16px; border-radius:100px;
font-size:14px; font-weight:500;
}
/* ---------- barra de vidro do pe ----------
Sangra de ponta a ponta e sobe 79px por cima do hero, e e o desfoque
dela que puxa o amarelo borrado para dentro. */
.res-faixa{
position:absolute; left:0; right:0; top:663px; z-index:2; height:195px;
background:rgba(255,255,255,.2);
border:1px solid #ffffff;
backdrop-filter:blur(71.15px); -webkit-backdrop-filter:blur(71.15px);
}
.res-faixa-in{
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
height:100%; display:flex; align-items:center; justify-content:space-between; gap:48px;
}
.res-logos{ flex:0 1 632px; display:flex; align-items:center; justify-content:space-between; }
/* carrossel em loop (24/09). A janela tem os mesmos 632 da fileira
parada e esmaece nas pontas; o trilho leva dois grupos iguais e anda
50%, então a volta emenda sem salto. O respiro entre logos é o que a
fileira parada tinha (632 menos a soma das larguras, dividido por 5 =
23). flex:none no trilho e nos grupos, senão eles encolhem para a
janela e os logos se sobrepõem. */
.res-logos.res-logos--loop{
display:block; overflow:hidden; min-width:0; max-width:632px;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.res-logos-trilho{
display:flex; flex:none; width:max-content;
animation:desliza 28s linear infinite;
}
.res-logos--loop:hover .res-logos-trilho{ animation-play-state:paused; }
.res-logos-grupo{ display:flex; flex:none; align-items:center; gap:23px; padding-right:23px; }
@media (max-width:767px){
.res-logos.res-logos--loop{ width:100%; max-width:none; min-width:0; }
.res-logos-grupo{ gap:38px; padding-right:38px; }
}
/* os PNGs do Figma sao mascara de alfa: entram como recorte sobre cor.
22/09, corrigido: estava #aac3cf (cinza-azulado claro), e o Renan
fechou a regra do site inteiro -- Resultados e Sobre Nós (que reaproveita
esta mesma função) ficam com a logo ESCURA, só Mentoria e Consultoria
ficam brancas. */
.res-logo{
flex:none; width:var(--w); height:var(--h);
background-color:var(--ink);
mask:var(--l) center/contain no-repeat;
-webkit-mask:var(--l) center/contain no-repeat;
}
.res-logo[data-marca="vivo"]{ --l:url(../assets/hero-v2/logo-vivo-mask.png); }
.res-logo[data-marca="leroy-merlin"]{ --l:url(../assets/hero-v2/logo-leroy-merlin-mask.png); }
.res-logo[data-marca="panvel"]{ --l:url(../assets/hero-v2/logo-panvel-mask.png); }
.res-logo[data-marca="sicoob"]{ --l:url(../assets/hero-v2/logo-sicoob-mask.png); }
.res-logo[data-marca="sicredi"]{ --l:url(../assets/hero-v2/logo-sicredi-mask.png); }
.res-logo[data-marca="zema"]{ --l:url(../assets/hero-v2/logo-zema-mask.png); }
.res-numeros{ flex:none; display:flex; align-items:center; gap:12px; }
.res-num{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 24px; }
/* 34 e 36 no lugar de 38 e 40,8: com o painel mais estreito que o quadro
do arquivo, "R$ 8,5bi" e "+1.000" quebravam em duas linhas dentro da
faixa de vidro. Renan pediu um corpo um pouco menor em 15/09. */
.res-num-valor{
font-family:var(--display); font-weight:400; font-size:34px; line-height:1; color:var(--ink);
white-space:nowrap;
}
.res-num-valor--maior{ font-size:36px; margin-bottom:-7px; }
.res-num-rotulo{
font-family:var(--display); font-weight:400; font-size:25px; line-height:1; color:var(--ink);
}
.res-num-fio{ width:1px; height:94px; background:#ccd3d7; }
/* ---------- grade de cases com "exibir mais" ---------- */
.cases-grade .caso-card.esta-oculto{ display:none; }
/* os que entram no clique sobem com o mesmo gesto das outras dobras */
.cases-grade .caso-card.esta-visivel{
animation:casoEntra .6s var(--suave) both;
animation-delay:var(--d, 0s);
}
/* ARMADILHA, registrada em 18/09/2026 depois de ela custar uma rodada.
Esta animação roda com `both`, e `both` mantém o último quadro para
sempre: o elemento fica com `transform:none` travado. Estilo de
animação vence QUALQUER declaração do autor, por mais específica que
seja, então um `:hover{transform:...}` no mesmo elemento não pinta e
o defeito é silencioso (a sombra do hover aparece, o movimento não).
Foi o que aconteceu com o card revelado pelo "ver mais": o .art-card
e o .caso-card subiam zero. Quem precisa mover um elemento que passa
por aqui usa `translate`, `rotate` ou `scale`, que são propriedades
separadas e compõem com o transform da animação em vez de disputar
com ele. Ver .art-card:hover (artigos.css) e .caso-card:hover
(styles.css). */
@keyframes casoEntra{
from{ opacity:0; transform:translate3d(0, 24px, 0); }
to{ opacity:1; transform:none; }
}
/* a capa da pagina do case e a mesma do card, entrando por tras do texto */
/* o hero do case sai do cinza-azulado do --hero-bg e vai para o quase-preto
da marca: sobre o cinza a foto lavava e perdia contraste. Por cima dela
entra um radial suave, que fecha a base e as bordas e deixa o miolo
respirar. Fundo e degradê vêm do Figma 1135:590. */
.hero--case{ position:relative; overflow:hidden; background:#02070a; }
.hero-case-capa{
position:absolute; inset:0; z-index:0;
width:100%; height:100%; object-fit:cover;
opacity:.28; pointer-events:none;
}
/* o centro do radial fica no primeiro quarto da altura, entao a borda de
cima cai bem no ponto em que o degradê ainda é transparente e a base,
que é a parte mais distante, fecha de vez */
/* no Figma o degradê é um segundo preenchimento DENTRO da camada de 28%,
entao ele substitui a foto em vez de se somar a ela. Aqui ele é irmão da
foto, entao a cor já entra composta: 28% de #0c161b sobre o #02070a do
fundo dá #050b0f, e a conta fecha igual em qualquer ponto do degradê */
.hero--case::after{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:radial-gradient(ellipse 140% 75% at 50% 25%,
rgba(5,11,15,0) 34%, rgba(5,11,15,1) 100%);
}
.hero--case .hero-interno{ position:relative; z-index:1; }
.cases-mais{ margin-top:40px; display:flex; justify-content:center; }
.cases-mais .btn{ height:49px; padding:0 28px; border-radius:100px; font-size:14px; font-weight:500; }
@media (max-width:1439px){
.res-hero{ height:auto; padding-bottom:195px; }
.res-hero-in{ height:auto; padding-bottom:120px; }
.res-faixa{ top:auto; bottom:0; }
}
@media (max-width:1023px){
/* sem espaco lateral a colagem sai de cena e a dobra vira texto */
.res-arte{ display:none; }
.res-texto{ padding-top:170px; width:100%; }
.res-titulo{ font-size:30px; }
.res-faixa{ height:auto; padding:20px 0; }
.res-faixa-in{ flex-direction:column; align-items:flex-start; gap:24px; }
.res-logos{ flex:0 0 auto; width:100%; max-width:632px; flex-wrap:wrap; gap:20px 28px; justify-content:flex-start; }
.res-numeros{ align-self:stretch; justify-content:flex-start; }
.res-num{ align-items:flex-start; text-align:left; padding-left:0; }
}
@media (max-width:767px){
.res-titulo{ font-size:25px; }
.res-num-valor{ font-size:26px; }
/* o -8 de recuo do desktop foi calibrado para 40,8px de corpo; com 28
ele encosta o rotulo no numero, e "+1.000" caia sobre "empresas" */
.res-num-valor--maior{ font-size:28px; margin-bottom:0; }
.res-num-rotulo{ font-size:17px; }
}
/* ============================================================
12 · QUEM SOMOS
Figma 951:13255, quadro de 1440x4619 com coluna de 1272 em x=84. Onde a
arte e posicionada em px, o valor ja vem com os 84 descontados, para ela
acompanhar a coluna do site em vez de esticar com a tela.
============================================================ */
.qs-in{ width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto; }
.qs-olho{
font-family:var(--display); font-weight:500; font-size:12px; line-height:1.2;
letter-spacing:.01em; text-transform:uppercase; color:#c9dae3;
}
.qs-olho--escuro{ color:var(--ink); }
.qs-titulo{
flex:none; width:556px; max-width:100%;
font-family:var(--display); font-weight:400; font-size:44px; line-height:1.08;
color:var(--ink);
}
.qs-titulo--largo{ width:604px; }
/* o paragrafo da direita tem largura propria em cada dobra; sem isso ele
estica e come a coluna do titulo */
.qs-apoio{ flex:none; width:696px; max-width:100%; }
.qs-apoio{ font-size:20px; line-height:1.65; color:var(--corpo); }
.qs-apoio--dir{ text-align:right; }
.qs-apoio--menor{ font-size:16px; line-height:1.48; width:627px; max-width:100%; }
.qs-apoio--estreito{ width:421px; max-width:100%; }
.qs-manifesto .qs-apoio{ font-size:16px; }
.qs-apoio p + p{ margin-top:0; }
.qs-duas{ margin-top:35px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
/* ---------- hero ---------- */
/* O fundo do painel (Figma 951:13267) vem como SVG e nao como
radial-gradient: as duas elipses do arquivo sao giradas, e e a
rotacao que inclina a mancha amarela em vez de ela escorrer reta
pela borda. Em CSS a rotacao se perde. Renan revisou o degrade em
15/09 e as matrizes do svg sao as do proprio arquivo. */
/* 22/09: Renan apontou que a primeira dobra de Sobre Nós continuava em
"box" (a largura/canto redondo que TODA primeira dobra do site ganhou
em 15/09, ver o comentário grande "PRIMEIRA DOBRA PADRÃO" mais abaixo
no arquivo) -- e o símbolo em WebGL cortava na borda por causa disso.
Essa página é a exceção: largura cheia, sem canto redondo, em
qualquer tela, não só no celular (a versão mobile já tinha esse
ajuste; agora o desktop também). O recuo vertical (121px, herdado da
regra geral) continua, só a largura/o raio saem. Tem que vir DEPOIS
da regra "PRIMEIRA DOBRA PADRÃO" no arquivo, ou perde pra ela -- por
especificidade (.qs-hero a mais) já venceria de qualquer jeito, mas
a ordem aqui também ajuda a achar as duas regras juntas. */
body.v2 .dobra[data-dobra="hero"].e-painel.qs-hero{
width:100%; border-radius:0;
}
/* a SEÇÃO fica em largura cheia (regra acima), mas o Renan foi claro: o
CONTEÚDO (chapéu, título, apoio, botão) não pode crescer junto -- tem
que continuar preso na mesma coluna do cabeçalho (--linha-site),
como em qualquer outra dobra do site, e não colado a 50px da borda
real da página (o modelo "recuo do painel" que .qs-hero-in usa nas
outras páginas, onde a seção É a coluna). Aqui as duas coisas se
separam: seção = 100%, conteúdo = --linha-site centralizado.
Só acima de 1023: abaixo disso o celular já tem seu próprio recuo
lateral calibrado (20px, ver os blocos @media mais abaixo), e essa
regra tem especificidade alta demais e pisaria nele. */
@media (min-width:1024px){
body.v2 .dobra[data-dobra="hero"].e-painel.qs-hero .qs-hero-in{
width:var(--linha-site); max-width:none; margin:0 auto;
padding:111px 0 0;
}
}
.qs-hero{
position:relative; overflow:hidden;
/* a dobra 1 do site tem 660 de padrao, mas aqui a foto dos dois e
recorte com alfa e a altura manda no tamanho dela: em 660 as maos
ficavam por baixo da faixa de logos. 700 devolve a foto inteira.
Pedido do Renan em 15/09. */
--dobra1-alt:700px;
height:742px; color:var(--ink);
background:url("../assets/quem-somos/qs-hero-luz.svg") center/100% 100% no-repeat;
}
.qs-hero-arte{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
/* 22/09: era foto, virou o símbolo em shader WebGL (mesma técnica do
rodapé v3, data-logo-degrade). Uma tem proporção própria; uma
que vira canvas via JS não tem, então aspect-ratio faz esse
papel aqui. Medidas do Figma 951:13267 (image 18: left 636, top 19,
966×935, num quadro de 1360×660), escaladas pela razão entre a altura
real do painel (742px) e a do quadro (660px) = 1.1242, porque este
.qs-hero não tem a mesma altura do quadro do arquivo (742 vs 660,
ajuste antigo de 15/09 para a foto anterior não cortar as mãos -- ver
comentário acima). A peça nasce maior que a janela e o
overflow:hidden do .qs-hero-arte corta o que sobra, tal como o anel
sangra pela borda no Figma. */
/* 22/09: node 951:13267 revisado no Figma (segunda leitura, depois do
painel virar largura cheia): image 18 passou para left 720, top 0,
884×884.4 dentro de um quadro de 1440 (a mesma largura de
.heroi3-banda/.qs-logobar). right = 1440 - (720+884) = -164, escalado
pelos mesmos 742/660 = 1.1242 do comentário acima: -184px. A primeira
tentativa (-420px, 780px de altura) foi uma correção visual manual
com a caixa ainda em "box" estreito -- com a caixa em largura cheia
agora, a conta do arquivo já resolve sozinha o conflito com o texto,
sem precisar encolher tanto. */
.qs-hero-foto{
position:absolute; right:-184px; top:0; height:962px;
aspect-ratio:884 / 856;
}
.qs-hero-foto canvas{ display:block; width:100%; height:100%; opacity:0; transition:opacity .5s var(--suave); }
.qs-hero-foto.esta-pronto canvas{ opacity:1; }
/* sem WebGL2 entra o SVG chapado do design system, igual no rodapé */
.qs-hero-foto.sem-shader{
background:url(../assets/logos/simbolo_metta_amarelo.svg) 50% 50% / 100% 100% no-repeat;
}
.qs-hero-in{
position:relative; z-index:1;
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
padding-top:189px;
}
.qs-hero-titulo{
margin-top:18px; width:589px; max-width:100%;
font-family:var(--display); font-weight:600; font-size:40px; line-height:1.04;
color:var(--ink);
}
.qs-hero-titulo em{ font-style:italic; }
.qs-hero-apoio{ margin-top:18px; width:589px; max-width:100%; font-size:18px; line-height:1.25; color:var(--ink); }
.qs-hero-linha{ margin-top:34px; display:flex; align-items:center; gap:34px; }
.qs-hero-btn{ height:49px; padding:0 16px; border-radius:100px; font-size:14px; font-weight:500; }
/* o selo veio do arquivo com fonte e medidas fora da grade; aqui ele entra
em Inter, na mesma caixa */
.qs-selo{
display:inline-flex; align-items:center; gap:7px;
height:52.5px; padding:0 11px; border-radius:13.5px;
border:1px solid rgba(115,143,158,.6);
width:187px;
font-weight:700; font-size:11.4px; line-height:1.14;
text-transform:uppercase; color:#738f9e;
}
.qs-selo img{ flex:none; width:50px; height:auto; }
/* ---------- manifesto ----------
25/09: virou a 4a dobra (antes vinha logo depois do hero). Quem vem
antes agora e o CNPJ, nao o hero, entao o respiro de cima mudou junto:
Figma da o fundo do CNPJ (951:13393) em top 2453 + altura 531 = 2984,
e o topo do acreditamos (951:13376) em 3097 -- a conta bate 113, nao
os 80 que valiam quando vinha direto do hero. No celular o gap do
Figma (1562:5359 fundo 2728+621=3349; 1099:1550 topo 3429) da 80,
por coincidencia igual ao valor antigo -- por isso a excecao mobile
mais abaixo no arquivo. */
.qs-manifesto{ padding:113px 0 0; }
/* ---------- O MERCADO (dobra 2), palco (25/09 tarde) ----------
Figma 951:13255. Dobra comeca em y 871 do quadro (hero termina em 767:
104 de vao) e o CNPJ em 3340; como o CNPJ ja traz margin-top 66, o palco
mede 3340 - 871 - 66 = 2403. Cada peca: left = x do Figma, top = y - 871,
z-index = ordem de pintura do Figma (a do HTML e a de leitura).
Palco de 1440 centrado: de 1200 a 1439 as laterais sobram para fora e
quem corta e o overflow-x do body; o conteudo (x 212 a 1276) cabe. */
.qs-merc{ padding:104px 0 0; }
.qs-mp-so-m{ display:none; }
.qs-merc-palco{
display:block; position:relative; width:1440px; height:2403px;
left:50%; margin-left:-720px;
}
.qs-merc-palco > *{ position:absolute; margin:0; }
.qs-mp-cab{ left:389px; top:0; width:662px; z-index:1;
display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
.qs-mp-titulo{ width:556px; font-family:var(--display); font-weight:400; font-size:32px; line-height:1.08; color:var(--ink); }
/* exportacao com o desfoque ja aplicado, sobre branco: multiply some com
o branco e deixa ver o que estiver por baixo */
.qs-mp-aspas{ left:243px; top:95px; width:483px; height:547px; z-index:2; mix-blend-mode:multiply; }
.qs-mp-intro{ left:689px; top:200px; width:393px; z-index:3;
font-family:var(--display); font-size:24px; line-height:1.08; color:var(--ink); }
.qs-mp-bullets{ left:689px; top:292px; width:519px; z-index:7; list-style:none; padding:0;
display:flex; flex-direction:column; align-items:flex-start; gap:17px; }
.qs-mp-bullet{
display:flex; align-items:center; gap:10px; padding:9px 13px; border-radius:13px;
background:#eef4f6; box-shadow:0 19px 22.1px -14px rgba(52,68,77,.26);
font-family:var(--display); font-size:16px; line-height:1.08; color:var(--ink);
}
.qs-mp-bullet img{ flex:none; width:25.5px; height:25.5px; }
.qs-mp-bullet span{ flex:1 0 0; text-align:center; }
/* mapa do Brasil (1589:15354) com desfoque progressivo: nitido no
litoral norte/nordeste, borrado para o sudoeste. SVG do Figma ja traz a
folga do desfoque (inset -9,5% / -9,9%); a copia nitida e o mesmo SVG
sem o filtro, mascarada em diagonal */
.qs-mp-mancha{ left:562.7px; top:534.7px; width:620.6px; height:642.6px; z-index:14; pointer-events:none; }
.qs-mp-mancha img{ position:absolute; inset:0; width:100%; height:100%; }
.qs-mp-mancha-nitida{
-webkit-mask-image:linear-gradient(to bottom left, #000 22%, transparent 52%);
mask-image:linear-gradient(to bottom left, #000 22%, transparent 52%);
}
.qs-mp-raras{ left:294px; top:655px; width:485px; z-index:16;
font-family:var(--display); font-weight:700; font-size:72.784px; line-height:1.08; color:var(--ink); }
.qs-mp-texto{ display:flex; flex-direction:column; gap:17.6px;
font-family:var(--texto); font-size:16px; line-height:1.1; color:#111; }
.qs-mp-texto p{ margin:0; }
.qs-mp-texto strong{ font-weight:700; }
.qs-mp-texto1{ left:300px; top:835px; width:444px; z-index:15; }
.qs-mp-texto2{ left:714px; top:1449px; width:396px; z-index:9; }
.qs-mp-texto3{ left:320px; top:2076px; width:393px; z-index:11; }
.qs-mp-pill{ background:var(--ink); color:#fff; font-family:var(--display); font-weight:400;
line-height:1.08; white-space:nowrap; text-align:center; }
.qs-mp-pill1{ left:300px; top:1094px; z-index:12; font-size:59.329px;
padding:22.248px 29.665px; border-radius:32.137px;
filter:drop-shadow(0 46.969px 23.979px rgba(16,29,36,.13)); }
.qs-mp-pill2{ left:300px; top:1744px; z-index:10; font-size:73.401px;
padding:27.525px 36.7px; border-radius:39.759px;
filter:drop-shadow(0 58.109px 29.666px rgba(16,29,36,.13)); }
.qs-mp-frase{ font-family:var(--display); font-size:24px; line-height:1.08; color:var(--ink); }
.qs-mp-frase strong{ font-family:var(--display); font-weight:700; }
.qs-mp-frase1{ left:320px; top:1445px; width:346px; z-index:4; }
.qs-mp-frase2{ left:320px; top:1941px; width:393px; z-index:6; }
.qs-mp-forte{ font-family:var(--display); font-weight:700; line-height:1.08; color:var(--ink); }
.qs-mp-ninguem{ left:320px; top:1531px; width:346px; font-size:62.463px; z-index:5; }
.qs-mp-dinheiro{ left:513.6px; top:1837px; width:606.5px; height:704px; z-index:8; mix-blend-mode:multiply; }
/* homem na corda (1589:15497): quadro 1064x304; a foto recortada gira
-15,51 graus dentro de uma caixa 1063,8x731 que comeca 168 acima.
O Figma aplica desfoque progressivo (pontas da corda borradas, homem
nitido): aqui sao duas copias, a borrada inteira e a nitida so no
miolo, por mascara. */
.qs-mp-corda{ left:212px; top:1126px; width:1064px; height:304px; z-index:13; pointer-events:none; }
.qs-mp-corda-in{ position:absolute; left:0; top:0; width:1064px; height:304px; }
.qs-mp-arco{ position:absolute; top:60px; width:263.269px; height:80.584px; }
.qs-mp-giro{ position:absolute; left:0; top:-168px; width:1063.788px; height:731.042px;
display:flex; align-items:center; justify-content:center; }
.qs-mp-giro > div{ flex:none; position:relative; width:968px; height:490px; transform:rotate(-15.51deg); }
.qs-mp-homem{ position:absolute; left:5.88px; top:-21.2px; width:1152px; height:537px; max-width:none; object-fit:cover; }
/* a copia borrada mora numa caixa 60px maior de cada lado: a mascara
recorta na borda da caixa, e sem essa folga o desfoque das pontas
ficava cortado reto. Ela some atras do homem (senao vira halo escuro
em volta dele) e na ponta direita, que no Figma termina antes. */
.qs-mp-homem-borrado{ position:absolute; left:-54.12px; top:-81.2px; width:1272px; height:657px;
-webkit-mask-image:linear-gradient(90deg, #000 12%, transparent 19%, transparent 45%, #000 55%, #000 79%, transparent 92%);
mask-image:linear-gradient(90deg, #000 12%, transparent 19%, transparent 45%, #000 55%, #000 79%, transparent 92%); }
.qs-mp-homem-borrado img{ position:absolute; left:60px; top:60px; width:1152px; height:537px; max-width:none; object-fit:cover; filter:blur(16.95px); }
.qs-mp-homem--nitido{
-webkit-mask-image:linear-gradient(90deg, transparent 3%, #000 12%, #000 46%, transparent 54%);
mask-image:linear-gradient(90deg, transparent 3%, #000 12%, #000 46%, transparent 54%);
}
/* celular e tablet: Figma 1099:1238 (quadro de 393). Mesmas pecas, outras
coordenadas, top = y - 853 (topo da dobra; o hero termina em 816, 37 de
vao). CNPJ em 3224 com margin-top 66: palco de 3224 - 853 - 66 = 2305.
Aspas, corda e notas no anzol sao as mesmas artes do desktop em escala
exata (o Figma do celular e o desktop reduzido: aspas x0,3208, notas
x0,4302, corda x0,46699, conferido peca a peca). O mapa tem SVG proprio.
Palco de 393 centrado; em 360 as laterais vazias sobram 16 de cada lado. */
@media (max-width:1199.98px){
.qs-merc{ padding:37px 0 0; }
.qs-merc-palco{ width:393px; height:2305px; margin-left:-196.5px; }
.qs-mp-so-d{ display:none; }
.qs-mp-so-m{ display:block; }
.qs-mp-cab{ left:24px; width:345px; }
.qs-mp-titulo{ width:100%; font-size:24px; }
.qs-mp-aspas{ left:113.4px; top:103.3px; width:154.9px; height:175.5px; }
.qs-mp-intro{ left:48px; top:272px; width:287px; font-size:18px; text-align:center; }
.qs-mp-bullets{ left:46px; top:374px; width:301px; align-items:stretch; }
/* no desktop cada pilula tem a largura do Figma no style do
; aqui
todas ocupam a coluna de 301 */
.qs-mp-bullet{ width:auto !important; }
.qs-mp-mancha{ left:77.7px; top:610.7px; width:413.6px; height:436.6px; }
.qs-mp-raras{ left:46px; top:743px; width:272px; font-size:40px; }
.qs-mp-texto{ gap:15.4px; font-size:14px; }
.qs-mp-texto1{ left:46px; top:858px; width:287px; }
.qs-mp-texto2{ left:44px; top:1407px; width:297px; text-align:center; }
.qs-mp-texto3{ left:37px; top:2015px; width:311px; text-align:center; }
.qs-mp-pill1{ left:42.32px; top:1082px; font-size:23.505px;
padding:8.814px 11.752px; border-radius:12.732px;
filter:drop-shadow(0 18.608px 9.5px rgba(16,29,36,.13)); }
.qs-mp-pill2{ left:37px; top:1647px; font-size:29.021px;
padding:10.883px 14.51px; border-radius:15.72px;
filter:drop-shadow(0 22.975px 11.729px rgba(16,29,36,.13)); }
.qs-mp-frase{ font-size:18px; text-align:center; }
.qs-mp-frase1{ left:57px; top:1240px; width:270px; }
.qs-mp-frase2{ left:42px; top:1923px; width:301px; }
.qs-mp-ninguem{ left:68px; top:1301.76px; width:248.491px; font-size:40px; text-align:center; }
.qs-mp-dinheiro{ left:25.1px; top:1687px; width:260.9px; height:302.9px; }
.qs-mp-corda{ left:-34.02px; top:1091.04px; width:496.872px; height:141.964px; }
.qs-mp-corda-in{ transform:scale(.46699); transform-origin:0 0; }
}
/* ---------- as tres palavras ----------
Cascata na diagonal: cada coluna tem 368, comeca num x proprio e desce
um degrau a mais que a anterior. Nao e grade. */
.qs-palavras{ padding:104px 0 0; }
/* 25/09, corrigido a pedido do Renan: os x do Figma (84, 516, 973) eram
medidos da borda do QUADRO, mas as colunas moram dentro do container,
que ja começa 84 para dentro. O recuo entrava duas vezes e Sustentavel
passava ~150 da largura do conteudo; os vãos ainda eram desiguais no
arquivo (64 e 89). Agora as tres colunas de 368 se distribuem por
igual dentro do container, a primeira colada na esquerda e a ultima na
direita, e a cascata continua: cada uma desce o seu --sobe. */
.qs-palavras-in{ display:flex; justify-content:space-between; align-items:flex-start; }
.qs-palavra{
flex:0 0 368px; margin-top:var(--sobe);
}
.qs-palavra h2{
font-family:var(--display); font-weight:400; font-size:30px; line-height:1.2; color:var(--ink);
}
.qs-palavra p{ margin-top:12px; font-size:18px; line-height:1.65; color:var(--corpo); }
/* a arte ja vem recortada e com o canto arredondado do Figma */
/* a altura era 425 fixa, a medida da arte de 28/ago. O Renan reexportou
as tres em 15/09 e elas passaram a 368x466 no desktop e a um formato
quase quadrado no celular, entao quem manda aqui e a proporcao da
propria arte, nao um numero preso. */
.qs-p-arte{ position:relative; aspect-ratio:368 / 466; height:auto; }
.qs-p-arte img{ display:block; width:100%; height:100%; object-fit:contain; }
.qs-palavra--leve .qs-p-arte{ margin-top:67px; }
.qs-palavra--facil .qs-p-arte{ margin-top:42px; }
.qs-palavra--sust .qs-p-arte{ margin-top:27px; }
/* ---------- CNPJ e CPF ---------- */
.qs-cnpj-dobra{ margin-top:66px; width:min(var(--container), 100% - var(--gutter) * 2); margin-left:auto; margin-right:auto; }
/* ---------- CNPJ e CPF no celular ----------
A arte de celular (351x621) tem a nevoa no pe, e o texto volta para
dentro dela: titulo em y=433 e apoio em y=509, os dois centrados. */
/* o body.v2 aqui e para ganhar da regra de 1023, que poe o texto embaixo
da arte e vem depois neste arquivo */
@media (max-width:767px){
body.v2 .qs-cnpj-texto{
position:absolute; left:0; right:0; top:69.73%; padding:0 8%;
text-align:center;
}
body.v2 .qs-cnpj-texto h2{ width:100%; text-align:center; font-size:24px; }
body.v2 .qs-cnpj-texto p{ margin-top:24px; width:100%; text-align:center; font-size:14px; line-height:1.3; }
}
/* A arte chega vazada do Figma (D03 · CNPJ E CPF, 1272x531): o painel
ja vem com o canto arredondado, a foto sangrando por cima da borda de
cima e a nevoa que abre espaco para o texto na direita. Como o recorte
e alfa do proprio png, aqui nao ha nada a cortar: a imagem entra
inteira e o texto vai por cima.
O bloco de texto abre em x=723 e y=198 dos 1272x531 do quadro, ou seja
56,84% e 37,29%. Vai em porcentagem porque a arte e fluida: ela
acompanha a linha do site, que vai de 1272 a 1511. */
.qs-cnpj{ position:relative; }
.qs-cnpj picture{ display:block; }
.qs-cnpj-arte{ display:block; width:100%; height:auto; }
.qs-cnpj-texto{
position:absolute; left:56.84%; top:37.29%; right:0; z-index:1;
}
.qs-cnpj-texto h2{
width:408px; max-width:100%; text-align:center;
font-family:var(--display); font-weight:400; font-size:44px; line-height:1.1; color:var(--ink);
}
/* 20 de respiro fecha a conta do arquivo: 198 + 96 de titulo + 20 = 314 */
.qs-cnpj-texto p{ margin-top:20px; width:424px; max-width:100%; font-size:18px; line-height:1.1; color:var(--ink); }
/* ---------- como trabalhamos ----------
25/09: passou a vir logo depois de "as tres palavras" (antes vinha
depois do CNPJ). O respiro de cima mudou junto: a coluna que desce
mais no Figma e a do Sustentavel (951:13831, top 3507 + altura 631 =
4138), e o como-trabalhamos (951:13504) comeca em 4264 -- 126 de vao,
nao os 47 antigos. No celular o bloco combinado de acreditamos+
palavras (1099:1550) termina em 3429+1794=5223 e o como-trabalhamos
(1099:1765) comeca em 5290: 67 de vao (excecao mobile mais abaixo). */
.qs-como{ padding:126px 0 0; }
.qs-cartoes{ margin-top:56px; display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; }
.qs-cartao{
background:var(--cinza-card); border-radius:53px; padding:18px 22px;
display:flex; flex-direction:column; gap:12px;
}
.qs-cartao-icone{ width:69px; height:68px; }
.qs-cartao h3{
font-family:var(--display); font-weight:400; font-size:30px; line-height:1.18; color:var(--ink);
}
.qs-cartao p{ font-size:16px; line-height:1.4; color:#435d6b; }
.qs-como + .cta-dobra{ margin-top:55px; }
@media (max-width:1439px){
.qs-titulo, .qs-titulo--largo{ font-size:36px; width:min(556px, 52%); }
.qs-palavras-in{ min-height:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; align-items:start; }
.qs-palavra{ position:static; width:auto; margin-top:0; }
.qs-palavra--facil{ margin-top:60px; }
.qs-palavra--sust{ margin-top:120px; }
.qs-cnpj-texto{ left:52%; }
.qs-cnpj-texto h2{ font-size:36px; }
}
@media (max-width:1023px){
/* no celular (Figma 1099:1239) o hero vira coluna centrada e a arte
desce para baixo do bloco de texto, sangrando 14 de cada lado */
.qs-hero{ height:auto; padding-bottom:0; display:flex; flex-direction:column; }
/* a arte vem antes no HTML porque no desktop ela é camada de fundo;
no celular ela entra no fluxo, então a ordem é invertida aqui */
.qs-hero-in{ order:1; }
.qs-hero-arte{ order:2; position:static; display:block; margin-top:34px; overflow:visible; }
.qs-hero-foto{
position:static; width:calc(100% + 28px); margin-left:-14px; height:auto;
aspect-ratio:966 / 935;
}
.qs-hero-in{ padding-top:117px; text-align:center; }
.qs-hero-titulo, .qs-hero-apoio{ width:auto; margin-left:auto; margin-right:auto; }
.qs-hero-linha{ justify-content:center; }
.qs-hero-titulo{ font-size:30px; }
.qs-duas{ flex-direction:column; gap:24px; }
.qs-titulo, .qs-titulo--largo{ width:100%; font-size:30px; }
.qs-apoio--dir{ text-align:left; }
.qs-apoio, .qs-apoio--menor, .qs-apoio--estreito{ width:100%; font-size:17px; }
.qs-palavras-in{ grid-template-columns:1fr; gap:56px; }
.qs-palavra--facil, .qs-palavra--sust{ margin-top:0; }
.qs-p-arte{ aspect-ratio:327 / 329; height:auto; }
/* entre 768 e 1023 nao existe arte propria: vale a de desktop, e o
texto desce para baixo dela */
.qs-cnpj-texto{ position:static; padding:24px 0 0; }
.qs-cnpj-texto h2{ text-align:left; width:100%; }
.qs-cnpj-texto p{ width:100%; }
.qs-cartoes{ grid-template-columns:1fr; gap:20px; }
.qs-cartao{ border-radius:32px; }
}
@media (max-width:767px){
.qs-hero-titulo{ font-size:26px; }
.qs-hero-linha{ flex-direction:column; align-items:center; gap:20px; }
.qs-palavra h2{ font-size:26px; }
.qs-cartao h3{ font-size:26px; }
/* 25/09: vaos exatos do Figma mobile pras duas dobras que trocaram de
vizinho na reordenacao (ver comentarios em .qs-manifesto e .qs-como
mais acima no arquivo) */
.qs-manifesto{ padding-top:80px; }
.qs-como{ padding-top:67px; }
}
/* ============================================================
13 · CONSULTORIA
Figma 980:14170, quadro de 1440 com coluna de 1272 em x=84. As medidas
entram 1:1 em px, dentro da coluna do site.
============================================================ */
.cs-in{ width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto; }
.cs-titulo{
font-family:var(--display); font-weight:600; font-size:40px; line-height:1.1;
color:var(--ink);
}
/* ---------- hero ---------- */
.cs-hero{
position:relative; overflow:hidden;
min-height:742px; background:var(--hero-bg); color:var(--branco);
display:flex; flex-direction:column; justify-content:flex-start;
}
/* A arte do hero chega achatada do Figma 994:4096, 1964x986: sala, arcos,
o recorte do empresario e o vulto desfocado da frente ja vem mesclados
num arquivo so, como no hero da home.
Ancorada no topo porque acima de 1440 o corte de cover come 222 de
altura, e centralizada eles saem da cabeca dele. */
.cs-hero-arte{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.cs-hero-foto{
width:100%; height:100%; object-fit:cover; object-position:center top;
display:block;
}
/* Figma 980:14183: o bloco abre em y=207 e tem 340 de altura, com 18 de
respiro entre chapeu, titulo e apoio, e 34 antes do botao. */
.cs-hero-in{
position:relative; z-index:2;
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
padding:207px 0 0;
}
/* 25/09, Figma 980:14182: o fundo novo clareia o lado do texto, então o
chapéu é o #738F9E e título e apoio são #0C161B; o apoio tem 16 */
.cs-hero-chapeu{ color:#738f9e; }
.cs-hero-titulo{
margin-top:18px; width:535px; max-width:100%;
font-family:var(--display); font-weight:600; font-size:40px; line-height:1.04;
color:var(--ink);
}
.cs-hero-apoio{
margin-top:18px; width:535px; max-width:100%;
font-size:16px; line-height:1.1; color:var(--ink);
}
.cs-hero-btn{ margin-top:34px; height:49px; padding:0 16px; font-size:14px; font-weight:500; }
.cs-hero-banda{ z-index:2; }
/* a faixa de marcas fecha o hero, encostada no pé */
/* a faixa e um vidro claro por cima da foto, como no hero da home */
.cs-hero-banda{
position:absolute; left:0; right:0; bottom:0; height:103px;
display:flex; align-items:center;
background:rgba(255,255,255,.2);
/* 70,75 no Figma, que no CSS é a metade; e sem o fio branco do topo,
que o arquivo não tem */
backdrop-filter:blur(35.4px); -webkit-backdrop-filter:blur(35.4px);
}
.cs-hero-banda .logobar{ width:100%; height:72px; background:transparent; }
/* ---------- casos em grandes operações ---------- */
/* Figma 980:14254: a dobra tem 764, o cabecalho abre em 95, os cartoes
em 235 e o pe fecha em 91. */
.cs-casos{ background:var(--branco); padding:95px 0 91px; }
.cs-casos-topo{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
/* aqui o titulo nao e o D/Statement cheio: o arquivo usa 32 numa caixa
de 523, e e isso que o faz fechar em duas linhas */
.cs-casos-topo .cs-titulo{
margin-top:8px; width:523px; max-width:100%;
font-weight:500; font-size:32px; line-height:1.16;
}
.cs-casos-btn{ flex:none; height:49px; padding:0 28px; border-radius:100px; font-size:14px; font-weight:500; }
/* 23/09, pedido do Renan com referência do Figma (node 1236:1558): volta
a ser card_caso()/.cases-grade, a MESMA grade de Resultados -- fonte
única do estilo de card de case no site. .cs-casos-fila (a esteira
antiga de .cs-caso) fica pra trás, sem uso. */
.cs-casos .cases-grade{ margin-top:43px; }
/* ---------- depoimentos com foto e citação (25/09, Figma 1585:13089) ----------
Cabeçalho centrado (65 do topo da dobra), três cartões de 393 com 19
entre eles abrindo em 213. Cada um: a foto de 224 com canto 40, borda
fina e sombra baixa; 31 abaixo, a citação em Zalando 20/1,4 com o
trecho de destaque sobre amarelo (, que acompanha a quebra de
linha); 32 abaixo, nome em Inter 18 semibold e empresa em 14. */
.cs-casos{ padding:65px 0 82px; }
.cs-casos-cab{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.cs-casos-cab .chapeu{ color:var(--ink); }
.cs-casos-cab .cs-titulo{
margin-top:8px; width:523px; max-width:100%;
font-weight:500; font-size:32px; line-height:1.16;
}
.cs-depos{
margin:51px auto 0; width:min(1216.84px, 100%);
display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:19px;
}
.cs-depo{ margin:0; display:flex; flex-direction:column; }
.cs-depo-foto{
display:block; width:100%; aspect-ratio:392.95 / 224; height:auto; object-fit:cover;
border-radius:40px; background:#ededed;
border:0.967px solid rgba(150,150,150,.15);
box-shadow:0 54.274px 75.357px -41.749px rgba(0,0,0,.25);
}
.cs-depo figcaption{ margin-top:31.22px; display:flex; flex-direction:column; gap:32px; }
/* altura fixa de 78 como no arquivo: a citação de três linhas (Grupo
Massa) passa da caixa e os nomes dos três cartões ficam alinhados */
.cs-depo-frase{
margin:0; height:78px;
font-family:var(--display); font-weight:500; font-size:20px; line-height:1.4;
color:var(--ink);
}
.cs-depo-frase mark{
background:var(--amarelo); color:inherit; border-radius:4.683px;
padding:0 3px; margin:0 -3px;
-webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.cs-depo-quem{ display:flex; flex-direction:column; gap:8px; line-height:1.04; color:var(--ink); }
.cs-depo-quem strong{ font-weight:600; font-size:18px; }
.cs-depo-quem span{ font-size:14px; }
@media (max-width:1023px){
.cs-depos{ grid-template-columns:1fr; gap:48px; width:min(520px, 100%); }
.cs-depo-frase{ height:auto; }
}
@media (max-width:767px){
.cs-casos{ padding:46px 0 44px; }
.cs-casos-cab .cs-titulo{ font-size:24px; width:min(265px, 100%); }
.cs-depos{ margin-top:32px; gap:40px; }
.cs-depo-foto{ border-radius:32px; }
.cs-depo-frase{ height:auto; font-size:18px; }
.cs-depo-quem strong{ font-size:16px; }
}
/* mesmo cartão dos eventos recentes das palestras: branco, borda fina,
canto grande e sombra baixa. Só o miolo é que vira conteúdo de case. */
.cs-casos-fila{
/* 43 e nao 46: a caixa do chapeu passou a ter os 15 do arquivo, entao
os 3px que faltavam sairam daqui */
margin-top:43px;
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
/* o cartao do arquivo e chapado: borda fina, raio 32, recuo 16 e sem
sombra. O que estava aqui era o cartao dos eventos das palestras.
---------- alinhamento de ESTILO ao card de artigo, 18/09/2026 ----------
Este card não vira o padrão inteiro porque estrutura ele não tem: sem
chapéu, sem título de texto (no lugar existe um número de destaque) e
sem botão. Isso é decisão de conteúdo, não de estilo, e não foi mexido.
O que é estilo, mexeu: canto foi para --r-grande, a mesma escala grande
que o resto dos cards do site usa; as cores hexadecimais soltas viraram
os tokens que já valem o mesmo número (--muted, --nevoa, --divisor,
zero mudança visual); e o texto ganhou o mesmo truncamento em três
linhas do .art-card, para o card não esticar se o texto crescer.
O FUNDO ficou de fora de propósito: --cinza-card virou #eff1f3 na
tarefa A, e o .cs-caso-selo (o selo do setor, ali embaixo) já usa esse
token. Se o card inteiro virasse #eff1f3 também, o selo desapareceria
dentro do próprio card, mesma cor sobre mesma cor. Fundo branco com
borda fina continua aqui por isso, não por esquecimento. */
.cs-caso{
display:flex; flex-direction:column; gap:24px;
background:var(--branco); border:1px solid var(--divisor);
border-radius:var(--r-grande); padding:16px;
transition:transform .3s var(--ease), border-color .3s var(--ease);
}
a.cs-caso:hover{ transform:translateY(-4px); border-color:#b6c4cc; }
.cs-caso-foto{
display:block; height:200px; border-radius:28px; overflow:hidden;
background:var(--nevoa); border:1px solid var(--divisor);
}
.cs-caso-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.cs-caso-vazio{
display:flex; align-items:center; justify-content:center; height:100%; padding:0 24px;
font-size:13px; line-height:1.4; text-align:center; color:var(--muted-2);
}
/* ---------- escala do texto, alinhada ao card de artigo em 18/09/2026 ----------
Este cartao continua sendo outro componente: branco com contorno, foto
embutida com recuo de 16 e sem botao, do Figma da consultoria. O que
NAO se justifica e a escala do texto andar por conta propria ao lado
do card de caso padrao, que vive na mesma pagina da mentoria.
Entao o que casa 1 para 1 passou a casar: o texto usa a mesma
entrelinha de 1,36 do resumo do padrao (era 1,5 no mesmo corpo de 14),
o numero de destaque usa o mesmo corpo e a mesma entrelinha do titulo
do padrao (--fs-t3 em 1,0, era 24 em 1,1) e o vao interno usa o mesmo
token do vao entre titulo e resumo (era 12 cravado).
O que NAO tem equivalente no padrao ficou coerente com a escala nova,
em vez de virar valor orfao: o nome do cliente segue em 16 semibold,
porque ali ele e nome proprio e nao chapeu de categoria, e o selo de
setor segue em 12. Mexer neles e decisao de conteudo, nao de escala. */
.cs-caso-info{ display:flex; flex-direction:column; gap:var(--card-gap-texto); }
.cs-caso-cliente{
font-family:var(--display); font-weight:var(--peso-semi);
font-size:16px; line-height:1.1; color:var(--muted);
}
.cs-caso-numero{
font-family:var(--display); font-weight:var(--peso-medio);
font-size:var(--fs-t3); line-height:1; color:var(--ink);
}
.cs-caso-texto{
font-size:var(--fs-corpo-s); line-height:1.36; color:var(--muted);
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
overflow:hidden;
}
.cs-caso-selo{
align-self:flex-start; margin-top:auto;
padding:6px 12px; border-radius:6px; background:var(--cinza-card);
font-weight:600; font-size:12px; color:var(--ink);
}
/* ---------- pra quem é a consultoria ---------- */
/* Figma 980:14226: 713 de dobra mais os 25 que a separam dos casos. A
arte abre em 75 e o pe fecha em 27, que e o que a sangria de baixo
ocupa. */
.cs-praquem{ background:var(--branco); padding:100px 0 27px; }
/* 25/09: de volta às medidas do Figma 980:14226. A arte (702, com a
sangria) abre em 88 e o texto em 833 com 450 de largura: 43 entre as
duas, e o texto não encosta na margem direita. */
.cs-praquem-in{ display:grid; grid-template-columns:702px minmax(0, 450px); gap:43px; justify-content:start; align-items:center; padding-left:4px; }
/* Figma 980:14227. A arte chega inteira, 662x477, com o cartao amarelo,
a palavra RESULTADO em opacidade decrescente e os dois vultos ja
mesclados. O cartao ocupa os 424 de baixo do arquivo: os 53 de cima
sao a cabeca do vulto sangrando, entao a caixa nao corta. */
/* o arquivo exporta 702x686: o cartao amarelo e 661x611 e comeca 41 a
direita e 53 abaixo do canto do PNG, que e a sangria dos vultos.
A caixa carrega a proporcao do cartao e a imagem e ancorada pela
BASE, onde a sangria e sempre 22 de 611: assim a conta vale em
qualquer largura. Ancorar pelo topo com -53px fixo cortava a cabeca
do vulto no celular, onde a arte desenha a metade do tamanho. */
.cs-praquem-arte{ position:relative; aspect-ratio:702 / 611; height:auto; }
.cs-praquem-arte img{
position:absolute; left:0; top:auto; bottom:-3.6%;
width:100%; height:auto; max-width:none; display:block;
}
.cs-praquem-texto .cs-titulo{
margin-top:8px; width:450px; max-width:100%;
font-weight:500; font-size:32px; line-height:1.1;
}
/* Figma 980:14228: cada linha ganhou um marcador quadrado escuro com seta,
alinhado ao topo da primeira linha do item, nao ao centro do item
inteiro. O gap de 16 entre itens ja vinha na escala certa (14 no
arquivo de 450, convertido pra coluna de 520 do site: 14 * 520/450
≈ 16). O marcador segue a mesma conta: 34 no arquivo vira ≈39 na
coluna do site, e o svg reaproveitado ja existe pronto em 38, o
mesmo tamanho do icone irmao em .cs-passo-icone, entao ficou nele. */
/* 25/09: medidas do arquivo, sem a escala para a coluna de 520 que havia
aqui: 14 entre itens, marcador de 34 a 11 do texto, texto 14 e o item
centrado na altura do marcador, como no Figma. */
.cs-praquem-lista{ margin-top:32px; display:flex; flex-direction:column; gap:14px; list-style:none; }
.cs-praquem-lista li{
display:flex; align-items:center; gap:11px;
font-size:14px; line-height:1.21; color:var(--ink);
}
.cs-praquem-icone{
flex:none; width:34px; height:34px;
/* 25/09: fundo amarelo e seta escura, o mesmo marcador do Protocolo
(.cs-passo-icone), a pedido do Renan */
background:url(../assets/consultoria/item-seta-amarela.svg) center/contain no-repeat;
}
/* ---------- protocolo: cabeçalho e cartões ---------- */
.cs-protocolo{ background:var(--branco); padding:74px 0 0; }
.cs-prot-topo{ width:784px; max-width:100%; margin:0 auto; text-align:center; }
.cs-prot-titulo{
margin-top:8px;
font-family:var(--display); font-weight:500; font-size:42px; line-height:1.16;
color:var(--ink);
}
/* no arquivo os dois paragrafos correm colados, sem linha vazia entre
eles: o no e um texto so, de quatro linhas e 96 de altura */
.cs-prot-corpo{ margin-top:32px; display:flex; flex-direction:column; gap:0; }
.cs-prot-corpo p{ font-size:16px; line-height:1.5; color:var(--ink); }
.cs-etapas{
margin:48px auto 0; width:min(1015px, 100%);
display:grid; grid-template-columns:repeat(5, 1fr); gap:20px;
}
.cs-etapa{
min-height:152px; padding:28px; border-radius:24px;
background:var(--amarelo); color:var(--ink);
display:flex; flex-direction:column; gap:12px;
}
.cs-etapa-letra{ font-family:var(--display); font-weight:600; font-size:44px; line-height:1; }
.cs-etapa-nome{ font-family:var(--display); font-weight:500; font-size:16px; line-height:1.21; }
/* ---------- a dobra presa das cinco etapas ----------
Três colunas: figura, trilho e texto. As duas primeiras ficam presas
com position:sticky enquanto a coluna de texto passa, então a figura
troca no lugar e o trilho vai acendendo. O JS só escreve --ativo. */
/* 118 aqui mais os 64 da margem da faixa fecham os 182 que o arquivo
deixa entre o pe do ultimo bloco e o topo do painel */
.cs-trilha{ padding:96px 0 118px; }
.cs-trilha-in{
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
display:grid; grid-template-columns:366px 24px minmax(0, 403px);
justify-content:center; gap:71px 71px;
}
/* 120 e o mesmo recuo do padding-top da coluna de texto: assim a
primeira etapa nasce na mesma linha da figura, e nao meia tela
acima dela */
.cs-figuras, .cs-rail{ position:sticky; top:120px; }
/* 496 e a altura do cartao no arquivo: 44 de rotulo, 11 de vao e 441 de
arte */
.cs-figuras{ position:sticky; height:496px; }
.cs-figura{
position:absolute; inset:0;
opacity:0; transform:translate3d(0, 14px, 0);
transition:opacity .5s var(--suave), transform .5s var(--suave);
pointer-events:none;
}
.cs-figura.esta-ativa{ opacity:1; transform:none; }
/* no arquivo o rotulo e centralizado no cartao, nao alinhado a esquerda:
as tres medidas de recuo batem, 78, 83 e 80,5 dos dois lados */
.cs-figura-rotulo{
display:flex; align-items:center; justify-content:center; gap:13px; height:44px;
font-family:var(--display); color:var(--ink);
}
.cs-figura-letra{ font-weight:600; font-size:40px; line-height:1; }
.cs-figura-nome{
padding-left:13px; border-left:1px solid rgba(12,22,27,.25);
font-weight:500; font-size:16px; line-height:1.25; max-width:150px;
}
/* o cartão vem exportado inteiro do Figma, 366x441: degradê, recorte,
arcos e moldura já vêm resolvidos na arte, então aqui é só a imagem */
.cs-figura-card{
display:block; margin-top:11px;
width:366px; max-width:100%; height:441px; object-fit:contain;
}
/* trilho de cinco etapas: a linha acende de cima para baixo */
.cs-rail{ height:536px; display:flex; flex-direction:column; align-items:center; padding-top:26px; }
.cs-rail-linha{
position:absolute; top:38px; bottom:38px; left:50%; width:2px; margin-left:-1px;
background:rgba(12,22,27,.12); border-radius:2px; overflow:hidden;
}
.cs-rail-cheio{
position:absolute; inset:0 0 auto 0;
height:calc(var(--ativo, 0) / 4 * 100%);
background:var(--amarelo);
transition:height .55s var(--suave);
}
.cs-rail-ponto{
position:relative; z-index:1; flex:none; width:24px; height:24px; border-radius:50%;
background:var(--branco); border:2px solid rgba(12,22,27,.12);
transition:background-color .4s var(--ease), border-color .4s var(--ease),
transform .4s var(--suave);
}
.cs-rail-ponto + .cs-rail-ponto{ margin-top:calc((536px - 26px - 5 * 24px) / 4); }
.cs-rail-ponto.esta-aceso{ background:var(--amarelo); border-color:var(--amarelo); }
.cs-rail-ponto.e-agora{ transform:scale(1.25); }
/* coluna de texto: cada etapa nasce apagada e acende quando é a vez dela */
/* sem folga embaixo: o pe da coluna de texto e o pe do contexto do
sticky, entao a figura solta exatamente quando o pe dela encontra
o pe do ultimo bloco. Com folga aqui a figura continuava descendo
sozinha depois que o texto acabava, e chegava perto do banner. */
.cs-textos{ display:flex; flex-direction:column; gap:140px; padding:120px 0 0; }
.cs-passo{
opacity:.22; transform:translate3d(0, 10px, 0);
transition:opacity .55s var(--suave), transform .55s var(--suave);
}
.cs-passo.esta-ativa{ opacity:1; transform:none; }
.cs-passo h3{
font-family:var(--display); font-weight:600; font-size:24px; line-height:1.07;
color:var(--ink);
}
.cs-passo-lista{ margin-top:31px; display:flex; flex-direction:column; gap:14px; }
/* 25/09, pedido do Renan: texto em #0C161B (era o #283845 do arquivo) e o
marcador amarelo com a seta escura (Figma 985:2011), no lugar do azul */
.cs-passo-lista li{
display:flex; align-items:center; gap:11px;
font-size:14px; line-height:1.08; color:#0c161b;
}
.cs-passo-icone{
flex:none; width:38px; height:38px;
background:url(../assets/consultoria/item-seta-amarela.svg) center/contain no-repeat;
}
/* ---------- racional e CTA ---------- */
/* Figma 980:14480: o painel tem 1138 de largura dentro da coluna de 1272,
ou seja ele nao ocupa a coluna inteira. Na largura cheia ele esticava, e
as fotos junto. */
.cs-racional{
position:relative; margin:64px auto 0; width:min(1138px, 100%); height:169px; border-radius:40px;
background:var(--ink); color:var(--branco);
display:flex; align-items:center; justify-content:space-between; gap:40px;
padding:0 56px;
}
@supports (corner-shape: squircle){
.cs-racional{ corner-shape:squircle; }
}
.cs-racional-texto{ flex:0 1 405px; font-size:14px; line-height:1.5; color:var(--branco); }
.cs-racional-texto strong{ font-weight:700; }
/* as duas fotos sangram por cima da borda de cima, como na home */
/* Figma 980:14525: quadro de 365x219,75 encostado no pé do painel, em
x=490 dos 1138. Ele passa 51 por cima da borda de cima.
As janelas de corte de dentro sao as mesmas da home, e por isso as
pessoas saem no tamanho real: os dois retangulos tem a mesma proporcao
la e aqui, 1,426 no da frente e 1,317 no de tras. */
.cs-racional-dupla{
position:absolute; left:43.06%; bottom:0; z-index:1;
width:32.07%; aspect-ratio:365 / 219.75; pointer-events:none;
}
.cs-racional-dupla span{ position:absolute; overflow:hidden; }
.cs-racional-dupla img{ position:absolute; max-width:none; }
.cs-racional-dir{ left:22.64%; top:5.13%; width:74.31%; height:93.69%; }
.cs-racional-dir img{ left:-0.04%; top:-8.82%; width:105.45%; height:186.08%; }
.cs-racional-esq{ left:5.49%; top:5.13%; width:80.52%; height:93.65%; }
.cs-racional-esq img{ left:-10.23%; top:-23.71%; width:110.45%; height:236.47%; }
.cs-racional-btn{ position:relative; z-index:2; flex:none; height:49px; padding:0 28px; font-size:14px; font-weight:500; }
/* ---------- como a gente trabalha ---------- */
/* Figma 980:14302: 506 de dobra, recuo de 60 em cima e embaixo e 36
entre os blocos. Os 39 que a separam do depoimento e os 38 que a
separam do contato entram nos recuos. */
.cs-garantia{ background:var(--branco); padding:99px 0 98px; }
.cs-garantia-in{ text-align:center; }
.cs-garantia-titulo{
margin:8px auto 0; width:635px; max-width:100%;
font-family:var(--display); font-weight:500; font-size:42px; line-height:1.16;
color:var(--ink);
}
.cs-garantia-corpo{
margin:36px auto 0; width:700px; max-width:100%;
font-size:16px; line-height:1.5; color:var(--ink);
}
/* no arquivo os dois paragrafos sao separados por uma linha vazia */
.cs-garantia-corpo p + p{ margin-top:24px; }
.cs-garantia-btn{ margin-top:36px; height:49px; padding:0 28px; font-size:14px; font-weight:500; }
/* ---------- contato ----------
Figma 980:14413, quadro de 1440x790. O fundo nao e branco: e um
amarelo que nasce fora do quadro, embaixo e a direita, sobre um azul
frio que vem da esquerda, com a fileira de arcos cruzando o pe.
O amarelo e o mesmo da pagina de contato; o azul tem centro e raio
proprios aqui. */
.cs-contato{ position:relative; overflow:hidden; }
.cs-contato-fundo{
position:absolute; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(1937px 1059px at 1375px 951px,
rgba(255,186,10,1) 0%, rgba(255,190,25,.9375) 4.38%, rgba(254,194,40,.875) 8.75%,
rgba(254,203,71,.75) 17.51%, rgba(253,220,132,.5) 35.01%,
rgba(250,253,255,0) 70.02%, rgba(255,255,255,0) 100%),
radial-gradient(1200px 653px at -10px 698px,
#e8f3f9 7.21%, #fafdff 70.02%, #ffffff 100%);
}
.cs-contato-arcos{
position:absolute; left:-936px; top:510px;
width:2513px; height:709.75px; max-width:none;
}
/* o cartao abre 40 acima da coluna de texto, como no arquivo */
.cs-contato-in{
position:relative; z-index:1; padding:40px 0;
display:grid; grid-template-columns:540px minmax(0, 633.5px);
gap:106px; justify-content:space-between; align-items:start;
}
.cs-contato-texto{ margin-top:40px; display:flex; flex-direction:column; align-items:flex-start; gap:21px; }
.cs-contato-titulo{
font-family:var(--display); font-weight:500; font-size:42px; line-height:1.16;
color:var(--ink);
}
.cs-contato-apoio{ width:480px; max-width:100%; font-size:16px; line-height:1.5; color:var(--ink); }
/* no arquivo os dois paragrafos sao separados por uma linha vazia */
.cs-contato-apoio p + p{ margin-top:24px; }
.cs-form h2{ margin-bottom:0; }
.cs-form-btn{ width:100%; height:auto; padding:16px 32px; border-radius:100px; font-size:16px; font-weight:600; }
@media (max-width:1439px){
.cs-praquem-in{ grid-template-columns:minmax(0, 1fr) minmax(0, 450px); gap:40px; padding-left:0; }
.cs-trilha-in{ grid-template-columns:300px 24px minmax(0, 380px); gap:40px; }
.cs-contato-in{ grid-template-columns:minmax(0, 1fr) minmax(0, 560px); gap:48px; }
}
@media (max-width:1023px){
.cs-hero-titulo, .cs-hero-apoio{ width:100%; }
.cs-hero-titulo{ font-size:30px; }
.cs-casos-topo{ flex-direction:column; align-items:flex-start; }
.cs-casos-fila{ grid-template-columns:1fr; gap:20px; }
.cs-praquem-in{ grid-template-columns:1fr; }
.cs-prot-titulo{ font-size:32px; }
.cs-etapas{ grid-template-columns:repeat(2, 1fr); }
/* sem largura para as três colunas a dobra deixa de ser presa e vira
leitura corrida, com a figura em cima de cada etapa */
.cs-trilha-in{ grid-template-columns:1fr; gap:32px; }
/* static aqui era defeito: `.cs-figura` e absoluto e perde o bloco de
contencao, entao as cinco figuras subiam para o topo da pagina e
pintavam por cima do hero. Relative tira o sticky e mantem a caixa. */
/* o `top:120px` vem da regra sticky do desktop e continua valendo em
relative: o elemento descia 120 sem liberar o espaco que ocupava, e
o titulo da primeira etapa entrava por baixo da figura */
.cs-figuras{ position:relative; top:0; }
.cs-rail{ position:static; }
.cs-rail{ display:none; }
.cs-figuras{ height:420px; }
.cs-textos{ gap:64px; padding-bottom:0; }
.cs-passo{ opacity:1; transform:none; }
.cs-racional{ height:auto; flex-direction:column; align-items:flex-start; padding:32px; gap:24px; }
.cs-racional-dupla{ display:none; }
.cs-contato-in{ grid-template-columns:1fr; }
.cs-contato-apoio{ width:100%; }
}
/* ============================================================
14 · PALESTRAS
Figma 949:11059, quadro de 1440 com coluna de 1272 em x=79. As medidas
entram 1:1 em px, dentro da coluna.
============================================================ */
.pal2-in{ width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto; }
.pal2-titulo{
font-family:var(--display); font-weight:400; font-size:40px; line-height:1.04;
color:var(--ink);
}
/* ---------- hero ----------
Quatro camadas: a foto da sala desfocada, o arco amarelo e duas cópias
do palestrante recortado, uma atrás da outra. A colagem nasce fora do
quadro pela direita, então é medida a partir da borda direita da tela
e não da coluna. */
.pal2-hero{
position:relative; overflow:hidden;
min-height:736px; background:var(--branco);
display:flex; align-items:center;
}
/* Arte reexportada em 18/09 (HERO PALESTRAS.png, 3580x1924): mudou de
proporcao, de 2,12 para 1,86. Com object-fit:cover simples a foto passa
a caber pela LARGURA e nao sobra corte horizontal nenhum, entao o
palestrante fica onde o arquivo-fonte o desenhou, mais a esquerda do
que na foto antiga. Isso empurra o paletó dele para debaixo do
paragrafo (conferido por captura, nao so por calculo). O ajuste mora
em .pal2-hero-foto: ver comentario ali. */
.pal2-hero-arte{
position:absolute; left:0; right:0; top:0; height:736px; z-index:0;
overflow:hidden; pointer-events:none; background:#eef2f5;
}
.pal2-hero-foto{
width:100%; height:100%; object-fit:cover; object-position:center top;
display:block;
}
/* Recorte extra no desktop, so a partir de 768: com a arte nova em cover
simples (sem este bloco) o ombro e o punho do Tiago avancam sobre a
coluna de texto, sobre a segunda e a terceira linha do paragrafo
(conferido por captura e por comparativo lado a lado contra o Figma
949:11071, 18/09, nao so por calculo).
O Figma recorta mais a foto do que um cover ingenuo e empurra o
palestrante para a direita. Reproduz-se isso ampliando a foto 13,5%
(largura e altura na MESMA proporcao, pra nao esticar) e cortando
esse excedente so onde nao ha conteudo: os 13,5% inteiros saem do
TOPO (ceu vazio) via top negativo, e nada sai do pe, porque o punho
dele chega quase na borda de baixo da arte original e um corte ali
cortaria a mao. Do lado horizontal, a folga toda sai da DIREITA (o
arco amarelo sobra, tem de sobra) via width maior sem left negativo;
cortar pela esquerda faria o efeito contrario e empurraria o
palestrante ainda mais para a coluna de texto. */
@media (min-width:768px){
.pal2-hero-foto{
position:absolute; left:0; top:-13.51%;
width:113.5%; height:113.5%; max-width:none;
}
}
.pal2-hero-in{
position:relative; z-index:1;
width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto;
padding:180px 0 120px;
}
/* o chapeu entra como nas outras paginas: primeiro filho do bloco, 18
antes do titulo. Aqui o hero e claro, entao ele fica na cor de texto
do site, e nao no cinza-claro que Consultoria usa sobre foto escura. */
.pal2-hero-chapeu{ color:var(--ink); }
.pal2-hero-titulo{
margin-top:18px; width:570px; max-width:100%;
font-family:var(--display); font-weight:400; font-size:40px; line-height:1.04;
color:var(--ink);
}
.pal2-hero-titulo em{ font-weight:600; font-style:italic; }
.pal2-hero-apoio{
margin-top:18px; width:570px; max-width:100%;
font-size:18px; line-height:1.1; color:var(--ink);
}
.pal2-hero-btn{ margin-top:34px; height:49px; padding:0 16px; font-size:15px; font-weight:600; }
/* ---------- chips ----------
Figma 951:11700: vidro claro com sombra baixa por fora e um brilho
creme por dentro da borda. O corpo de 26 vem do arquivo. */
.pal2-chips-dobra{ background:var(--branco); padding:52px 0 0; overflow:hidden; }
/* A faixa nao vive mais dentro da coluna: ela corre de ponta a ponta em
loop, com a mesma mecanica da faixa de clientes (.logobar-trilho, em
styles.css): grupo repetido + trilho andando em loop.
As medidas saem das do arquivo, que eram em cqw sobre a coluna de
1272: altura 4,06cqw = 51,6, recuo 2,34 = 29,8, raio 3,54 = 45, corpo
1,62 = 20,6 e vao 0,74 = 9,4. Em tela estreita elas encolhem por
clamp, porque a faixa passou a ser mais larga que a janela. */
.pal2-chips-faixa{
width:100%; overflow:hidden;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* Ate 17/09 eram 2 grupos e -50%: um grupo so e mais estreito que a
janela a partir de 1440 (onde o clamp das medidas abaixo bate no
teto e o grupo empaca em 1235px), entao no fim do ciclo a faixa
mostrava tela em branco por um instante, o "buraco" que o Renan viu.
NAO reaproveita o keyframe `desliza` (styles.css, tambem usado pela
faixa de logos de clientes, 90s): mexer nele mudaria as duas faixas
juntas. Este e proprio dos chips, com o numero de copias e o
deslocamento amarrados: CHIPS_COPIAS mora em palestras.py, e o
deslocamento por ciclo e sempre a largura de UM grupo, qualquer que
seja o numero de copias (deslocar 100/N% de um trilho com N copias
equivale a deslocar exatamente 1 grupo). Como a distancia percorrida
por ciclo nao muda com N, os 38s de hoje continuam certos: a
velocidade aparente (largura de um grupo / 38s) e a mesma de antes,
nao precisa recalcular. */
@keyframes desliza-chips{
from{ transform:translateX(0); }
to { transform:translateX(-20%); } /* -(100/CHIPS_COPIAS)%, com CHIPS_COPIAS=5 */
}
.pal2-chips{
display:flex; flex:none; width:max-content;
animation:desliza-chips 38s linear infinite;
}
.pal2-chips-faixa:hover .pal2-chips{ animation-play-state:paused; }
.pal2-chips-grupo{
display:flex; flex:none; align-items:center;
gap:clamp(7px, .74vw, 9.4px); padding-right:clamp(7px, .74vw, 9.4px);
}
.pal2-chip{
flex:none;
display:inline-flex; align-items:center; justify-content:center;
height:clamp(36px, 4.06vw, 51.6px);
padding:0 clamp(18px, 2.34vw, 29.8px);
border-radius:clamp(28px, 3.54vw, 45px);
/* cor chapada, sem sombra de fora nem sombra interna */
background:#e6edf2; box-shadow:none;
font-size:clamp(13px, 1.62vw, 20.6px); line-height:1; letter-spacing:-.01em;
text-transform:uppercase; color:var(--ink); white-space:nowrap;
}
/* ---------- como construímos ----------
Dobra presa: o cabeçalho da esquerda fica parado enquanto os seis
passos passam, e o passo da vez acende. A altura extra da seção é o
curso: sem ela o sticky nao teria por onde correr. */
.pal2-como{ background:var(--branco); padding:140px 0 0; }
.pal2-como-in{
display:grid; grid-template-columns:506px minmax(0, 562px);
justify-content:space-between; gap:60px; align-items:start;
}
.pal2-como-fixo{ position:sticky; top:150px; display:flex; flex-direction:column; gap:6px; }
.pal2-como-fixo .pal2-titulo{ margin-top:6px; }
.pal2-como-apoio{ margin-top:21px; width:482px; max-width:100%; font-size:18px; line-height:1.52; color:#111; }
/* sem folga embaixo: o pe da coluna e o pe do ultimo passo, entao o
cabecalho preso solta exatamente quando os dois pes se encontram e
dali em diante a dobra desce junto. Com a folga ele continuava
descendo sozinho depois que a lista acabava. */
.pal2-passos{ display:flex; flex-direction:column; gap:32px; list-style:none; }
/* o passo nasce apagado no azul do arquivo e acende no escuro */
.pal2-passo{
display:flex; align-items:center; gap:36px; padding:7px 0;
border-bottom:1px solid #adc8d5; color:#adc8d5;
transition:color .5s var(--suave), border-color .5s var(--suave);
}
.pal2-passo.esta-acesa{ color:var(--ink); border-bottom-color:var(--ink); }
.pal2-num{
flex:none; width:45px;
font-family:var(--display); font-weight:400; font-size:60px; line-height:1.04;
}
.pal2-passo p{ flex:1 1 auto; font-size:18px; line-height:1.52; }
/* ---------- temas ----------
Mesma mecânica, com o cabeçalho centralizado e um cartão de arte por
tema. O cartão é uma colagem de 463x221 montada peça por peça, com as
posições do arquivo. */
/* sem recuo no topo: o respiro ate o bloco amarelo ja e dado la, pelo
palco, e sao 64. Somar os dois jogaria os temas longe demais. */
/* A secao nascia colada no bloco amarelo dos 90%, sem respiro nenhum, e
o cabecalho dava 56 ate a lista. O arquivo separa os tres, e Renan
fechou 80 como piso em 16/09: 80 do bloco ate o titulo e 80 do titulo
ate o primeiro tema. */
.pal2-temas{ background:var(--branco); padding:80px 0 40px; }
/* o pe da secao fecha nos mesmos 80: a dobra seguinte ja traz 40 de
recuo proprio, entao aqui vao os outros 40 e a ultima linha de
divisao fica a 80 do primeiro bloco de baixo, como no arquivo */
/* aqui o cabecalho nao prende: ele e centralizado e a lista e mais larga,
entao preso ele passaria por cima dos temas. Quem prende e so o de
"como construimos", que fica na coluna da esquerda. */
.pal2-temas-fixo{
width:644px; max-width:100%; margin:0 auto 80px; text-align:center;
}
.pal2-temas-lista{ display:flex; flex-direction:column; list-style:none; }
/* mesmo pedido do chapéu de "como construímos" logo acima: 12 vira 14,
escopado (o rótulo "Temas" usa a .chapeu genérica do site inteiro) */
.pal2-temas-fixo .chapeu{ font-size:14px; }
.pal2-tema{
display:flex; align-items:center; justify-content:space-between; gap:40px;
padding:26px 0; border-bottom:1px solid #e6ecef;
color:#adc8d5; transition:color .5s var(--suave);
}
/* O
tambem e .presa-item, e aquela classe escurece a borda junto com
o texto quando o item acende: a linha de divisao virava preta no tema
da vez. Aqui ela fica no cinza claro nos dois estados, que e o fio
sutil do arquivo. */
.pal2-tema.esta-acesa{ color:var(--ink); border-bottom-color:#e6ecef; }
/* Fade in up com foco, item a item, no gatilho de rolagem que ja acende o
tema da vez: o bloco nasce deslocado, desfocado e mais claro, e assenta
quando a linha de leitura chega nele. O efeito vai nos dois filhos e
nao no
, senao o blur pegaria a borda e o fio sumiria. */
.pal2-tema-texto, .pal2-tema-arte{
opacity:.55; filter:blur(4px); transform:translate3d(0, 22px, 0);
transition:opacity .6s var(--suave), filter .6s var(--suave),
transform .6s var(--suave);
}
.pal2-tema.esta-acesa .pal2-tema-texto,
.pal2-tema.esta-acesa .pal2-tema-arte{
opacity:1; filter:blur(0); transform:none;
}
/* a arte entra um pouco depois do texto, para o par nao subir em bloco */
.pal2-tema .pal2-tema-arte{ transition-delay:.08s; }
@media (prefers-reduced-motion: reduce){
.pal2-tema-texto, .pal2-tema-arte{
opacity:1; filter:none; transform:none; transition:none;
}
}
.pal2-tema-texto{ display:flex; flex-direction:column; gap:8px; }
.pal2-tema-texto h3{
font-family:var(--display); font-weight:400; font-size:40px; line-height:1.04;
color:currentColor;
}
.pal2-tema-texto p{ width:482px; max-width:100%; font-size:16px; line-height:1.52; color:currentColor; }
/* o cartao chega exportado inteiro, 463 de largura. Em dois temas a arte
passa por cima da borda de cima da caixa, e por isso a imagem e mais
alta que os 221 e sobe pelo --y. */
.pal2-tema-arte{ position:relative; flex:none; width:463px; height:221px; }
.pal2-tema-arte img{
position:absolute; left:0; top:var(--y, 0px);
width:463px; height:var(--h, 221px); max-width:none; display:block;
}
@media (max-width:1023px){
/* o bloco ja encolhe; a imagem dentro dele e que seguia com 463 fixos */
.pal2-tema-arte{ width:100%; height:auto; aspect-ratio:463 / 221; overflow:hidden; }
.pal2-tema-arte img{ position:static; width:100%; height:100%; object-fit:cover; }
}
/* ---------- perfis: Tiago e o time ---------- */
.pal2-perfil-dobra{ background:var(--branco); padding:40px 0 0; }
/* Figma 996:5458: cartao de 1254 com 44 de respiro em cima e embaixo e 68
nos lados; a colagem em 494x450 e a coluna de texto em 449, centrada */
.pal2-perfil{
display:flex; align-items:center; justify-content:space-between; gap:24px;
padding:44px 68px; border-radius:40px;
background:#fafafa; border:1px solid #e6e6e6;
}
@supports (corner-shape: squircle){
.pal2-perfil{ corner-shape:squircle; }
}
.pal2-perfil-texto{ flex:0 0 449px; display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.pal2-perfil-texto p{ line-height:1.6; }
.pal2-perfil-texto h2{
font-family:var(--display); font-weight:600; font-size:38px; line-height:1.12;
color:var(--ink);
}
.pal2-perfil-texto p{ font-size:16px; color:var(--ink); }
.pal2-perfil-btn{ margin-top:9px; height:49px; padding:0 16px; font-size:14px; font-weight:500; }
/* colagem do Tiago: duas fotos empilhadas à esquerda e uma alta ao lado */
.pal2-colagem{
position:relative; flex:none; width:494px; height:450px;
}
.pal2-col{
position:absolute; border-radius:32px; overflow:hidden; background:var(--cinza-card);
}
/* a assinatura tem posicao propria, entao a regra da foto nao pode
pegar ela: sem os --x da foto ela sumia */
.pal2-col > img:not(.pal2-col-assina){
position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h); max-width:none;
}
.pal2-col--a{ left:0; top:0; width:235px; height:213px; }
.pal2-col--b{ left:259px; top:0; width:235px; height:450px; }
.pal2-col--c{ left:0; top:237px; width:235px; height:213px; }
@media (max-width:1023px){
/* a colagem e desenhada em coordenadas fixas: 259 + 235 da 494 numa tela
de 393, e a foto da direita ficava cortada pela borda. No celular as
tres viram uma coluna de blocos proporcionais. */
.pal2-colagem{ position:relative; height:auto; display:flex; flex-direction:column; gap:12px; }
.pal2-col{ position:relative; left:auto; top:auto; width:100%; height:auto; }
.pal2-col--a, .pal2-col--c{ aspect-ratio:235 / 213; }
.pal2-col--b{ aspect-ratio:235 / 300; }
.pal2-col > img:not(.pal2-col-assina){
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
}
.pal2-col-assina{
position:absolute; z-index:1;
left:47px; top:370px; width:140px; height:97.69px; max-width:none;
}
/* o time: ate 17/09 eram quatro cartoes com nome embaixo (.pal2-time
grid + .pal2-cartao). O arquivo trocou por uma colagem so, ja pronta
(cantos, arco decorativo e mascaras vem todos assados no PNG), entao
aqui nao ha mais border-radius nem overflow:hidden pra escrever: e so
posicionar a imagem. O arco decorativo do arquivo sangra 34px pra
fora do no (494 de largura), e a imagem exportada (528x406) inclui
esse sangramento; por isso o container fica travado nos 494 do
Figma e a imagem, mais larga, e quem estoura pra dentro do respiro
de 68px que o cartao ja tem (.pal2-perfil tem padding:44px 68px). */
.pal2-time-foto{ flex:none; width:494px; }
.pal2-time-foto img{ display:block; width:528px; height:406px; max-width:none; }
@media (max-width:1439px){
.pal2-como-in{ grid-template-columns:minmax(0, 440px) minmax(0, 1fr); gap:40px; }
.pal2-tema{ gap:24px; }
.pal2-tema-texto p{ width:100%; }
.pal2-perfil{ gap:32px; padding:32px; }
.pal2-perfil-texto{ flex:0 1 449px; }
}
@media (max-width:1023px){
.pal2-hero{ min-height:0; }
.pal2-hero-arte{ display:none; }
.pal2-hero-titulo{ font-size:30px; width:100%; }
.pal2-hero-apoio{ width:100%; }
/* a fila ja escala sozinha; abaixo de 1024 so o piso de leitura muda */
.pal2-chip{ font-size:max(1.62cqw, 12px); }
.pal2-como-in{ grid-template-columns:1fr; }
.pal2-como-fixo, .pal2-temas-fixo{ position:static; }
.pal2-passos, .pal2-temas-lista{ padding-bottom:0; }
.pal2-passo, .pal2-tema{ color:var(--ink); }
.pal2-tema{ flex-direction:column; align-items:flex-start; }
.pal2-tema-arte{ width:100%; max-width:463px; }
.pal2-perfil{ flex-direction:column; align-items:flex-start; }
.pal2-perfil--invertido{ flex-direction:column-reverse; }
/* o cartao vira coluna aqui, e o flex-basis de 449 que era largura no
desktop passa a valer como altura: sobrava um vazio embaixo do botao.
Mesmo defeito que aparecia no celular. */
.pal2-perfil-texto{ flex:0 0 auto; width:100%; }
.pal2-colagem{ width:100%; max-width:494px; }
/* abaixo de 1024 nao sobra respiro de 68px pro arco sangrar pra fora:
a colagem do time encolhe junto com o cartao, como a do Tiago, e a
imagem (com o arco ja dentro dela) acompanha por inteiro. */
.pal2-time-foto{ width:100%; max-width:494px; }
.pal2-time-foto img{ width:100%; height:auto; max-width:100%; }
}
/* ============================================================
CANTO NO JEITO iOS
O canto do Figma nao e arco de circulo, e uma superelipse suavizada: ela
avanca mais para os lados e chega mais reta no meio, o que da o abaulado
leve. Vale para todo box e todo card do site. Onde corner-shape nao
existe, fica o raio redondo de sempre, sem quebrar nada.
Desde 15/09 o valor e `squircle`, que e o iOS cheio, o 100% do Figma.
Antes era superellipse(1.3), que e o 60% do Figma. Decisao do Renan:
o site inteiro no canto cheio, sem dois graus de suavizacao convivendo.
Ficam de fora de proposito: pilulas e botoes de raio 100, onde o canto ja
e um semicirculo e a superelipse nao teria o que fazer.
============================================================ */
@supports (corner-shape: squircle){
.dpo-cartao, .dpo-foto,
.eco-card, .eco-retrato,
.caso.e-centro, .caso-foto, .caso-card, .caso-capa,
.cta2-painel, .painel,
.ct-cartao, .ct-canal,
.campo input, .campo select, .campo textarea,
.pal-98, .pal-time, .pal-evento, .pal-evento-foto, .pal-chip,
.pal-time-fotos span, .pal-gal, .pal-gal-vaga,
/* a colagem do Tiago (996:5464): ficou de fora quando a pagina de
palestras foi reescrita com o prefixo pal2- e seguia com o canto
redondo comum. Os cartoes do time (996:5434) saiam daqui tambem ate
17/09, mas a dobra virou imagem unica com canto ja assado no PNG;
.pal2-cartao nao existe mais. */
.pal2-col,
.res-faixa, .ct-faixa,
.qs-cartao, .qs-cnpj,
.form-card, .case-topo, .case-corpo{
corner-shape:squircle;
}
/* O canto iOS avança um décimo além do raio, então quem entra aqui
precisa CRESCER 10% para ler igual ao arquivo. Os dois cards desta
linha são o que o Renan apontou em 18/09: ganharam a superelipse em
17/09 mas seguiram com o número cru do Figma, e por isso o canto
lia menor do que devia. Os mesmos tokens do .art-card, que é o
padrão do site.
O resto da lista continua com o número cru: crescer o site inteiro
de uma vez é decisão do Renan, não deste ajuste. */
.caso-card{ border-radius:var(--r-grande-ios); }
.caso-capa{ border-radius:var(--r-capa-ios); }
}
/* ============================================================
TRAVA DE CELULAR
Abaixo de 1024 a página sai de cena e fica só o aviso, MAS só nas
páginas que ainda não têm celular: quem já foi construído para mobile
recebe `tem-mobile` no body e passa direto. A trava some sozinha
conforme as páginas ficam prontas, e o último `tem-mobile` a entrar
apaga este bloco inteiro.
============================================================ */
.so-desktop{ display:none; }
@media (max-width:1023px){
body:not(.tem-mobile){ overflow:hidden; height:100%; }
body:not(.tem-mobile) > *:not(.so-desktop){ display:none !important; }
body:not(.tem-mobile) .so-desktop{
display:flex; position:fixed; inset:0; z-index:9999;
align-items:center; justify-content:center; padding:32px;
background:var(--ink); color:var(--branco); text-align:center;
}
.so-desktop-in{ max-width:420px; display:flex; flex-direction:column; align-items:center; gap:20px; }
.so-desktop-in img{ width:44px; height:auto; }
.so-desktop h1{
font-family:var(--display); font-weight:500; font-size:26px; line-height:1.15;
}
.so-desktop p{ font-size:15px; line-height:1.55; color:rgba(255,255,255,.76); }
.so-desktop-pe{
margin-top:8px; font-size:12px; letter-spacing:.08em;
text-transform:uppercase; color:rgba(255,255,255,.4);
}
}
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width:1439px){
.heroi{ height:auto; padding-bottom:195px; }
.heroi-titulo{ font-size:48px; }
.heroi-in{ padding-top:200px; padding-bottom:80px; }
.dpo-in{ margin-left:auto; margin-right:auto; }
.eco-titulo{ font-size:44px; }
.sol-cabecalho{ padding-top:210px; }
.sol-titulo{ font-size:26px; }
.result-hero{ font-size:32px; }
}
@media (max-width:1023px){
.heroi-logo, .heroi-veu{ left:20%; width:110%; }
.heroi-titulo{ font-size:42px; max-width:100%; }
.heroi-sub{ max-width:100%; }
.heroi-banda{ height:auto; padding:20px 0; }
.heroi-banda-in{ flex-direction:column; align-items:stretch; gap:16px; }
.logobar.logobar--banda{ width:100%; height:56px; }
.dpo-slide{ grid-template-columns:minmax(0, 1fr); gap:40px; }
.dpo-cartao{ width:100%; max-width:465px; }
.dpo-texto{ padding-top:0; }
.eco-titulo{ font-size:34px; }
.sol-marca{ --marca-inicio:28px; }
.sol-cabecalho{ padding-top:150px; flex-direction:column; align-items:flex-start; gap:24px; }
.sol-cab-apoio{ flex:0 0 auto; }
.sol-cards{ grid-template-columns:1fr; gap:16px; }
/* Era 16/11 (paisagem), medida para a arte antiga (foto de contexto,
sem elemento sensível a corte). A arte nova (18/09) é uma colagem
com a palavra fantasma no topo e a cabeça vazando por cima dela: em
16/11 o object-fit:cover cobre a caixa cortando ~51% da altura da
peça, e a palavra fantasma simplesmente some. 4/5 é a mesma proporção
que o celular já usa com essa arte (ver abaixo) e preserva a palavra;
o cartão fica mais alto aqui, mas a coluna já é única (1fr), então
não compete largura com nada ao lado. */
.sol-card{ aspect-ratio:4 / 5; }
/* so --sol-r: o x1,1 da superelipse vem da regra base */
.sol-card-caixa{ --sol-r:44px; }
/* ---------- o card de celular nao tem hover ----------
O Renan pediu: no celular o texto e o botao ja nascem prontos. Entao
aqui o card volta a ser o de antes e a maquinaria das duas variantes
sai de cena: o rotulo "+" da lugar ao "Saiba mais" fixo.
As medidas voltam a px porque o card de celular tem outra proporcao,
e cqw ali entregaria a composicao do desenho de 503x706 esticada. */
/* ---------- VEU DE LEGIBILIDADE NO CELULAR (18/09/2026) ----------
O veu vinha `display:none` aqui desde que a arte de celular era uma
propria, com o degrade ja assado no PNG. Em 17/09 a arte
de celular virou a MESMA do computador (home.py) e o degrade foi
junto: o texto branco e o botao passaram a cair direto na foto, e
sobre as areas claras dela o texto sumia. Foi o que o Renan apontou.
Sao duas camadas, e as duas saem de tratamento que o site ja tinha:
1. o FADE e o degrade do proprio .sol-veu do computador (as paradas
de 57/75,8/93,4% em rgba(12,22,27)), reancorado: la a caixa e
mais alta que o card e desliza no hover, aqui ela e o card
inteiro e fica parada, entao as paradas foram recalculadas sobre
a altura do card. Ele encosta em 30%, que e bem acima de onde o
chapeu comeca, e fecha escuro no pe. O mesmo gesto do
.mn-hero-veu, que sustenta o texto sobre a foto da mentoria, so
que na vertical.
2. o DESFOQUE DE FUNDO e a .caso-turvo da dobra de resultados: uma
SEGUNDA copia da arte, com filter:blur comum e mascara apagando
para cima. Nao e backdrop-filter, por dois motivos ja registrados
neste projeto: no Chromium a mascara NAO recorta backdrop-filter
(a foto inteira sairia borrada, topo incluso) e desfoque de fundo
aninhado lava o elemento filho. Com a copia o filtro e comum, a
mascara faz o que deve, e o .sol-pe, que e irmao e pinta depois,
chega inteiro.
O scale de 1.04 joga a franja transparente que o blur cria nas
bordas para fora do corte da .sol-card-caixa.
Por que o desfoque e um max(): o arquivo pede 5 na camada do veu,
num card desenhado com 503 de largura, o que da 0,994cqw. No celular
esse calculo entregaria 2,5 num card de 249, e 3 e o que se le como
desfoque sem apagar a foto, entao o piso e 3px. Entre 768 e 1023 o
cartao passa dos 800 de largura e ai quem manda e a proporcao do
arquivo, senao 3px sumiriam numa caixa tres vezes maior.
cqw funciona aqui porque o .sol-card ja e container de consulta. */
.sol-veu{
left:0; top:0; right:0; bottom:0; width:auto; height:auto;
border-radius:inherit;
transform:none; transition:none;
background:linear-gradient(180deg,
rgba(12,22,27,0) 30%, rgba(12,22,27,.62) 62%,
rgba(12,22,27,.9) 86%, #0c161b 100%);
}
.sol-turvo{
display:block; position:absolute; inset:0;
overflow:hidden; pointer-events:none; border-radius:inherit;
filter:blur(max(3px, 0.994cqw)); transform:scale(1.04);
-webkit-mask-image:linear-gradient(180deg, transparent 26%, #000 58%);
mask-image:linear-gradient(180deg, transparent 26%, #000 58%);
}
.sol-turvo img{ display:block; width:100%; height:100%; object-fit:cover; }
/* 23/09, pedido do Renan: só no card da mentoria (card-mentoria.webp)
o rosto da mulher fica na faixa 18%-47% da foto, bem dentro da
transição 26%-58% que os outros dois cards usam -- o desfoque
começava a pegar ainda no queixo. Empurrado pra 46%-64%, que fecha
escuro antes do .sol-pe (o pé do card começa em ~67% da altura). */
[data-sol="mentoria"] .sol-turvo{
-webkit-mask-image:linear-gradient(180deg, transparent 46%, #000 64%);
mask-image:linear-gradient(180deg, transparent 46%, #000 64%);
}
.sol-pe{
bottom:0; padding:0 26.8px 34.3px; gap:12.85px;
}
.sol-texto{ gap:12.85px; }
.sol-tag{ font-size:13.3px; }
.sol-titulo{ margin-top:4px; font-size:30px; max-width:none; }
.sol-btn{
height:46px; padding:0 17px; border-radius:64px; font-size:15px;
}
.sol-texto{ opacity:1; visibility:visible; transition:none; }
.sol-texto .sol-tag,
.sol-texto .sol-titulo{ transform:none; transition:none; }
.sol-btn-rot--mais{ display:none; }
.sol-btn-rot--saiba{ grid-template-columns:1fr; opacity:1; }
.result-cabecalho{ flex-direction:column; gap:24px; }
.result-cab-apoio{ flex:0 0 auto; margin-top:0; }
.caso, .caso.e-meio{ width:24cqw; }
.caso.e-centro{ width:46cqw; }
.cta2-titulo{ font-size:32px; margin-bottom:24px; }
.cta2-painel{ padding:56px 32px 64px; }
.rod2-topo{ flex-direction:column; gap:48px; }
}
@media (max-width:767px){
.heroi-in{ padding-top:150px; }
.heroi-titulo{ font-size:34px; }
.heroi-sub{ font-size:15px; }
.heroi-logo, .heroi-veu{ left:-10%; width:150%; top:120px; }
.heroi-recado{ flex-direction:column; gap:16px; }
.heroi-btn{ width:100%; max-width:247px; }
.dpo{ padding:64px 0 80px; }
.dpo-frase{ font-size:24px; }
/* ---------- celular, Figma 1070:7340 e 1070:7349 ----------
Duas correcoes que o Renan cobrou em 17/09.
1. A citacao carregava min-height de 210, que existe no desktop para
a assinatura nao pular na troca de slide. No celular, onde a frase
quebra em muito mais linhas, essa altura minima so abria um buraco
entre a fala e o nome. Aqui ela cai e a caixa volta a abracar o
texto, com os 24 do arquivo entre uma coisa e outra.
2. A moldura branca do retrato estava com o respiro e o canto do
desktop (24 e 80) num cartao que encolheu para 350: no arquivo, num
cartao de 286, eles sao 8,4/6,1 e 30, ou seja 2,9%, 2,4% e 10,5% da
largura. Os numeros abaixo sao essas proporcoes sobre os 350 que o
cartao mede num aparelho de 390. */
.dpo-frase{ min-height:0; }
.dpo-assina{ margin-top:24px; }
.dpo-cartao{
padding:7.5px 10.3px; border-radius:37px;
box-shadow:0 52px 73px -40px rgba(0,0,0,.25);
}
.dpo-foto{ border-radius:30px; }
.eco-titulo{ font-size:28px; }
.sol-marca{ --marca-inicio:22px; }
.sol-cabecalho{ padding-top:110px; }
.sol-hero{ font-size:28px; }
.sol-card{ aspect-ratio:4 / 5; }
/* vencida pela regra de 21px mais abaixo (bloco CELULAR), mantida
coerente para nao voltar errada se aquela sair */
.sol-card-caixa{ --sol-r:36px; }
.result-hero{ font-size:26px; }
.caso, .caso.e-meio{ width:34cqw; }
.caso.e-centro{ width:78cqw; }
.cta2-titulo{ font-size:26px; }
.rod2-marca{ width:100%; }
/* era uma fila com wrap: cada coluna media a propria largura e a
segunda linha caia desalinhada da primeira ("Conteudo" nao batia com
"Solucoes"). Grade de duas colunas iguais resolve nos dois eixos. */
.rod2-colunas{
display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
gap:32px 40px;
}
.rod2-base{ flex-direction:column; align-items:flex-start; gap:20px; height:auto; margin-top:36px; }
}
/* ============================================================
CELULAR · construído dos frames mobile do Figma (393px)
Cada página tem o seu bloco. O que está aqui vem do desenho de
celular, não de reduzir o desktop, e por isso mora no fim do
arquivo: vence as media queries antigas por ordem.
============================================================ */
@media (max-width:767px){
/* ---------- HOME · hero · Figma 1070:6973 ----------
O frame tem 852 de altura, que é a tela do iPhone 16: o hero ocupa
a tela inteira e a faixa de clientes fecha embaixo. Por isso a
faixa sai do absoluto e volta para o fluxo, empurrada pelo auto. */
.heroi{
height:auto; min-height:100svh; padding-bottom:0;
display:flex; flex-direction:column;
}
/* arco: left -151, top 413, 663,4x642 sobre os 393 do frame */
.heroi-logo, .heroi-veu{
left:-38.42%; top:413px; width:168.79%; aspect-ratio:663.354 / 642;
}
.heroi-in{
width:100%; padding:130px 29px 0; text-align:center;
display:flex; flex-direction:column; align-items:center; gap:23px;
}
.heroi-in > * + *{ margin-top:0; } /* o gap assume o respiro */
/* no celular o título é Bold 24, não o Light 40 do desktop */
.heroi-titulo{
max-width:334px; font-weight:700; font-size:24px; line-height:.84;
}
.heroi-titulo em{ font-weight:700; }
.heroi-sub{ max-width:334px; font-size:14px; line-height:1.1; }
.heroi-btn{ width:247px; height:57px; font-size:14px; }
.heroi-banda{
position:static; margin-top:auto; height:auto; padding:52px 0;
}
.heroi-banda-in{
width:100%; height:auto; flex-direction:column; align-items:center; gap:15px;
}
.logobar.logobar--banda{ width:100%; height:41px; }
.heroi-recado{
max-width:314px; font-size:15.7px; line-height:1.04;
text-align:center; color:#34444d;
}
/* ---------- HOME · dobra 2 · Figma 1070:7053/927:9393 ----------
22/09: com as duas linhas (.eco-linha) já sendo flex+wrap desde o
desktop, o celular não precisa de nada especial pra estrutura -- o
próprio wrap já empilha um item por linha quando a coluna fica
estreita, então "três em cima, texto, três embaixo" no mobile é só
a continuação natural do mesmo comportamento, sem order nem
position:static de resgate. Só o respiro lateral muda, pra bater
com o recuo de 23px que o título/apoio já usam aqui embaixo. */
.eco{ height:auto; padding:64px 0 80px; gap:0; }
.eco-linha{ padding:0 23px; gap:28px; }
/* 22/09, corrigido: o comentário abaixo (título→apoio) já dizia 25px
de respiro "como gap da própria dobra", mas o .eco real está com
gap:0 -- o texto ficava colado nele mesmo, e as margens das linhas
de depoimento (40px) também apertadas pro Renan ("colado no
depoimento de cima"). Sobem um pouco as duas, título/apoio ganha
margem própria já que o gap:0 do pai não pode virar geral (isso
dobraria o respiro das linhas, que já usam margin). */
.eco-linha--cima{ margin-bottom:48px; }
.eco-linha--baixo{ margin-top:48px; }
.eco-item{ width:100%; max-width:320px; }
/* aqui embaixo de 767 a pirâmide (ver ~1023px mais abaixo) já volta a
desligar: nesta largura os três já empilham 1 a 1 de qualquer jeito
(item não cabe nem aos pares), então mantém a ordem original do
Figma mobile (Roberta, Fagner, Alexandre) em vez da ordem
topo/base -- é o que já estava certo e conferido antes. */
/* --pw é fixo por pessoa (220/185/190px), calibrado pra quebra de
linha no desktop -- nunca pensado pra caber nos ~320px do item
inteiro no celular. Sem isto o texto ficava largo demais pro
espaço que sobra depois da foto (81px + 23,45 de respiro) e ou
estourava o item ou apertava a leitura. width:auto com flex deixa
a coluna encolher pro que sobra de verdade, sem depender do pw. */
.eco-item .eco-dep{ width:auto; min-width:0; flex:1 1 0; }
/* título e apoio: SemiBold 24 com a segunda oração no azul
acinzentado, apoio em Inter ExtraBold e corpo em regular, tudo
centrado. Os dois eram um bloco só (`.eco-in`); split em duas caixas
(18/09) pra caber depoimento entre eles, mas o respiro entre título e
apoio é o mesmo 25px de antes, agora como gap da própria dobra. */
.eco-in, .eco-apoio{ width:100%; padding:0 23px; text-align:center; }
.eco-in{ margin-bottom:32px; }
.eco-titulo{
font-size:24px; font-weight:600; line-height:1.04;
letter-spacing:-0.48px; max-width:347px; margin:0 auto;
}
/* no celular o título não acende por scroll: numa tela dessa altura o
efeito ficaria pela metade, então ele já nasce no estado final, com
a frase inteira no escuro. A segunda oração tinha o azul acinzentado
aqui também, e era a mesma terceira cor que saiu do desktop. */
.eco-titulo .palavra{
color:var(--ink); opacity:1; transform:none; transition:none;
}
.eco-apoio{ display:flex; flex-direction:column; align-items:center; gap:25px; }
.eco-lead{ font-family:var(--texto); font-weight:800; font-size:14px; line-height:1.1; max-width:277px; margin:0 auto; }
.eco-corpo{ font-size:14px; line-height:1.1; max-width:277px; margin:0 auto; }
.eco-corpo p + p{ margin-top:14px; }
/* o cartão amarelo já tem a variação mobile própria, por container
query; aqui ele só volta para o fluxo com a medida do Figma */
.eco-card-caixa{ width:355px; max-width:calc(100% - 38px); margin:0 auto; }
/* ---------- HOME · soluções · Figma 1070:7150 ----------
A palavra gigante já fecha na largura do grid pelo cqw, então aqui
só entra o que muda: o cabeçalho vira uma coluna centrada e os três
cards passam a correr lado a lado num trilho, como no desenho. */
.solucoes-v2{ padding:40px 0 56px; }
.sol-in{ width:100%; }
/* No arquivo (1070:7150) a palavra gigante ocupa o topo da dobra, de 0 a
61, e o texto comeca 15 abaixo dela, em 76. No site ela e absoluta e o
JS escreve o topo inline (TOPO_FINAL 66 em v2.js), entao nenhuma regra
de CSS a movia: ela caia em cima do titulo em 360, 393 e 430.
No celular ela entra no fluxo: ocupa a propria altura, empurra o texto
e nao ha o que sobrepor, em qualquer largura. O percurso animado
continua valendo no desktop, onde ela segue absoluta. */
.sol-marca-caixa{
position:static; height:auto; margin-inline:auto;
left:auto; top:auto; transform:none; /* sem isto a caixa segue com o
translateX(-50%) do desktop e leva a palavra meia tela para a esquerda.
A largura continua a da regra base, que e a do container: e ela que
define o corpo da palavra, medido em cqw. */
}
.sol-marca{
position:static; left:auto; top:auto; transform:none;
display:block; text-align:center;
}
.sol-cabecalho{
padding:15px 21px 0; flex-direction:column; align-items:center;
gap:28px; text-align:center;
}
.sol-cab-esq{ display:flex; flex-direction:column; gap:6px; width:100%; }
/* o chapéu fica sem cor no Figma: quem nomeia a dobra é a palavra
gigante logo acima, e ele continua só segurando o respiro */
.sol-cabecalho .chapeu{ color:transparent; font-size:12px; letter-spacing:.12px; }
.sol-hero{ font-size:24px; line-height:1.04; font-weight:400; }
.sol-hero strong{ font-weight:700; }
.sol-cab-apoio{ font-size:14px; line-height:1.52; color:#111; width:100%; }
/* Figma 1448:8625 (22/09): não é mais esteira por dedo, os três cards
empilham, um abaixo do outro, largura cheia do grid. As setas somem;
sem hover no celular, o texto e o botão já nascem visíveis (ver
.sol-card:hover mais abaixo, que só liga sob (hover:hover)). */
.solucoes-v2{ --sol-recuo:20px; }
.sol-cards{
display:flex; flex-direction:column; grid-template-columns:none; gap:16px;
margin-top:41px; padding:0 var(--sol-recuo);
overflow-x:visible; scroll-snap-type:none;
}
/* 22/09: proporção do arquivo (node 1528:6730) é 331,4×465,1 = 0,7125,
não 4/5 (0,8) -- o card era mais baixo/largo que o desenho. */
.sol-card{ flex:none; width:100%; height:auto; aspect-ratio:331 / 465; }
.sol-setas{ display:none; }
.sol-card-caixa{ --sol-r:24px; } /* idem: vencida pelo bloco CELULAR */
/* ---------- HOME · resultados e CTA · Figma 1070:7373 ----------
No celular o cabeçalho da dobra é centrado, e não em duas colunas
como no desktop. O carrossel de casos continua com o card do meio
aberto e os vizinhos cortados nas bordas. */
.result-cabecalho{
flex-direction:column; align-items:center; gap:24px; text-align:center;
}
.result-cab-esq{ display:flex; flex-direction:column; gap:0; align-items:center; }
/* 10px com espacamento de letra grande fica abaixo do piso de leitura;
12 e o token de rotulo do sistema e cabe na mesma linha */
.result-cabecalho .chapeu{ font-size:12px; letter-spacing:.1em; }
.result-hero{ font-size:24px; line-height:1.04; max-width:374px; margin-top:18px; }
.result-cab-apoio{ font-size:14px; line-height:1.3; max-width:306px; margin-top:0; }
/* o painel escuro do CTA: 357 de largura no frame de 393 */
.cta2{ padding:0 0 64px; }
.cta2-painel{
width:calc(100% - 36px); margin:0 auto;
padding:44px 28px 48px; border-radius:36px; text-align:center;
}
.cta2-titulo{ font-size:24px; line-height:1.04; margin-bottom:20px; }
.cta2-texto{ font-size:14px; line-height:1.35; }
.cta2-btn{ width:256px; max-width:100%; height:48px; margin-top:28px; }
}
/* ============================================================
DEPOIMENTOS EM VÍDEO — carrossel do YouTube
Geometria vinda do Figma 1129:2659, que foi desenhado na tela de
1440 com container de 1272. Aqui a coluna é 1511, então cartão,
respiro e raio sobem na mesma proporção (1511/1272 = 1,1879) para
manter os dois cartões e meio à vista do arquivo. A tipografia NÃO
escala: usa os tokens do site (.chapeu, .d-card, corpo de 15).
Os breakpoints entram depois, junto com os das outras dobras.
============================================================ */
.videos{ margin-top:119px; }
.vid-topo{ width:min(var(--container), 100% - var(--gutter) * 2); margin:0 auto; }
.vid-topo .d-statement{ margin-top:14px; max-width:680px; }
/* a janela vai de ponta a ponta e corta o que espera na direita, como no
arquivo; quem segura a margem da coluna é o padding do trilho */
.vid-janela{
margin-top:48px;
overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;
/* sem isto o snap gruda o primeiro cartão na borda da tela e come a
margem da coluna */
scroll-padding-left:calc((100vw - min(var(--container), 100vw - var(--gutter) * 2)) / 2);
-ms-overflow-style:none; scrollbar-width:none;
}
.vid-janela::-webkit-scrollbar{ display:none; }
.vid-trilho{
/* sem max-content o flex fica preso na largura da janela e os cartões
vazam para a esquerda, ignorando a margem da coluna */
display:flex; gap:39px; width:max-content;
padding-left:calc((100vw - min(var(--container), 100vw - var(--gutter) * 2)) / 2);
padding-right:var(--gutter);
}
/* cartão inteiro dentro da janela fica ativo; cortado, apaga */
.vid-card{
flex:none; width:598px; scroll-snap-align:start;
opacity:.3; transition:opacity .5s var(--suave);
}
.vid-card.esta-ativo{ opacity:1; }
.vid-capa{
position:relative;
display:block; width:100%; aspect-ratio:503 / 300;
border-radius:47px; overflow:hidden; background:var(--nevoa);
/* 22/09: virou