nativo: abre sem JS, responde ao
teclado e o leitor de tela anuncia aberto/fechado sozinho.
overflow-anchor evita o browser “puxar” o scroll sozinho ao expandir. */
.frentes {
border-top: 1px solid var(--linha);
padding-top: var(--space-s); margin-bottom: var(--space-s);
overflow-anchor: none;
}
.frentes__abre {
cursor: pointer; list-style: none;
display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
overflow-anchor: auto;
scroll-margin-block: 0;
}
.frentes__abre::-webkit-details-marker { display: none; }
.frentes__abre::before {
content: "+"; display: grid; place-items: center;
width: 22px; height: 22px; flex: none;
border: 2px solid var(--preto); font-size: 0.9rem; line-height: 1;
}
.frentes[open] .frentes__abre::before { content: "–"; background: var(--amarelo); }
.frentes__lista { display: grid; gap: 0.4rem; padding: var(--space-s) 0 0.2rem; }
.frentes__lista li {
position: relative; padding-left: 1.4rem;
font-size: 0.97rem; color: var(--preto-2);
}
.frentes__lista li::before {
content: ""; position: absolute; left: 0; top: 0.55em;
width: 10px; height: 3px; background: var(--amarelo);
}
/* --- 6.3.1 CAPACIDADES ----------------------------------------------------
HIERARQUIA — esta seção existe abaixo das soluções, e precisa PARECER
abaixo. A regra que orienta tudo aqui:
Solução = o que o cliente contrata para resolver um problema.
Cartão com borda de 3px, empilha no scroll, título grande,
CTA própria.
Capacidade= o que a Aproxima aciona para entregar a solução.
Etiqueta. Sem cartão, sem empilhamento, sem CTA, tipografia
de apoio e fundo neutro.
Se um dia alguém aumentar o peso daqui, "Vídeo" vai passar a competir com
"Diagnóstico de Crescimento" na leitura — que é exatamente o que esta
seção não pode fazer.
O respiro de entrada é MAIOR que o padding padrão de .section, de
propósito: os tópicos que terminam em texto ganham ~80px extras do
margin-bottom do próprio .section__head, e o baralho de soluções termina
num card, sem esse extra. Sem a compensação, a chegada ao 04 media ~306px
contra ~368px do vão 01→02 — e parecia colada. */
.capacidades { padding-top: calc(var(--space-xl) + var(--space-l)); }
.capacidades__titulo { font-size: var(--fs-h3); }
.capacidades__grade {
display: grid; gap: 0.6rem; margin-top: var(--space-m);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.capacidade {
background: var(--branco-2);
border-left: 3px solid var(--amarelo);
font-family: var(--font-display); font-weight: 600;
font-size: 0.92rem; color: var(--preto-2);
}
/* Quatro das nove têm página própria; as outras cinco ainda são só rótulo.
O padding vive no item OU no link, para o alvo de toque cobrir a etiqueta
inteira em vez de só o texto. */
.capacidade { padding: 0.85rem 1rem; }
.capacidade:has(a) { padding: 0; }
.capacidade a {
display: flex; align-items: center; min-height: 44px;
padding: 0.85rem 1rem; text-decoration: none;
transition: background-color 0.2s var(--ease);
}
.capacidade a::after { content: "→"; margin-left: auto; opacity: 0.45; }
.capacidade a:hover { background: var(--amarelo); color: var(--preto); }
.capacidade a:hover::after { opacity: 1; }
/* --- ESTEIRA DE CAPACIDADES -----------------------------------------------
Leitura do CircularGallery (WebGL/OGL) para o que este site é: HTML e
transform, sem dependência e sem canvas. O que veio de lá:
· fluxo contínuo e infinito, com as etiquetas reentrando pela outra ponta;
· inércia — o impulso decai por interpolação, o mesmo lerp do original;
· o ARCO: a mesma conta de círculo por três pontos, aplicada em translateY
e rotate em vez de posição de malha 3D;
· arrastar para empurrar a fita.
O que NÃO veio, de propósito: o listener de wheel no window (roubaria a
rolagem da página inteira) e o peso de uma galeria de imagens — estas
etiquetas precisam continuar lendo abaixo dos cards de solução.
A grade acima é o estado base. Tudo aqui só vale com .is-live, que o
script.js liga apenas quando há espaço e movimento é bem-vindo. */
.capacidades__esteira { overflow: hidden; }
.capacidades__esteira.is-live {
cursor: grab;
/* Vertical passa; o JS só assume arraste quando o gesto é horizontal. */
touch-action: pan-y;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
@media (hover: none) {
.capacidades__esteira.is-live { cursor: default; }
}
.capacidades__esteira.is-live.is-arrastando { cursor: grabbing; }
/* Vira trilho: a grade deixa de distribuir em colunas e cada etiqueta passa a
ser posicionada por transform. A altura é escrita pelo script com a medida
real das etiquetas mais a flecha do arco. */
.capacidades__esteira.is-live .capacidades__grade {
display: block; position: relative;
height: var(--altura-esteira, 64px);
margin-top: var(--space-m);
}
.capacidades__esteira.is-live .capacidade {
position: absolute; top: 0; left: 0;
white-space: nowrap;
transform-origin: 50% 50%;
}
/* Enquanto arrasta, o clique no link é suprimido pelo script — sem isto o
dedo que empurra a fita abriria a página da etiqueta que ficou sob ele. */
.capacidades__esteira.is-arrastando .capacidade a { pointer-events: none; }
@media (max-width: 899px) {
/* No celular o sticky + recuo cortava CTA e frentes (carta alta demais
para a tela). Aqui a pilha vira lista normal: todo o conteúdo aparece. */
.produtos__lista { --recuo: 0px; }
.produtos__lista::after { display: none; }
.produto {
position: relative;
top: auto;
margin-bottom: var(--space-m);
padding: clamp(2rem, 6vw, 2.75rem) clamp(1.5rem, 5vw, 2rem);
gap: var(--space-m);
}
.produto__necessidade { margin-bottom: 1.25rem; }
.produto__itens { margin-bottom: var(--space-s); }
.produto__case { padding: var(--space-s); margin-bottom: var(--space-s); }
.produto__media .media-slot { aspect-ratio: 16 / 9; min-height: 130px; }
.produto--solucao .produto__media {
margin-top: var(--space-s);
padding-inline: clamp(0.5rem, 4vw, 1.5rem);
}
.produto--solucao .produto__media img {
width: 100%;
height: auto;
max-width: 480px;
margin-inline: auto;
object-fit: contain;
}
/* Mobile: lista normal — a pista de leitura do baralho não se aplica.
Sem isto, .is-expandido (0,2,0) ganhava do .produto e abria ~28svh
de vão fantasma ao expandir frentes no celular. */
.produto.is-expandido {
margin-bottom: var(--space-m);
}
/* Entrada dos cards de solução no mobile (mesmo timing/easing do .reveal).
Desktop continua sem fade — lá a entrada é o empilhar do baralho. */
.produto--solucao.produto--entra {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.produto--solucao.produto--entra.is-inview {
opacity: 1;
transform: none;
}
}
@media (min-width: 900px) {
.produto {
grid-template-columns: 4rem minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: var(--space-m) var(--space-l);
align-items: stretch;
padding: clamp(3rem, 4vw, 4.25rem) clamp(3.5rem, 5vw, 5rem);
}
.produto__num { grid-column: 1; grid-row: 1; }
.produto__corpo { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; }
.produto__corpo .produto__cta {
margin-top: auto;
padding-top: var(--space-m);
align-self: flex-start;
}
/* Soluções: NÃO usar margin-top:auto — no baralho isso esconde o link
sob a carta seguinte (era o bug dos cards 01 e 02). */
.produto--solucao .produto__corpo .produto__cta {
margin-top: 0.35rem;
padding-top: 0;
align-self: flex-start;
font-size: 1.08rem;
border-bottom: 4px solid var(--amarelo);
position: relative;
z-index: 2;
}
.produto__media { grid-column: 3; grid-row: 1; }
/* Solução: CTA fica JUNTO do texto (após a descrição), não no rodapé.
No baralho, a carta seguinte cobre a base — por isso 01 e 02 “sumiam”. */
.produto--solucao {
grid-template-columns: minmax(0, 1fr);
align-items: start;
align-content: start;
min-height: clamp(480px, 58svh, 640px);
}
.produto--solucao .produto__linha {
grid-column: 1;
grid-row: 1;
grid-template-columns: minmax(0, 1fr) minmax(22rem, 1.05fr);
gap: clamp(1.5rem, 2.5vw, 2.25rem);
align-items: start;
align-self: start;
min-height: 0;
}
.produto--solucao .produto__corpo {
grid-column: auto;
grid-row: auto;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
height: auto;
}
.produto--solucao .produto__media {
grid-column: auto;
grid-row: auto;
width: 100%;
max-width: 560px;
justify-self: stretch;
align-self: start;
margin-top: 0.15rem;
}
.produto--solucao .produto__media img {
width: 100%;
height: auto;
object-fit: contain;
object-position: top center;
}
/* Desktop only: frentes abertas ganham pista de rolagem (não no mobile).
Última carta não recebe .is-expandido via JS. */
.produto.is-expandido {
margin-bottom: var(--recuo-leitura, 28svh);
}
.produto--invertido { grid-template-columns: minmax(0, 0.8fr) 3rem minmax(0, 1.2fr); }
.produto--invertido .produto__media { grid-column: 1; }
.produto--invertido .produto__num { grid-column: 2; }
.produto--invertido .produto__corpo { grid-column: 3; }
.portas { grid-template-columns: 1fr 1fr; }
.produto--destaque .portas { grid-template-columns: 1fr; }
}
/* --- 6.4 QUEM SOMOS ------------------------------------------------------ */
.quem__grid { display: grid; gap: var(--space-l); }
.quem__list { margin-top: var(--space-m); display: grid; gap: var(--space-s); }
.quem__list li { padding-left: 1.6rem; position: relative; color: var(--preto-2); max-width: 52ch; }
.quem__list li::before {
content: ""; position: absolute; left: 0; top: 0.45em;
width: 10px; height: 10px; background: var(--amarelo); border: 2px solid var(--preto);
}
/* --- RASTRO — o quadro grande da seção, em dois tempos --------------------
Três camadas dentro do mesmo palco:
.rastro__capa → os sócios se revezando, cada foto preenchendo o quadro.
É também o estado base: sem JS, sem mouse fino ou com
reduced-motion, fica só a primeira, parada.
.rastro__img → as fotos do rastro. Invisíveis e fora do fluxo até o
script.js ligar .is-live; a partir daí ele posiciona cada
uma no ponto do cursor e roda a animação de entrada e
saída (Web Animations API, nada aqui no CSS).
A proporção 3/4 é a mesma do slot de vídeo que ocupava este lugar: quando o
vídeo do Lucas for gravado e entrar aqui, a coluna não muda de altura.
Sem sombra, sem canto arredondado e sem glow: a referência de origem é um
showcase com estética de vidro, e este site é o contrário disso — foto
sólida, corte reto, movimento curto.
-------------------------------------------------------------------------- */
.rastro { margin: 0; }
.rastro__palco {
position: relative; overflow: hidden;
background: var(--branco-2);
aspect-ratio: 3 / 4;
}
.rastro__capa {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; display: block;
opacity: 0; transition: opacity 0.45s var(--ease);
}
.rastro__capa.is-on { opacity: 1; }
/* Assim que a primeira foto do rastro é disparada, a capa sai de cena — e
vence o .is-on porque tem uma classe a mais no seletor. */
.rastro.is-tocado .rastro__capa { opacity: 0; }
.rastro__img {
position: absolute; left: 0; top: 0;
width: 46%; aspect-ratio: 3 / 4; height: auto;
object-fit: cover; display: block;
opacity: 0; pointer-events: none;
/* Sem .is-live (sem JS) elas nunca aparecem: só a capa conta. */
}
.rastro.is-live .rastro__palco { cursor: crosshair; }
/* will-change só nas que o rastro usa, e só com ele ligado: são 7 imagens,
e manter as 7 promovidas a camada própria o tempo todo é caro à toa. */
.rastro.is-live .rastro__img { will-change: transform, opacity; }
/* Etiqueta de foto — a mesma em qualquer retrato do site: régua preta, nome em
mono e a função num bloco amarelo. Vale para o quadro do "quem somos" e para
a abertura das páginas de solução. */
.rastro__legenda,
.foto-cred {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
margin-top: 0.7rem; padding-top: 0.6rem;
border-top: 3px solid var(--preto);
font-family: var(--font-mono); font-size: 0.62rem;
letter-spacing: 0.12em; text-transform: uppercase;
}
.rastro__legenda strong,
.foto-cred strong { color: var(--preto); font-weight: 700; }
.rastro__papel,
.foto-cred__papel {
background: var(--amarelo); color: var(--preto);
padding: 0.2rem 0.45rem;
}
/* A legenda acompanha o quadro: parado, nomeia o sócio que está na capa e
convida a passar o cursor; com o rastro andando, passa a falar do time.
Em toque (is-toque) a dica muda — não há cursor para “passar”. */
.rastro__time, .rastro__dica { display: none; }
.rastro__dica { color: var(--cinza); }
.rastro.is-live .rastro__dica:not(.rastro__dica--toque) { display: inline; }
.rastro.is-toque .rastro__dica--toque { display: inline; }
.rastro.is-live.is-tocado .rastro__nome,
.rastro.is-live.is-tocado .rastro__papel,
.rastro.is-live.is-tocado .rastro__dica { display: none; }
.rastro.is-live.is-tocado .rastro__time { display: inline; }
@media (min-width: 900px) {
.quem__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--space-xl); align-items: start; }
}
/* --- 6.5 HISTÓRIAS — filmstrip (acordeão horizontal de fotos) -----------
Frestas se abrem sob hover (desktop) ou toque (≤999px). Fundo claro, alinhado
ao restante do site — sem chrome de marca/dica/contador. */
.historias { padding-bottom: var(--space-l); }
.historias .section__head { margin-bottom: var(--space-m); }
.filmstrip {
--fs-sliver: 22px;
--fs-gap: 6px;
--fs-open: 384px;
--fs-reel-h: 440px;
--fs-ease: cubic-bezier(0.16, 0.84, 0.3, 1);
--fs-dur: 0.9s;
--fs-gold: var(--amarelo);
width: 100%;
margin-top: var(--space-m);
}
.filmstrip__stage {
position: relative;
display: grid;
place-items: center;
min-height: auto;
padding: clamp(1.25rem, 3vh, 2rem) 0 clamp(1.75rem, 4vh, 2.75rem);
background: var(--branco-2);
color: var(--preto);
overflow: hidden;
}
.filmstrip__track {
position: relative;
width: min(92%, 1440px);
height: var(--fs-reel-h);
margin: 0 auto;
}
.filmstrip__frame {
position: absolute;
top: 0;
height: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: 2px;
cursor: pointer;
background-color: var(--linha);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: grayscale(0.45) brightness(0.92);
transition:
left var(--fs-dur) var(--fs-ease),
width var(--fs-dur) var(--fs-ease),
filter var(--fs-dur) var(--fs-ease);
-webkit-tap-highlight-color: transparent;
}
/* Fallback sem JS: abre o primeiro no centro aproximado */
.filmstrip:not(.is-live) .filmstrip__frame {
position: absolute;
left: calc(50% - (var(--fs-open) / 2));
width: var(--fs-sliver);
}
.filmstrip:not(.is-live) .filmstrip__frame.is-open {
width: var(--fs-open);
filter: none;
z-index: 2;
}
.filmstrip__frame.is-open {
filter: none;
z-index: 2;
}
.filmstrip__frame:focus-visible {
outline: 2px solid var(--preto);
outline-offset: 3px;
}
.filmstrip__bracket {
position: absolute;
top: 0;
height: 100%;
border: 2px solid var(--fs-gold);
border-radius: 2px;
box-shadow: 3px 3px 0 var(--preto);
pointer-events: none;
z-index: 3;
transition: left var(--fs-dur) var(--fs-ease), width var(--fs-dur) var(--fs-ease);
opacity: 0;
}
.filmstrip.is-live .filmstrip__bracket { opacity: 1; }
@media (max-width: 999px) {
.filmstrip {
--fs-open: 132px;
--fs-reel-h: 320px;
}
.filmstrip__stage { padding: 1rem 0 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
.filmstrip__frame,
.filmstrip__bracket {
transition: none !important;
}
}
/* Cases em páginas de capacidade (prova) — cards de texto, não o filmstrip */
.case { border-top: 3px solid var(--preto); padding-top: var(--space-s); }
.case__produto {
display: inline-block; background: var(--amarelo);
font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
text-transform: uppercase; padding: 0.25rem 0.5rem; margin-bottom: 0.6rem;
}
.case__title { font-size: 1.35rem; margin-bottom: 0.25rem; }
.case__seg { font-size: 0.85rem; color: var(--cinza); margin-bottom: 0.6rem; }
.case__texto { font-size: 0.95rem; color: var(--preto-2); margin: 0; }
.cases__nota {
margin-top: var(--space-l); font-family: var(--font-display);
color: var(--cinza); border-left: 6px solid var(--amarelo);
padding-left: var(--space-s); max-width: 56ch;
}
/* --- 6.6 PROCESSO -------------------------------------------------------- */
/* --- EXPLODED VIEW ---------------------------------------------------------
O layout final (a escada) é o layout NATURAL do CSS. O JS só aplica
transform por cima para levar as etapas ao estado juntas → separadas →
travadas. Assim, se o script não rodar, o que sobra é o layout certo. */
.xplode__scroll { position: relative; }
.xplode__stage { display: grid; gap: var(--space-m); }
/* A legenda não está dentro de um .wrap no HTML: sem esta largura ela cola na
borda da tela enquanto as etapas respeitam a margem, e as duas coisas
deixam de parecer o mesmo bloco. */
.xplode__caption {
width: var(--wrap); margin: 0 auto;
font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em;
color: var(--cinza);
position: relative;
z-index: 6;
padding-bottom: 0.35rem;
}
/* A área fixa e o cartão das etapas valem em qualquer largura — o exploded
view também roda no celular. O que muda por tamanho é só o arranjo final:
escada de quatro colunas no desktop, grade 2×2 no celular. */
.xplode.is-live .xplode__stage {
position: sticky; top: var(--header-h);
height: calc(100svh - var(--header-h));
align-content: center;
/* visible: o texto dos cards não pode ser decepado no explode */
overflow: visible;
padding-block: clamp(0.75rem, 2vh, 1.5rem);
box-sizing: border-box;
}
/* Na fase inicial as etapas ficam empilhadas. Sem fundo sólido, os quatro
textos se sobrepõem e viram borrão — por isso viram cartão opaco, e a
ordem de empilhamento é invertida para a etapa 01 ficar por cima. */
.xplode.is-live .passo {
background: var(--branco);
border: 2px solid var(--linha); border-top: 3px solid var(--preto);
padding: var(--space-s);
overflow: visible;
}
.xplode.is-live .passo p {
max-width: none;
}
.xplode.is-live .passo:nth-child(1) { z-index: 4; }
.xplode.is-live .passo:nth-child(2) { z-index: 3; }
.xplode.is-live .passo:nth-child(3) { z-index: 2; }
.xplode.is-live .passo:nth-child(4) { z-index: 1; }
@media (min-width: 900px) {
.xplode.is-live .xplode__scroll { height: 260vh; }
/* Escada: o degrau é o estado final em que as etapas travam */
.xplode.is-live .passo:nth-child(2) { margin-top: 2.5rem; }
.xplode.is-live .passo:nth-child(3) { margin-top: 5rem; }
.xplode.is-live .passo:nth-child(4) { margin-top: 7.5rem; }
}
@media (max-width: 899px) {
/* svh, não vh: com vh, a barra de endereço do celular entrando e saindo
muda a altura do trilho no meio da animação e as etapas dão um salto. */
.xplode.is-live .xplode__scroll { height: 230svh; }
/* Quatro etapas em coluna única não cabem na área fixa. Em 2×2 cabem, e o
arranjo final continua sendo o layout natural que o JS mede — por isso
measure() não precisa saber que existe uma versão mobile. */
.xplode.is-live .processo__steps {
grid-template-columns: 1fr 1fr;
gap: 0.5rem; align-content: center;
}
.xplode.is-live .passo { padding: 0.65rem 0.75rem; }
.xplode.is-live .passo__title { font-size: 0.95rem; margin-bottom: 0.3rem; }
.xplode.is-live .passo p {
font-size: 0.8rem;
line-height: 1.45;
max-width: none; /* no 2×2, o teto em ch cortava frases no meio */
}
.xplode.is-live .xplode__caption { font-size: 0.72rem; letter-spacing: 0.04em; }
}
.processo__steps { display: grid; gap: var(--space-m); }
.passo { border-top: 1px solid var(--linha); padding-top: var(--space-s); }
.passo__num {
font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.16em;
display: inline-block; background: var(--amarelo); padding: 0.1rem 0.4rem;
margin-bottom: 0.6rem;
}
.passo__title { font-size: 1.2rem; margin-bottom: 0.4rem; }
.passo p { color: var(--preto-2); font-size: 0.95rem; margin: 0; max-width: 44ch; }
.processo__note {
margin-top: var(--space-l); font-size: var(--fs-lead);
max-width: 46ch; border-left: 6px solid var(--amarelo); padding-left: var(--space-m);
}
@media (min-width: 720px) { .processo__steps { grid-template-columns: 1fr 1fr; gap: var(--space-l) var(--space-m); } }
@media (min-width: 1080px) { .processo__steps { grid-template-columns: repeat(4, 1fr); } }
/* --- 6.7 CONTATO --------------------------------------------------------- */
.contato { padding-bottom: var(--space-l); }
/* Faixa vazia onde a seta termina, logo acima do bloco de contato */
.contato__anchor { height: clamp(80px, 12vw, 140px); }
/* O bloco de fecho de TODAS as páginas — branco limpo + borda preta.
Amarelo ficou pesado; o CTA amarelo dos botões já carrega a marca. */
.contato__card {
background: var(--branco-2);
color: var(--preto);
border: 2px solid var(--linha);
padding: clamp(2rem, 6vw, 5rem);
border-radius: 2px;
}
.contato__card .eyebrow,
.contato__card .eyebrow--light {
color: var(--cinza);
}
.contato__title { font-size: var(--fs-h2); margin-bottom: var(--space-s); max-width: 16ch; }
.contato__text {
font-size: var(--fs-lead);
color: var(--preto-2);
max-width: 46ch;
}
.contato__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-block: var(--space-m); }
.contato__fine {
font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.8;
letter-spacing: 0.08em; color: var(--cinza); margin: 0;
}
/* Botões no card claro: CTA amarelo da marca + ghost preto. */
.contato__card .btn--amarelo {
background: var(--amarelo);
border-color: var(--amarelo);
color: var(--preto);
}
.contato__card .btn--amarelo:hover {
background: var(--preto);
border-color: var(--preto);
color: var(--branco);
}
.contato__card .btn--on-dark,
.contato__card .btn--ghost {
color: var(--preto);
border-color: var(--preto);
background: transparent;
}
.contato__card .btn--on-dark:hover,
.contato__card .btn--ghost:hover {
background: var(--amarelo);
color: var(--preto);
border-color: var(--preto);
}
/* --------------------------------------------------------------------------
6.8 PÁGINA DE SERVIÇO (servico-*.html)
-------------------------------------------------------------------------- */
.voltar {
display: flex; width: fit-content; align-items: center; gap: 0.5rem;
font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--cinza); text-decoration: none;
margin-bottom: var(--space-m);
}
.voltar:hover { color: var(--preto); }
.voltar::before { content: "←"; }
/* Marco invisível: só serve de ponto de medição para o trajeto. Ocupa altura
para a seta ter onde nascer, sem entrar na leitura da página. */
.trilho-marco { height: clamp(48px, 8vw, 96px); }
.servico-hero { padding-top: calc(var(--header-h) + var(--space-l)); }
.servico-hero__num {
font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.18em;
background: var(--amarelo); padding: 0.2rem 0.5rem; display: inline-block;
margin-bottom: var(--space-s);
}
.servico-hero__title { font-size: var(--fs-h1); line-height: 1.1; max-width: 16ch; margin-bottom: var(--space-s); }
.servico-hero__lead { font-size: var(--fs-lead); color: var(--preto-2); max-width: 52ch; }
.servico-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-m); }
/* --- Foto de abertura da página de solução --------------------------------
Uma foto do evento ao LADO da narrativa, não atrás dela.
Banner de fundo foi descartado por três motivos concretos: o H1 daqui é
escrito caractere a caractere pelo Typer e tem um amarelo no meio —
texto que se monta sobre foto exige um véu escuro por cima para continuar
legível, e véu é gradiente decorativo, que é justamente o que a paleta
desta marca não usa. Além disso as fotos são verticais: esticadas numa
faixa larga, sobra teto e corta gente.
Ao lado, o tipo continua no branco onde ele funciona, a foto entra inteira
na proporção em que foi tirada e a página reaproveita a mesma gramática de
duas colunas que o "quem somos" da home já usa.
-------------------------------------------------------------------------- */
.servico-hero__grid { display: grid; gap: var(--space-m); }
.servico-hero__foto { margin: 0; }
.servico-hero__quadro {
aspect-ratio: 3 / 4; overflow: hidden; background: var(--branco-2);
}
.servico-hero__quadro img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (min-width: 900px) {
.servico-hero__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
column-gap: var(--space-l);
align-items: center;
}
}
/* Abaixo de 900px a foto entra embaixo do texto, contida: em tamanho cheio ela
empurraria os botões da abertura para fora da primeira tela. */
@media (max-width: 899px) {
.servico-hero__foto { max-width: 240px; }
}
/* --------------------------------------------------------------------------
RETRATO — foto de colaborador
--------------------------------------------------------------------------
Um só componente para os dois lugares onde o time aparece: os cards de
"quem faz" das páginas de capacidade e o bloco "quem somos" da home.
Sempre quadrado e recortado por object-fit, para que fotos de origens
diferentes (estúdio, evento, avatar) fiquem no mesmo eixo.
Quem ainda não tem foto entra com .retrato--sigla: bloco preto com as
iniciais. É proposital — vazio se lê como erro, monograma se lê como
decisão. Assim que a foto chegar, troque o por um ![]()
e remova
a classe modificadora.
-------------------------------------------------------------------------- */
.retrato {
aspect-ratio: 1 / 1; overflow: hidden; margin: 0;
background: var(--branco-2);
}
.retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }
.retrato--sigla {
display: grid; place-items: center;
background: var(--preto); color: var(--amarelo);
font-family: var(--font-display); font-weight: 700;
font-size: clamp(1.5rem, 4.5vw, 2.4rem); letter-spacing: 0.04em;
}
/* Quem faz — o time responsável pela frente */
.time__grid {
display: grid; gap: var(--space-m);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.time__card { border-top: 3px solid var(--preto); padding-top: var(--space-s); }
.time__card .retrato { margin-bottom: var(--space-s); }
.time__papel {
display: inline-block; background: var(--amarelo);
font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em;
text-transform: uppercase; padding: 0.25rem 0.5rem; margin-bottom: 0.6rem;
}
.time__nome { font-size: 1.2rem; margin-bottom: 0.3rem; }
.time__desc { font-size: 0.92rem; color: var(--preto-2); margin: 0; }
.time__nota {
margin-top: var(--space-m); font-family: var(--font-display);
color: var(--cinza); border-left: 6px solid var(--amarelo);
padding-left: var(--space-s); max-width: 56ch; font-size: 0.95rem;
}
/* --------------------------------------------------------------------------
6.9 PÁGINA DE SOLUÇÃO — blocos do documento de conteúdo
--------------------------------------------------------------------------
As quatro páginas seguem a mesma arquitetura editorial: promessa, momento
de compra, problema, atuação, modalidades, processo, entregáveis, limites,
próximos passos e CTA. Estes blocos existem para essa sequência.
-------------------------------------------------------------------------- */
/* Lista corrida de qualificação ("faz sentido quando…"). Duas colunas em tela
larga porque são listas longas — em coluna única viram um paredão. */
.lista-marcada { display: grid; gap: 0.55rem; }
.lista-marcada li {
position: relative; padding-left: 1.4rem;
font-size: 0.97rem; color: var(--preto-2);
}
.lista-marcada li::before {
content: ""; position: absolute; left: 0; top: 0.55em;
width: 10px; height: 3px; background: var(--amarelo);
}
@media (min-width: 900px) {
.lista-marcada--duas { grid-template-columns: 1fr 1fr; gap: 0.55rem var(--space-l); }
}
/* Os limites do escopo. Marcador e cor diferentes de propósito: esta lista diz
o que NÃO entra, e ler igual à lista de entregáveis seria confuso. */
.lista-limites { display: grid; gap: 0.55rem; }
.lista-limites li {
position: relative; padding-left: 1.4rem;
font-size: 0.95rem; color: var(--cinza);
}
.lista-limites li::before {
content: ""; position: absolute; left: 0; top: 0.62em;
width: 10px; height: 2px; background: var(--linha);
}
@media (min-width: 900px) {
.lista-limites--duas { grid-template-columns: 1fr 1fr; gap: 0.55rem var(--space-l); }
}
/* Modalidades e frentes: os caminhos dentro de cada solução. */
.modalidades { display: grid; gap: var(--space-m); }
@media (min-width: 900px) { .modalidades--duas { grid-template-columns: 1fr 1fr; } }
.modalidade {
border-top: 3px solid var(--preto);
padding-top: var(--space-s);
}
.modalidade__nome { font-size: 1.35rem; margin-bottom: 0.4rem; }
.modalidade__desc { color: var(--preto-2); font-size: 0.97rem; }
.modalidade__rotulo {
font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--cinza);
margin: var(--space-s) 0 0.4rem;
}
/* Sub-modalidade: existe dentro de uma frente (ex.: Ativação de Base dentro de
Receita da Base e CRM). O filete lateral marca a subordinação sem precisar
de mais um nível de título. */
.submodalidade {
border-left: 3px solid var(--amarelo);
padding-left: var(--space-s);
margin-top: var(--space-s);
}
.submodalidade__nome { font-size: 1.05rem; margin-bottom: 0.3rem; }
/* O parágrafo que fecha uma modalidade vem logo depois da lista e colava nela.
Os itens da lista têm respiro entre si; a frase de fecho precisa de mais,
senão lê como se fosse mais um item. */
.lista-marcada + .modalidade__desc { margin-top: var(--space-s); }
/* "Como funciona": as etapas numeradas. Reaproveita o desenho do .passo da
home, mas sem o exploded view — aqui é leitura, não animação. */
.etapas { display: grid; gap: var(--space-m); counter-reset: etapa; }
@media (min-width: 720px) { .etapas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .etapas--muitas { grid-template-columns: repeat(4, 1fr); } }
.etapa { border-top: 1px solid var(--linha); padding-top: var(--space-s); }
.etapa__num {
font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.16em;
display: inline-block; background: var(--amarelo); padding: 0.1rem 0.4rem;
margin-bottom: 0.6rem;
}
.etapa__titulo { font-size: 1.05rem; margin-bottom: 0.4rem; }
.etapa p { color: var(--preto-2); font-size: 0.93rem; margin: 0; }
/* A frase que fecha um bloco — a honestidade sobre limites, o princípio de
não criar dependência. São afirmações de postura, não de escopo. */
.principio {
margin-top: var(--space-m);
border-left: 6px solid var(--amarelo);
padding-left: var(--space-m);
font-size: var(--fs-lead); color: var(--preto);
max-width: 52ch;
}
/* --------------------------------------------------------------------------
6.10 PÁGINAS LEGAIS — política de privacidade e termos de uso
--------------------------------------------------------------------------
Documento corrido de leitura: medida estreita, hierarquia tipográfica
simples, sem animação além do padrão do site. A régua amarela nos títulos
e nos marcadores mantém a identidade sem competir com o texto.
-------------------------------------------------------------------------- */
.legal-hero { padding: calc(var(--header-h) + var(--space-l)) 0 0; }
.legal-hero__title { font-size: var(--fs-h2); max-width: 22ch; margin-bottom: var(--space-s); }
.legal-hero__meta {
font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--cinza);
}
/* A medida de leitura é limitada nos FILHOS, não no contêiner. O bloco também
é .wrap: pôr max-width nele encolheria a própria caixa que o .wrap centraliza,
e o texto ora ficava centrado (com margin auto), ora colado na borda (sem
ela) — nos dois casos desalinhado do título, que segue a calha do site. */
.legal-doc > * { max-width: 68ch; }
.legal-doc h2 {
font-size: 1.4rem; margin: var(--space-l) 0 var(--space-s);
padding-top: var(--space-s); border-top: 3px solid var(--preto);
}
/* O primeiro título já tem o respiro da seção acima dele */
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc h3 { font-size: 1.05rem; margin: var(--space-m) 0 0.4rem; }
.legal-doc p, .legal-doc li { color: var(--preto-2); font-size: 0.97rem; }
.legal-doc ul { display: grid; gap: 0.45rem; margin: 0.6rem 0 1em; }
.legal-doc ul li { position: relative; padding-left: 1.4rem; }
.legal-doc ul li::before {
content: ""; position: absolute; left: 0; top: 0.55em;
width: 10px; height: 3px; background: var(--amarelo);
}
.legal-doc a { text-decoration-color: var(--amarelo); text-decoration-thickness: 2px; }
.legal-doc strong { color: var(--preto); }
/* Resumo de abertura: o que o documento diz, em linguagem de gente */
.legal-resumo {
border-left: 6px solid var(--amarelo); background: var(--branco-2);
padding: var(--space-s) var(--space-m); margin: var(--space-m) 0 0;
}
.legal-resumo p { margin: 0; }
/* --------------------------------------------------------------------------
7. RODAPÉ
-------------------------------------------------------------------------- */
/* Rodapé de FAIXA, não de bloco: marca e navegação dividem uma linha, os
dados cadastrais correm em outra. O aviso de cookies e de tratamento de
dados saiu daqui — ele vive por extenso nas páginas de Privacidade e
Termos, e repetido no rodapé só engordava a faixa com texto que ninguém lê
duas vezes.
O dock é fixo e paira sobre a página inteira: o fim do documento precisa
reservar a faixa dele, senão a razão social e o CNPJ ficam atrás do dock. */
.site-footer {
position: relative; z-index: 1;
border-top: 3px solid var(--preto);
padding-block: var(--space-m) calc(var(--space-m) + var(--dock-safe));
}
.site-footer__inner { display: grid; gap: var(--space-s); }
.site-footer__logo { height: 26px; width: auto; }
/* O menu é sempre horizontal. O wrap existe para telas estreitas, mas o vão
VERTICAL é zero: se os links quebrarem em duas fileiras, elas não podem
custar a altura de duas listas. */
.site-footer__links {
display: flex; flex-wrap: wrap; align-items: center;
gap: 0 clamp(0.85rem, 1.8vw, 1.5rem);
}
.site-footer__links a {
font-family: var(--font-display); font-size: 0.85rem;
text-decoration: none; color: var(--preto-2);
/* alvo de toque: com só a altura da linha, dava 19px */
display: inline-flex; align-items: center; min-height: 44px;
}
.site-footer__links a:hover { box-shadow: inset 0 -3px 0 var(--amarelo); }
.site-footer__legal { font-family: var(--font-mono); font-size: 0.64rem; line-height: 1.7; letter-spacing: 0.05em; color: var(--cinza); margin: 0; }
.site-footer__legal a { color: inherit; text-decoration-color: var(--amarelo); text-decoration-thickness: 2px; }
@media (min-width: 900px) {
/* Duas colunas, não três. Com os dados cadastrais numa terceira coluna eles
espremiam a navegação até ~70px e os sete links viravam uma PILHA de sete
fileiras — o oposto de um rodapé de faixa. Agora eles ocupam a largura
inteira na linha de baixo e a navegação fica com todo o espaço restante. */
.site-footer__inner { grid-template-columns: auto 1fr; align-items: center; }
.site-footer__legal { grid-column: 1 / -1; }
}
/* --------------------------------------------------------------------------
8. ACESSIBILIDADE — prefers-reduced-motion
Sem animação de scroll: a linha aparece inteira, a seta some, os
marcadores ficam todos acesos.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.reveal { opacity: 1; transform: none; }
.produto--solucao.produto--entra { opacity: 1; transform: none; }
.trail-pin { opacity: 1; }
}
.reduced-motion .trail__arrow { display: none; }
.reduced-motion .produto__media { position: static; }
/* --------------------------------------------------------------------------
10. MAPA DO BRASIL NA HERO + POPUP DE CASES
O mapa é uma cena WebGL de fundo transparente: mora numa coluna ao lado do
título e some sem estardalhaço se o navegador não der conta. A tela do
estado lista os clientes daquela UF agrupados por frente de atuação —
mesma marcação usada na página /mapa-cases, então as classes
.uf/.frente/.cliente/.case-ui vivem aqui e lá, em dois temas.
-------------------------------------------------------------------------- */
/* PAINEL: números e mapa são UM bloco só, empilhado — a cena em cima, a lista
logo abaixo dela. A última linha da lista pertence ao mapa, e é a
proximidade entre os dois que deixa isso óbvio; não é preciso régua nenhuma
por cima para amarrar o bloco. Antes o painel se dividia em duas colunas
internas; agora quem divide é a hero (copy | painel), e aqui basta uma. */
.hero__painel {
margin-top: var(--space-l);
display: grid; gap: var(--space-m); align-items: start;
}
/* Linha viva: é a linha do MAPA dentro da lista. Em repouso mostra o total de
estados; sob o cursor troca para a sigla + o estado, e a sigla ganha o
amarelo da seleção — o mesmo amarelo que acende no mapa ao lado. */
.hero__viva dt {
display: inline-block;
padding: 0 0.12em;
background: transparent;
transition: background-color 0.18s var(--ease);
}
.hero__viva dd {
font-family: var(--font-mono); font-size: var(--fs-eyebrow);
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--cinza-2, var(--cinza)); line-height: 1.5;
}
.hero__viva.is-ativa dt { background: var(--amarelo); }
.hero__viva.is-ativa dd { color: var(--preto); }
.hero__mapa { position: relative; }
.hero__mapa-palco {
width: 100%;
height: clamp(300px, 46vh, 520px);
/* touch-action: pan-y mantém a rolagem vertical no dedo — só dois dedos
giram o mapa (ver girarComUmDedo em mapa3d.js) */
touch-action: pan-y;
opacity: 0;
transition: opacity 0.6s var(--ease);
}
.hero__mapa-palco.is-pronto { opacity: 1; }
/* Convite comercial do mapa. Fica sobre o palco, ancorado no centro do estado
que o cursor está tocando — o JS só escreve o `transform`, o resto é daqui.
`pointer-events: none` é o detalhe que faz funcionar: sem isso o selo
nasceria debaixo do ponteiro e roubaria o clique que abre a tela do estado,
além de disparar um pisca-pisca de entra-e-sai no hover do próprio mapa. */
.hero__convite {
position: absolute; top: 0; left: 0; z-index: 3;
margin: 0; padding: 0.35rem 0.6rem;
background: var(--amarelo); color: var(--preto);
border: 2px solid var(--preto);
font-family: var(--font-mono); font-size: var(--fs-eyebrow);
letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
pointer-events: none;
opacity: 0; transition: opacity 0.18s var(--ease);
}
.hero__convite.is-on { opacity: 1; }
/* O selo é afordância de mouse: em tela de toque não há hover, e quem toca
já abre a tela do estado, onde a mesma oferta está escrita por extenso. */
@media (hover: none) { .hero__convite { display: none; } }
.hero__mapa-palco canvas { display: block; }
/* Na hero de duas colunas a cena divide a coluna com a lista de números, então
ela cede altura: é a única medida da hero que dá para encolher sem cortar
texto. Em svh, não vh — no celular com barra retrátil o vh mente, e é
justamente esta altura que decide se a hero cabe ou não em uma tela.
(Precisa vir DEPOIS da regra base: mesma especificidade, ganha a última.) */
@media (min-width: 900px) {
/* Na hero de duas colunas o painel não vem DEPOIS da copy, vem AO LADO: o
topo da cena nasce na mesma altura do eyebrow, sem a margem que existia
para separar os dois blocos empilhados. */
.hero__painel {
margin-top: 0;
/* A faixa de números pede o tamanho que precisa; a cena fica com TODO o
resto. Assim o mapa não tem altura própria: ele é o que sobra da altura
da copy ao lado — e cresce sozinho em monitor maior.
align-items volta a stretch (a base é start): sem isso o .hero__mapa
encolhe até o conteúdo e o height:100% do palco não tem contra o que
resolver. */
grid-template-rows: minmax(0, 1fr) auto;
align-items: stretch;
}
.hero__mapa { min-height: 0; }
.hero__mapa-palco { height: 100%; min-height: 240px; }
/* Na lista vertical a linha viva se anunciava pelo texto em mono/caixa alta.
Na faixa horizontal isso quebra a leitura — são quatro rótulos lado a lado
e um deles em outra fonte —, e o letter-spacing ainda empurrava o texto
mais comprido ("São Paulo — 14 clientes") para três linhas, altura que é
reservada de antemão e sai da cena. Aqui ela se iguala às outras três; o
que sinaliza que está viva é o amarelo que acende na sigla. */
.hero__viva dd {
font-family: inherit; text-transform: none;
font-size: 0.78rem; letter-spacing: 0; line-height: 1.35;
}
}
/* Notebook baixo (1366×768 e afins): as folgas do painel encostam para a cena
ficar com o máximo possível da altura da primeira tela. */
@media (min-width: 900px) and (max-height: 720px) {
.hero__painel { gap: var(--space-s); }
.hero__mapa-palco { min-height: 200px; }
}
/* -------------------------------------------------------- tela do estado
Não é um modal: é a TELA daquele estado, recortada no formato da UF e
crescendo até ocupar a viewport (portal-estado.js escreve o clip-path a
cada quadro). Por isso ela é opaca, cobre tudo e não tem fundo escuro
atrás — quando termina de abrir, é a página. */
.tela-estado {
position: fixed; inset: 0; z-index: 200;
background: var(--branco);
overflow: hidden;
/* clip-path é escrito pelo JS durante a transição; fora dela, some. */
}
.tela-estado[hidden] { display: none; }
/* Durante a expansão nada é clicável: evita acertar um botão no meio do voo. */
.tela-estado.em-transicao { pointer-events: none; }
.tela-estado__interior {
position: absolute; inset: 0;
display: flex; flex-direction: column;
/* a transform-origin é posta pelo JS EM CIMA do estado clicado: o conteúdo
cresce de dentro dele, não do centro da tela */
transform-origin: 50% 50%;
}
.tela-estado__topo {
flex: none;
display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
padding: var(--space-s) var(--space-m);
padding-top: max(var(--space-s), env(safe-area-inset-top, 0px));
border-bottom: 1px solid var(--linha);
}
.tela-estado__marcador {
margin: 0; display: flex; align-items: center; gap: 0.6rem;
font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
}
.tela-estado__uf {
font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
background: var(--amarelo); padding: 3px 7px; border-radius: 2px;
}
.tela-estado__fechar {
flex: none; min-height: 44px; cursor: pointer;
padding: 0.6rem 1.1rem;
border: 2px solid var(--preto); border-radius: 2px;
background: transparent;
font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
}
.tela-estado__fechar:hover { background: var(--amarelo); }
.tela-estado__corpo {
flex: 1 1 auto;
overflow-y: auto; overscroll-behavior: contain;
padding: var(--space-m);
padding-bottom: max(var(--space-m), env(safe-area-inset-bottom, 0px));
}
/* O miolo tem medida de leitura, mas a tela é cheia. */
.tela-estado .uf,
.tela-estado__corpo > .case-ui__frente,
.tela-estado__corpo > .case-ui__cliente,
.tela-estado__corpo > .case-ui__resumo,
.tela-estado__corpo > .case-ui__acoes { max-width: 760px; margin-inline: auto; }
.tela-estado .case-ui__cliente { font-size: var(--fs-h2); }
/* O nome do estado já está no cabeçalho da tela: repeti-lo aqui seria ruído. */
.tela-estado .uf__nome { display: none; }
/* ---------------------------------------------------- um case, num slide
A hierarquia é: a marca do cliente → de que frente é → QUEM é o cliente →
onde e de quê → o que descobrimos. O nome do cliente é o título porque é ele que a pessoa
reconhece; o título do case entra logo abaixo, como frase de abertura. */
/* A marca do cliente abre o slide. As logos chegam em proporções muito
diferentes — de um brasão quadrado a uma assinatura larga e baixa —, e
fixar só a altura faria a assinatura larga dominar a tela enquanto o brasão
encolhia. Por isso o que se fixa é uma CAIXA (altura e largura) e o desenho
se encaixa dentro dela: a marca larga esbarra na largura, a quadrada esbarra
na altura, e as duas terminam com peso parecido. A caixa tem tamanho próprio
mesmo antes de a imagem chegar, então nada pula quando ela carrega.
Cliente sem logo não ganha moldura vazia — a linha simplesmente não existe. */
.case-ui__logo { margin: 0 0 var(--space-s); }
.case-ui__logo img {
display: block; height: 56px; width: auto;
max-width: min(100%, 220px);
object-fit: contain; object-position: left center;
}
@media (max-width: 640px) {
.case-ui__logo img { height: 44px; max-width: min(100%, 170px); }
}
.case-ui__frente {
margin: 0; font-family: var(--font-mono); font-size: var(--fs-eyebrow);
letter-spacing: 0.14em; text-transform: uppercase; color: var(--cinza);
}
.case-ui__cliente {
margin: 0.5rem 0 0; font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-h3); line-height: 1.05; letter-spacing: -0.02em;
}
.case-ui__meta { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--cinza); }
.case-ui__titulo {
margin: var(--space-s) 0 0; font-family: var(--font-display); font-weight: 700;
font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.01em;
padding-top: var(--space-s); border-top: 3px solid var(--preto);
}
.case-ui__resumo { margin: 0.7rem 0 0; color: var(--preto-2); line-height: 1.6; }
.case-ui__corpo p { margin: 1rem 0 0; line-height: 1.7; color: var(--preto-2); }
/* Ressalva do case (dado em consolidação, anonimização): em voz baixa, mas
presente — sumir com ela vira promessa que o case não cumpre. */
.case-ui__nota {
margin: var(--space-s) 0 0; padding-left: 0.9rem; border-left: 2px solid var(--linha);
font-size: 0.85rem; color: var(--cinza); line-height: 1.6;
}
.case-ui__externo { margin: var(--space-s) 0 0; font-size: 0.85rem; }
.case-ui__acoes { display: flex; flex-wrap: wrap; gap: var(--space-s); margin: var(--space-m) 0 0; }
/* -------------------------------------------------- cabeçalho do estado */
.uf__cabeca { margin: 0 0 var(--space-m); }
.uf__nome {
margin: 0; font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-h3); line-height: 1.05; letter-spacing: -0.02em;
}
.uf__conta {
margin: 0.4rem 0 0; font-family: var(--font-mono); font-size: var(--fs-eyebrow);
letter-spacing: 0.14em; text-transform: uppercase; color: var(--cinza);
}
.metricas {
display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: var(--space-s); margin: var(--space-m) 0 0; padding: 0; list-style: none;
}
.metricas li { border-top: 3px solid var(--preto); padding-top: 0.5rem; }
.metricas b {
display: block; font-family: var(--font-display); font-size: 1.4rem;
line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance;
}
.metricas span { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--cinza); line-height: 1.35; }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: var(--space-m) 0 0; padding: 0; list-style: none; }
.tags li { font-size: 0.72rem; color: var(--cinza); border: 1px solid var(--linha); border-radius: 999px; padding: 0.25rem 0.7rem; }
/* -------------------------------------------------------------- carrossel
Um cliente por vez, e o case inteiro dentro do slide. A pista é um scroll
horizontal com snap: no touch o arrasto já funciona sozinho e as setas são
só um atalho de mouse. */
.carrossel { display: flex; flex-direction: column; }
.carrossel__pista {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
scroll-behavior: smooth;
/* Os slides têm alturas diferentes. Alinhar no topo impede que o mais curto
seja esticado, e o JS fixa a altura da pista na do slide visível — sem
isso, um case curto termina com um vão do tamanho do case mais longo.
`overflow-y: hidden` guarda os slides altos que estão fora de quadro. */
align-items: flex-start;
overflow-y: hidden;
transition: height 0.35s var(--ease);
}
.carrossel__pista::-webkit-scrollbar { display: none; }
.carrossel__pista:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 4px; }
.carrossel__slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; }
/* Barra de navegação no TOPO: quantos clientes há e como trocar, antes de
começar a ler — não depois de rolar seis parágrafos. */
.carrossel__nav {
display: flex; align-items: center; gap: var(--space-s);
margin-bottom: var(--space-s); padding-bottom: var(--space-s);
border-bottom: 1px solid var(--linha);
}
.carrossel__setas { display: flex; gap: 0.4rem; margin-left: auto; }
.carrossel__seta {
width: 44px; height: 44px; cursor: pointer;
border: 2px solid var(--preto); border-radius: 2px; background: transparent;
font-size: 1rem; line-height: 1;
transition: background-color 0.18s var(--ease), opacity 0.18s var(--ease);
}
.carrossel__seta:hover:not(:disabled) { background: var(--amarelo); }
.carrossel__seta:disabled { opacity: 0.25; cursor: default; }
.carrossel__conta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--cinza); flex: none; }
/* São Paulo tem 14 clientes, ou seja, 14 pontinhos. Eles encolhem em vez de
estourar a linha — largura fixa só até onde couber. */
.carrossel__pontos { display: flex; flex-wrap: wrap; gap: 0.25rem; min-width: 0; }
.carrossel__pontos button {
flex: 1 1 6px; min-width: 6px; max-width: 26px;
height: 4px; padding: 0; border: 0; cursor: pointer;
background: var(--linha); transition: background-color 0.18s var(--ease);
}
.carrossel__pontos button[aria-current="true"] { background: var(--preto); }
/* Cliente cujo case ainda não foi escrito: o slide diz isso, em voz baixa. */
.case-ui__breve {
margin: var(--space-s) 0 0; padding-top: var(--space-s);
border-top: 1px solid var(--linha);
max-width: 62ch; color: var(--cinza); line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
.hero__mapa-palco { opacity: 1; }
.carrossel__pista { scroll-behavior: auto; transition: none; }
}
/* --------------------------------------------------------------------------
INTRO — logo (ícone + proxima). Leve: só transform + opacity.
-------------------------------------------------------------------------- */
@font-face {
font-family: "AproximaHand";
src: url("assets/fonts/Caveat-Variable.ttf") format("truetype");
font-weight: 400 700;
font-style: normal;
font-display: block;
}
.intro {
position: fixed;
inset: 0;
z-index: 10000;
display: grid;
place-items: center;
overflow: hidden; /* evita scroll horizontal durante a queda das letras */
background: var(--branco);
color: var(--preto);
padding:
max(0.5rem, env(safe-area-inset-top))
max(0.75rem, env(safe-area-inset-right))
max(0.5rem, env(safe-area-inset-bottom))
max(0.75rem, env(safe-area-inset-left));
transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.intro.is-out {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.intro__stage {
display: grid;
place-items: center;
width: min(100%, 36rem);
transform: translateY(-2vh);
}
.intro__wordmark {
display: flex;
align-items: center;
justify-content: center;
gap: 0.1em;
max-width: 100%;
min-height: clamp(64px, 14vw, 110px);
}
.intro__mark {
width: clamp(44px, 11vw, 78px);
height: auto;
flex: none;
overflow: visible;
opacity: 0;
transform: translate3d(0, -24vh, 0) rotate(-8deg);
}
.intro__mark-l { fill: var(--amarelo); }
.intro__mark-r { fill: var(--ambar); }
.intro__mark-stroke {
stroke: var(--preto);
stroke-width: 2.4;
stroke-linejoin: round;
}
.intro.is-drop .intro__mark {
animation: intro-drop 0.55s cubic-bezier(0.22, 1.15, 0.36, 1) forwards;
}
@keyframes intro-drop {
0% { opacity: 0; transform: translate3d(0, -24vh, 0) rotate(-8deg); }
55% { opacity: 1; transform: translate3d(0, 6px, 0) rotate(2deg); }
78% { transform: translate3d(0, -3px, 0) rotate(-1deg); }
100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}
.intro__letters {
margin: 0;
font-family: "AproximaHand", "Segoe Print", "Bradley Hand", cursive;
/* Em tela estreita escala por vw para não estourar a largura */
font-size: clamp(1.85rem, 10.5vw, 4.35rem);
font-weight: 600;
line-height: 0.9;
letter-spacing: -0.01em;
color: var(--preto);
white-space: nowrap;
max-width: 100%;
}
.intro__letter {
display: inline-block;
opacity: 0;
transform-origin: 50% 100%;
--dx: 0px;
--dy: -14vh;
--rot: 0deg;
transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot));
}
.intro__letter[data-letter="r"] { --dx: -0.4em; --dy: -11vh; --rot: -6deg; }
.intro__letter[data-letter="o"] { --dx: 0px; --dy: -15vh; --rot: 4deg; }
.intro__letter[data-letter="x"] { --dx: 0.35em; --dy: -11vh; --rot: 6deg; }
.intro__letter[data-letter="i"] { --dx: 0px; --dy: -16vh; --rot: 0deg; }
.intro__letter[data-letter="m"] { --dx: 0px; --dy: -12vh; --rot: -3deg; }
.intro__letter[data-letter="a"] { --dx: 0px; --dy: -9vh; --rot: 2deg; }
.intro.is-sign .intro__letter[data-letter="p"] { animation: intro-letter 0.4s cubic-bezier(0.22, 1.2, 0.36, 1) 0.16s forwards; }
.intro.is-sign .intro__letter[data-letter="r"] { animation: intro-letter 0.4s cubic-bezier(0.22, 1.2, 0.36, 1) 0.22s forwards; }
.intro.is-sign .intro__letter[data-letter="o"] { animation: intro-letter 0.42s cubic-bezier(0.22, 1.25, 0.36, 1) 0.28s forwards; }
.intro.is-sign .intro__letter[data-letter="x"] { animation: intro-letter 0.4s cubic-bezier(0.22, 1.2, 0.36, 1) 0.34s forwards; }
.intro.is-sign .intro__letter[data-letter="i"] { animation: intro-letter 0.36s cubic-bezier(0.22, 1.15, 0.36, 1) 0.40s forwards; }
.intro.is-sign .intro__letter[data-letter="m"] { animation: intro-letter 0.42s cubic-bezier(0.2, 1.2, 0.36, 1) 0.46s forwards; }
.intro.is-sign .intro__letter[data-letter="a"] { animation: intro-letter 0.38s cubic-bezier(0.22, 1.15, 0.36, 1) 0.52s forwards; }
@keyframes intro-letter {
0% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)); }
55% { opacity: 1; transform: translate3d(0, 4px, 0) rotate(0deg) scale(1.02, 0.97); }
100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}
.intro.is-settled .intro__mark,
.intro.is-settled .intro__letter {
animation: none !important;
opacity: 1;
transform: none;
}
.intro__skip {
position: absolute;
right: max(0.5rem, env(safe-area-inset-right));
bottom: max(0.5rem, env(safe-area-inset-bottom));
min-width: 44px;
min-height: 44px;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cinza);
background: transparent;
border: 0;
padding: 0.75rem;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.intro__skip:hover { color: var(--preto); }
body.is-intro {
overflow: hidden;
height: 100%;
height: 100dvh;
}
body.is-intro .site-header,
body.is-intro .dock {
visibility: hidden;
}
/* Celular / tablet estreito: wordmark cabe, queda mais curta (barra do browser) */
@media (max-width: 719px) {
.intro__stage { transform: none; }
.intro__mark {
width: clamp(40px, 12vw, 52px);
transform: translate3d(0, -16vh, 0) rotate(-6deg);
}
.intro.is-drop .intro__mark {
animation: intro-drop-mobile 0.48s cubic-bezier(0.22, 1.15, 0.36, 1) forwards;
}
@keyframes intro-drop-mobile {
0% { opacity: 0; transform: translate3d(0, -16vh, 0) rotate(-6deg); }
55% { opacity: 1; transform: translate3d(0, 5px, 0) rotate(1.5deg); }
78% { transform: translate3d(0, -2px, 0) rotate(-0.5deg); }
100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}
.intro__letter { --dy: -10vh; }
.intro__letter[data-letter="r"] { --dx: -0.28em; --dy: -8vh; }
.intro__letter[data-letter="o"] { --dy: -11vh; }
.intro__letter[data-letter="x"] { --dx: 0.25em; --dy: -8vh; }
.intro__letter[data-letter="i"] { --dy: -12vh; }
.intro__letter[data-letter="m"] { --dy: -9vh; }
.intro__letter[data-letter="a"] { --dy: -7vh; }
.intro.is-sign .intro__letter[data-letter="p"],
.intro.is-sign .intro__letter[data-letter="r"],
.intro.is-sign .intro__letter[data-letter="o"],
.intro.is-sign .intro__letter[data-letter="x"],
.intro.is-sign .intro__letter[data-letter="i"],
.intro.is-sign .intro__letter[data-letter="m"],
.intro.is-sign .intro__letter[data-letter="a"] {
animation-duration: 0.34s;
}
}
@media (prefers-reduced-motion: reduce) {
.intro__mark,
.intro__letter {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* --------------------------------------------------------------------------
9. IMPRESSÃO
-------------------------------------------------------------------------- */
@media print {
.intro, .trail, .site-header, .hero__scroll, .dock, .hero__mapa, .tela-estado { display: none !important; }
body { background: #fff; }
.modo--exec, .contato__card { background: #fff !important; color: #000 !important; border: 2px solid #000; }
.contato__card .contato__fine,
.contato__card .contato__text { color: #000 !important; }
}