@charset "UTF-8";
/* ============================================================
Mentes & Letras Comunicação
Arquétipo: editorial de redação. Movimento: escala 3 de 5.
Assinatura visual: a linha de construção (o eixo comum do m e do l
no lockup). Vive na régua de abertura de seção, na coluna do retrato
do head e na numeração das frentes. Ver identidade.md.
============================================================ */
/* tokens.css e carregado por ANTES deste arquivo, em toda pagina.
Um @import aqui serializaria o download e atrasaria o LCP. */
/* ------------------------------------------------------------ 1. base */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scrollbar-color: var(--accent-soft) var(--surface-sunken);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
background: var(--surface-page);
color: var(--text-body);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-texto);
font-synthesis-weight: none;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 300;
line-height: var(--lh-tight);
letter-spacing: var(--ls-display);
color: var(--text-strong);
margin: 0;
text-wrap: balance;
}
p { margin: 0 0 var(--sp-4); text-wrap: pretty; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
::selection { background: var(--detail); color: #16202b; }
:where(a, button, input, textarea, summary):focus-visible {
outline: 2px solid var(--detail);
outline-offset: 3px;
border-radius: 2px;
}
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.skip {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--detail); color: #16202b;
padding: var(--sp-3) var(--sp-5);
font-family: var(--font-display); font-size: var(--fs-label);
letter-spacing: var(--ls-wide); text-transform: uppercase; text-decoration: none;
}
.skip:focus { left: var(--sp-4); top: var(--sp-4); }
/* ------------------------------------------------------------ 2. grade
12 colunas assimétrico de verdade: os blocos ocupam faixas
diferentes e desiguais, e a quebra é intencional em três pontos. */
.env {
width: min(100% - var(--gutter) * 2, var(--container));
margin-inline: auto;
}
.g12 {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: clamp(12px, 1.6vw, 26px);
}
/* Régua de abertura de bloco, com o tique vertical na origem.
Ela é a assinatura visual do projeto, e agora se DESENHA quando a
seção entra na tela: o fio corre da esquerda para a direita e o tique
amarelo acende no fim do traço. É o mesmo gesto da manchete do hero
(máscara de borda dura, da esquerda para a direita) aplicado ao
elemento que se repete em toda seção, então o site inteiro passa a
abrir com a mesma respiração.
Custo: zero layout. Anima só transform e opacity, e é dirigida por
view(), sem JavaScript. Onde não houver suporte, a régua já nasce
inteira, que é o estado final. */
.regua {
position: relative; height: 1px; background: var(--line-hair);
margin: 0 0 var(--sp-6); border: 0;
}
.regua::before {
content: ""; position: absolute; left: 0; top: -6px;
width: 1px; height: 13px; background: var(--detail);
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.regua {
transform: scaleX(0); transform-origin: left;
animation: regua-corre var(--dur-longa) var(--ease-marca) both;
animation-timeline: view();
animation-range: entry 12% entry 78%;
}
.regua::before {
opacity: 0;
animation: tique-acende var(--dur-curta) var(--ease) both;
animation-timeline: view();
animation-range: entry 62% entry 90%;
}
}
}
@keyframes regua-corre { to { transform: scaleX(1); } }
@keyframes tique-acende { to { opacity: 1; } }
.rotulo {
font-family: var(--font-display); font-size: var(--fs-label); font-weight: 400;
letter-spacing: var(--ls-wide); text-transform: uppercase;
color: var(--text-muted); margin: 0 0 var(--sp-3);
}
.em-ardosia .rotulo { color: var(--detail); }
/* ------------------------------------------------------------ 3. campos */
.em-ardosia { background: var(--surface-page); color: var(--text-body); }
.em-papel { background: var(--surface-inverse); color: var(--text-body); }
.secao { position: relative; padding-block: var(--section-y); }
/* ------------------------------------------------------------ 4. links */
a { color: inherit; }
/* Link. O amarelo vive no FIO, nunca no texto, nos dois campos.
Sobre ardósia o amarelo até passaria em contraste (6,6:1), mas dois ou três
links amarelos numa coluna viram ruído e competem com o nome do head.
A regra escrita em identidade.md é uma só: texto na cor forte, fio amarelo. */
.link {
color: var(--text-strong); text-decoration: none;
box-shadow: inset 0 -1px 0 var(--line-hair);
background-image: linear-gradient(var(--detail), var(--detail));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 2px;
transition: background-size var(--dur-micro) var(--ease);
padding-bottom: 1px;
}
.link:hover, .link:focus-visible { background-size: 100% 2px; }
.link:active { transform: translateY(1px); }
/* Botão. Cantos quase retos, borda em vez de sombra, quatro estados. */
.btn {
display: inline-flex; align-items: center; gap: var(--sp-3);
font-family: var(--font-display); font-size: var(--fs-label); font-weight: 400;
letter-spacing: var(--ls-wide); text-transform: uppercase;
padding: 15px 26px; border-radius: var(--r-sm);
border: 1px solid currentColor; background: none; color: var(--text-strong);
text-decoration: none; cursor: pointer;
transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease), transform var(--dur-micro) var(--ease);
}
.btn::after {
content: ""; width: 30px; height: 1px; background: currentColor;
transform: scaleX(0.6); transform-origin: left;
transition: transform var(--dur) var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--detail); border-color: var(--detail); }
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }
.em-papel .btn:hover, .em-papel .btn:focus-visible {
color: var(--surface-inverse); background: var(--accent); border-color: var(--accent);
}
.btn-cheio {
background: var(--detail); border-color: var(--detail); color: #16202b;
}
.btn-cheio:hover, .btn-cheio:focus-visible {
background: var(--detail-hover); border-color: var(--detail-hover); color: #16202b;
}
.pendente {
color: var(--text-faint); font-family: var(--font-display);
font-size: var(--fs-label); letter-spacing: 0.06em;
border-bottom: 1px dashed currentColor; cursor: not-allowed;
}
/* ------------------------------------------------------------ 5. header */
.site-header {
position: sticky; top: 0; z-index: 40;
background: color-mix(in srgb, var(--surface-page) 88%, transparent);
backdrop-filter: var(--blur-nav);
border-bottom: 1px solid transparent;
transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.is-scrolled .site-header { border-bottom-color: var(--line-on-dark-soft); }
.header-in {
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-5); min-height: var(--header-h);
}
.marca-link { display: inline-flex; align-items: center; color: var(--text-on-dark); }
/* Altura óptica de 26 a 32px no header. O lockup horizontal tem duas
linhas mais o descritor, então a caixa fica em 40px para a altura
óptica do lettering cair na faixa certa. */
.marca-link img { height: 40px; width: auto; }
/* Abaixo de 40px a horizontal fecha contraforma: entra a reduzida,
que é redesenhada em uma linha, não reescalada. */
.marca-link .logo-reduzida { display: none; }
.site-nav ul { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.site-nav a {
font-family: var(--font-display); font-size: var(--fs-label); font-weight: 400;
letter-spacing: var(--ls-wide); text-transform: uppercase;
color: var(--text-muted); text-decoration: none; white-space: nowrap;
padding: 6px 0; position: relative;
transition: color var(--dur-micro) var(--ease);
}
.site-nav a::after {
content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
background: var(--detail); transform: scaleX(0); transform-origin: left;
transition: transform var(--dur) var(--ease);
}
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.is-current { color: var(--text-on-dark); }
.site-nav a:hover::after, .site-nav a:focus-visible::after,
.site-nav a.is-current::after { transform: scaleX(1); }
.site-nav a:active { transform: translateY(1px); }
.nav-toggle {
display: none; background: none; border: 1px solid var(--line-on-dark);
border-radius: var(--r-sm); padding: 9px 12px; cursor: pointer;
color: var(--text-on-dark); font-family: var(--font-display);
font-size: var(--fs-label); letter-spacing: var(--ls-wide); text-transform: uppercase;
position: relative; min-width: 74px; min-height: 40px;
transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
/* O botão vira X quando o menu abre. Ele já está no canto superior
direito e continua visível com o painel aberto, então o X nasce no
lugar certo sem precisar de um segundo botão flutuando por cima do
conteúdo. Um controle só, dois estados. */
.nt-fechar, .nt-x { display: none; }
.menu-aberto .nav-toggle { border-color: var(--detail); color: var(--detail); }
.menu-aberto .nt-abrir { display: none; }
/* O rótulo "Fechar" fica no DOM mas fora da tela: quem lê com leitor de
tela ouve a ação certa, e quem enxerga vê o X. */
.menu-aberto .nt-fechar {
display: block; position: absolute; width: 1px; height: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.menu-aberto .nt-x {
display: block; position: absolute; inset: 0;
}
/* Dois fios de 1px cruzados, na mesma espessura das réguas do site. */
.menu-aberto .nt-x::before,
.menu-aberto .nt-x::after {
content: ""; position: absolute; top: 50%; left: 50%;
width: 17px; height: 1px; background: currentColor;
transform-origin: center;
}
.menu-aberto .nt-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.menu-aberto .nt-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* ------------------------------------------------------------ 6. hero
Tipografia plena. Sem foto, sem número, sem logo de cliente.
A manchete monta linha a linha, cada uma SOBREPONDO a anterior. */
/* O hero ocupa a tela. Antes ele terminava por conta do conteúdo e
sobrava campo vazio embaixo dos retratos; agora a altura é a da
janela, menos o header e a faixa de credencial, e o painel de rosto
preenche essa altura inteira. */
.hero {
position: relative;
padding-block: clamp(40px, 7vh, 84px) 0;
overflow: hidden;
}
@media (min-width: 1024px) {
.hero { display: flex; flex-direction: column; }
.hero-grade { flex: 1; min-height: min(660px, calc(100svh - var(--header-h) - 190px)); }
}
.hero-grade { position: relative; align-items: start; }
/* Coluna do texto. A manchete não ocupa mais a largura inteira: divide a
tela com o ativo visual do nicho, que é o rosto de quem assina. */
.hero-texto {
/* 2/9 vai até a coluna 8 INCLUSIVE. Os retratos começavam em 8 e os dois
disputavam a mesma coluna: o grid empurrava o painel para a linha
seguinte, e ele caía para baixo do texto. Ambos ficam presos à linha 1. */
grid-column: 2 / 8;
grid-row: 1;
padding-bottom: clamp(48px, 7vw, 96px);
align-self: center;
}
/* Escala própria, menor que --fs-display-xl: aqui a manchete divide a
largura com os retratos, e a de página interna não. Calibrada para
"Inteligência estratégica" caber em uma linha em 1440px. */
.hero-manchete {
font-size: clamp(2.05rem, 4.2vw, 3.9rem);
line-height: 0.96;
margin: 0 0 var(--sp-7);
}
.hero-manchete .l { display: block; position: relative; }
/* A sobreposição: cada linha invade a anterior e cobre. */
.hero-manchete .l + .l { margin-top: -0.055em; }
.hero-manchete .l:nth-child(1) { z-index: 1; }
.hero-manchete .l:nth-child(2) { z-index: 2; padding-left: 0.06em; }
.hero-manchete .l:nth-child(3) { z-index: 3; padding-left: 0.12em; color: var(--detail); }
.hero-apoio {
font-size: var(--fs-lead); color: var(--text-body);
max-width: 52ch; margin-bottom: var(--sp-7);
}
/* ---- Par de retratos, sangrado no topo e em alturas desiguais ----
Sangra para cima cancelando o padding do hero, e some por baixo numa
máscara de gradiente, do mesmo jeito que em "Quem assina": o fundo de
estúdio se funde à ardósia em vez de terminar numa borda. */
/* A marca no lugar dos retratos, a pedido do cliente em 18/08/2026.
Os rostos não saíram do site: continuam em "Quem assina", que é onde
eles são informação e não ilustração. Aqui quem abre a página é a
marca, e ela ocupa a coluna inteira.
A animação vive DENTRO do SVG, em CSS puro. Não há JavaScript, e a
sequência conta a construção do lockup: o eixo desce, "mentes" varre,
"letras" varre, o & abre de dentro para fora e o descritor fecha.
Família da vinheta CARIMBO do próprio cliente: borda dura, sem
rotação, sem escala, sem brilho passando. */
.hero-marca {
grid-column: 8 / -1;
grid-row: 1;
align-self: center;
display: grid; place-items: center;
padding-left: clamp(0px, 2vw, 40px);
}
.hero-marca .marca-hero { width: min(100%, 480px); height: auto; overflow: visible; }
/* ---- A animação da marca do hero ----
Vive aqui, e não dentro do arquivo SVG, porque SVG animado carregado
por ![]()
roda em documento próprio, com timeline própria, e não é
controlável pela página. Conferido lado a lado: por ![]()
o arquivo
renderizava vazio; inline, a página manda.
A sequência conta a CONSTRUÇÃO do lockup, e não é decorativa:
1. o eixo desce. É a vertical que o manual usa para construir o
lockup, onde a haste do m encontra a haste do l.
2. "mentes" varre a partir desse eixo.
3. "letras" varre em seguida.
4. o & abre de dentro para fora. Ele é o que LIGA as duas palavras,
então chega depois de existirem as duas coisas para ligar, e é o
único gesto que não vem da esquerda.
5. o descritor fecha.
6. o eixo recua para 34%: era andaime, vira o fio discreto que o
site usa em toda abertura de seção.
Família da vinheta CARIMBO do próprio cliente: borda dura varrendo,
sem rotação, sem escala, sem brilho passando, sem partícula. */
.marca-hero .mlh-eixo,
.marca-hero .mlh-l1,
.marca-hero .mlh-l2,
.marca-hero .mlh-amp,
.marca-hero .mlh-desc { opacity: 0; }
.marca-hero .mlh-eixo {
stroke: var(--detail); stroke-width: 2.6; fill: none;
stroke-dasharray: 320; stroke-dashoffset: 320;
}
@keyframes mlh-desce { to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes mlh-varre {
from { opacity: 1; clip-path: inset(0 100% 0 0); }
to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes mlh-abre {
from { opacity: 1; clip-path: inset(50% 0 50% 0); }
to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes mlh-recua { to { opacity: .34; } }
.js .marca-hero .mlh-eixo {
animation: mlh-desce 620ms var(--ease-marca) 140ms forwards,
mlh-recua 500ms linear 1560ms forwards;
}
.js .marca-hero .mlh-l1 { animation: mlh-varre 560ms var(--ease-marca) 440ms forwards; }
.js .marca-hero .mlh-l2 { animation: mlh-varre 560ms var(--ease-marca) 660ms forwards; }
.js .marca-hero .mlh-amp { animation: mlh-abre 460ms var(--ease-marca) 1000ms forwards; }
.js .marca-hero .mlh-desc { animation: mlh-varre 620ms var(--ease-marca) 1200ms forwards; }
/* Sem JS a classe .js não existe, então nada anima e tudo nasce visível:
o mesmo princípio do resto do site. */
html:not(.js) .marca-hero .mlh-eixo,
html:not(.js) .marca-hero .mlh-l1,
html:not(.js) .marca-hero .mlh-l2,
html:not(.js) .marca-hero .mlh-amp,
html:not(.js) .marca-hero .mlh-desc { opacity: 1; }
html:not(.js) .marca-hero .mlh-eixo { stroke-dashoffset: 0; opacity: .34; }
@media (prefers-reduced-motion: reduce) {
.marca-hero .mlh-eixo,
.marca-hero .mlh-l1,
.marca-hero .mlh-l2,
.marca-hero .mlh-amp,
.marca-hero .mlh-desc {
opacity: 1; animation: none; clip-path: none; stroke-dashoffset: 0;
}
.marca-hero .mlh-eixo { opacity: .34; }
}
/* ------------------------------------------------------------ 7. pilares */
.pilares { grid-column: 2 / -1; display: grid; gap: var(--sp-6);
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pilar { padding-top: var(--sp-4); border-top: 1px solid var(--line-hair); }
.pilar h3 { font-size: var(--fs-display-s); margin-bottom: var(--sp-3); }
.pilar p { font-size: 1rem; color: var(--text-muted); }
/* ------------------------------------------------------------ 8. frentes
A quebra de grid: três faixas desiguais, nenhuma alinhada com a
anterior. É onde o grid de 12 deixa de ser simétrico de verdade. */
.frentes {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: clamp(12px, 1.6vw, 26px);
}
.frente {
display: block; text-decoration: none; color: inherit;
position: relative; padding: var(--sp-6) 0 var(--sp-7);
border-top: 1px solid var(--line-hair);
}
/* Largura toda, e a assimetria vai para dentro do card: a coluna do
título é maior que a do escopo, e nenhuma das duas é metade. */
.frente { grid-column: 1 / -1; }
@media (min-width: 900px) {
.frente {
display: grid;
grid-template-columns: 1.25fr 1fr;
column-gap: clamp(32px, 6vw, 104px);
align-items: start;
}
}
.frente::before {
content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
background: var(--detail); transform: scaleX(0); transform-origin: left;
transition: transform var(--dur-slow) var(--ease);
}
.frente:hover::before, .frente:focus-visible::before { transform: scaleX(1); }
.frente:active { transform: translateY(1px); }
.frente-num {
font-family: var(--font-display); font-size: var(--fs-label);
letter-spacing: var(--ls-wide); color: var(--text-faint);
font-variant-numeric: tabular-nums; display: block; margin-bottom: var(--sp-4);
transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.frente:hover .frente-num, .frente:focus-visible .frente-num {
color: var(--detail); transform: translateX(4px);
}
.frente h3 { font-size: var(--fs-display-m); margin-bottom: var(--sp-4); max-width: 20ch; }
.frente p { color: var(--text-muted); max-width: 46ch; }
.frente-cab, .frente-escopo { display: block; }
.frente-escopo { padding-top: 4px; }
.frente-escopo .rotulo { display: block; margin-bottom: var(--sp-4); }
.frente-escopo ul { display: grid; gap: var(--sp-3); }
/* Marcador é o mesmo tique da assinatura visual: fio curto, não bolinha. */
.frente-escopo li {
position: relative; padding-left: var(--sp-5);
font-size: 0.94rem; color: var(--text-body);
}
.frente-escopo li::before {
content: ""; position: absolute; left: 0; top: 0.72em;
width: 11px; height: 1px; background: var(--detail);
}
@media (max-width: 899px) {
.frente-escopo { margin-top: var(--sp-6); }
}
.frente-mais {
display: inline-flex; align-items: center; gap: var(--sp-3);
margin-top: var(--sp-5);
font-family: var(--font-display); font-size: var(--fs-label);
letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-strong);
}
.frente-mais::after {
content: ""; width: 34px; height: 1px; background: currentColor;
transform: scaleX(0.59); transform-origin: left;
transition: transform var(--dur) var(--ease);
}
.frente:hover .frente-mais::after,
.frente:focus-visible .frente-mais::after { transform: scaleX(1); }
/* -------------------------------------------------- 8b. régua de anos
A linha de construção da marca, deitada, virando eixo de tempo.
Cada marca é posicionada pelo ANO real (--p), não por índice, e
marcas próximas sobem de faixa (--f) para não colidir. */
.titulo-secao { font-size: var(--fs-display-m); margin-bottom: var(--sp-5); }
.linha-lead { color: var(--text-muted); max-width: 62ch; }
.regua-anos { margin-top: clamp(36px, 5vw, 68px); }
/* ---- 1. a ESCALA ----
Só geometria: a linha de construção deitada, com um tique por ano na
posição real e uma barra por período. Não carrega texto, então não há
o que colidir. Some abaixo de 720px, onde 34 anos em 320px de largura
viram um borrão. */
.escala {
position: relative; height: 58px; margin-bottom: clamp(32px, 5vw, 56px);
}
.esc-eixo {
position: absolute; left: 0; right: 0; top: 22px;
height: 1px; background: var(--line-hair); display: block;
}
.esc-fill {
position: absolute; inset: 0; background: var(--detail);
transform: scaleX(0); transform-origin: left; display: block;
}
@supports (animation-timeline: view()) {
.esc-fill {
animation: regua-avanca linear both;
animation-timeline: view();
animation-range: entry 20% cover 55%;
}
}
@keyframes regua-avanca { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
.esc-fill { animation: none; transform: scaleX(1); opacity: .45; }
}
/* Tique de ano: sobe do eixo, e é o que marca acontecimento. */
.esc-tique {
position: absolute; left: var(--p); top: 11px;
width: 1px; height: 12px; background: var(--text-muted);
}
/* Barra de período: DESCE do eixo, e é o que marca duração.
Fica embaixo de propósito. Na primeira versão ela nascia em cima,
na mesma linha do fio de progresso, e os dois viravam uma tarja
amarela única: acontecimento e duração precisam ler diferente. */
.esc-periodo {
position: absolute; left: var(--p); top: 24px;
width: max(4px, var(--w)); height: 3px;
background: var(--detail); opacity: .62;
}
.esc-ponta {
position: absolute; top: 34px;
font-family: var(--font-display); font-size: var(--fs-micro);
letter-spacing: var(--ls-wide); color: var(--text-faint);
font-variant-numeric: tabular-nums;
}
.esc-ini { left: 0; }
.esc-fim { right: 0; }
/* ---- 2. a LISTA ----
Ordem cronológica, o ano em coluna própria alinhada. Fluxo normal, sem
posicionamento absoluto: nenhum fio atravessa o texto de ninguém. */
.eventos {
display: grid; gap: 0;
border-top: 1px solid var(--line-hair);
}
.evento {
display: grid;
grid-template-columns: minmax(112px, 148px) 1fr;
gap: clamp(16px, 3vw, 48px);
padding: clamp(18px, 2.4vw, 26px) 0;
border-bottom: 1px solid var(--line-hair);
position: relative;
}
/* O tique amarelo na origem de cada linha: a mesma marca da régua de
abertura de seção, que é a assinatura visual do projeto. */
.evento::before {
content: ""; position: absolute; left: 0; top: -1px;
width: 13px; height: 1px; background: var(--detail);
opacity: 0; transition: opacity var(--dur) var(--ease);
}
.evento:hover::before, .evento:focus-within::before { opacity: 1; }
.evento-ano {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(1.15rem, 1.7vw, 1.42rem); color: var(--text-strong);
font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
line-height: 1.2; white-space: nowrap;
}
.evento-corpo { display: block; }
.evento-quem {
display: block; font-style: normal;
font-family: var(--font-display); font-size: var(--fs-micro);
letter-spacing: var(--ls-wide); text-transform: uppercase;
color: var(--accent); margin-bottom: 5px;
}
.evento-texto { display: block; color: var(--text-muted); max-width: 62ch; }
@media (max-width: 719px) {
.escala { display: none; }
.evento {
grid-template-columns: 1fr; gap: var(--sp-2);
padding: var(--sp-5) 0;
}
}
/* ------------------------------------------------------------ 9. heads
Retrato em preto e branco, sangrado em coluna, com o fundo do
estúdio fundido à ardósia por máscara de gradiente. */
.heads { grid-column: 1 / -1; display: grid; gap: var(--sp-8) clamp(20px, 3vw, 56px);
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.head {
display: block; text-decoration: none; color: inherit; position: relative;
padding-left: var(--sp-5);
}
.head::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
background: var(--line-hair);
}
.head::after {
content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%;
background: var(--detail); transform: scaleY(0); transform-origin: top;
transition: transform var(--dur-slow) var(--ease);
}
.head:hover::after, .head:focus-visible::after { transform: scaleY(1); }
.head:active { transform: translateY(1px); }
/* Mesmo fio dos retratos do hero, no campo claro. */
.head-foto, .head-mini-foto { border: 1px solid var(--line-hair); }
.head-foto {
margin: 0 0 var(--sp-5); position: relative;
aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-sunken);
--mask-pos: 0%;
-webkit-mask-image: linear-gradient(to bottom, #000 0 62%, rgba(0,0,0,.55) 84%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0 62%, rgba(0,0,0,.55) 84%, transparent 100%);
}
.head-foto img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1) contrast(1.04);
transition: filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
/* object-position calibrado retrato a retrato. */
img[data-slot="head-paulo"] { object-position: 50% 24%; }
img[data-slot="head-alan"] { object-position: 50% 20%; }
.head:hover .head-foto img, .head:focus-visible .head-foto img {
filter: grayscale(0.72) contrast(1.06) sepia(0.16) hue-rotate(178deg);
}
.head h3 { font-size: var(--fs-display-s); margin-bottom: var(--sp-2); }
.head-espec { color: var(--text-muted); font-size: 1rem; max-width: 30ch; }
.head-legenda {
display: block; margin-top: var(--sp-4);
font-family: var(--font-display); font-size: var(--fs-label);
letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-faint);
transform: translateY(6px); opacity: 0;
transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.head:hover .head-legenda, .head:focus-visible .head-legenda { opacity: 1; transform: none; }
/* Placeholder material: o layout não muda quando a foto chega. */
.head-foto[data-slot-nome]::after {
content: attr(data-slot-nome); position: absolute; inset: 0;
display: grid; place-items: center; text-align: center; padding: var(--sp-4);
background: var(--surface-sunken);
background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 3px 3px;
font-family: var(--font-display); font-size: var(--fs-micro);
letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-faint);
}
.head-foto:has(img[src])::after { content: none; }
/* Revelação do retrato dirigida por scroll. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* Mesmo fio dos retratos do hero, no campo claro. */
.head-foto, .head-mini-foto { border: 1px solid var(--line-hair); }
.head-foto {
animation: retrato-emerge linear both;
animation-timeline: view();
animation-range: entry 8% cover 42%;
}
}
}
@keyframes retrato-emerge {
from { -webkit-mask-position: 0 -22%; mask-position: 0 -22%; opacity: .72; }
to { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 1; }
}
/* ------------------------------------------------------------ 10. clientes
Setor com contagem, não lista de nome. O número lidera, a barra dá o
peso relativo, e a régua entre linhas é a mesma da linha do tempo:
as duas seções passam a ler como a mesma família. */
.clientes { grid-column: 2 / -1; border-top: 1px solid var(--line-hair); }
.setor {
display: grid;
grid-template-columns: minmax(64px, 88px) 1fr minmax(90px, 220px);
align-items: center; gap: clamp(16px, 3vw, 44px);
padding: clamp(20px, 2.6vw, 30px) 0;
border-bottom: 1px solid var(--line-hair);
}
.setor-n {
font-family: var(--font-display); font-weight: 300;
font-size: clamp(2.1rem, 4vw, 3.1rem); line-height: 1;
color: var(--text-strong); letter-spacing: -0.02em;
}
.setor-nome { font-size: clamp(1rem, 1.4vw, 1.14rem); color: var(--text-body); }
/* A barra é proporcional ao maior setor: mostra peso sem inventar escala. */
.setor-barra {
display: block; height: 3px; background: var(--line-hair); position: relative;
}
.setor-barra::before {
content: ""; position: absolute; inset: 0 auto 0 0;
width: var(--barra, 0%); background: var(--detail);
transform: scaleX(0); transform-origin: left;
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.setor-barra::before {
animation: barra-cresce linear both;
animation-timeline: view();
animation-range: entry 18% cover 42%;
}
}
}
@keyframes barra-cresce { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
.setor-barra::before { transform: scaleX(1); }
}
.clientes-nota { grid-column: 2 / 9; margin-top: var(--sp-6); color: var(--text-muted); }
.clientes-total { color: var(--text-strong); }
@media (max-width: 719px) {
.setor {
grid-template-columns: minmax(52px, 64px) 1fr;
gap: var(--sp-3) var(--sp-4);
}
.setor-barra { grid-column: 1 / -1; margin-top: var(--sp-2); }
}
/* ------------------------------------------------------------ 11. clipping */
.clip { padding: var(--sp-4) 0; border-top: 1px solid var(--line-hair);
display: grid; gap: var(--sp-2) var(--sp-5);
grid-template-columns: minmax(140px, 200px) 1fr auto; align-items: baseline; }
.clip-veiculo {
font-family: var(--font-display); font-size: var(--fs-label);
letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted);
}
.clip-titulo { color: var(--text-strong); text-decoration: none;
box-shadow: inset 0 -1px 0 var(--line-hair);
transition: box-shadow var(--dur-micro) var(--ease); }
.clip-titulo:hover, .clip-titulo:focus-visible { box-shadow: inset 0 -2px 0 var(--detail); }
.clip-titulo:active { transform: translateY(1px); }
.clip-data { font-size: var(--fs-micro); color: var(--text-faint);
font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------ 12. método e números */
.metodo { grid-column: 2 / -1; display: grid; gap: var(--sp-5);
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.etapa { border-top: 1px solid var(--line-hair); padding-top: var(--sp-4);
font-family: var(--font-display); color: var(--text-strong); }
.etapa-num { display: block; color: var(--detail); font-size: var(--fs-label);
letter-spacing: var(--ls-wide); font-variant-numeric: tabular-nums;
margin-bottom: var(--sp-3); }
.facts { grid-column: 2 / -1; display: grid; gap: var(--sp-6);
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.fact strong { display: block; font-family: var(--font-display); font-weight: 300;
font-size: var(--fs-display-m); color: var(--text-strong);
font-variant-numeric: tabular-nums; }
.fact span { color: var(--text-muted); font-size: 0.95rem; }
/* ------------------------------------------------------------ 13. contato
Termina no formulário e nos canais diretos. Sem mapa, sem endereço,
sem horário. O formulário não pede cidade nem CEP. */
.contato-texto { grid-column: 2 / 7; }
.contato-form { grid-column: 8 / -1; }
.campo { display: block; margin-bottom: var(--sp-5); }
.campo > span {
display: block; margin-bottom: var(--sp-2);
font-family: var(--font-display); font-size: var(--fs-label);
letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted);
}
.campo input, .campo textarea {
width: 100%; font: inherit; font-size: 1rem; color: var(--text-strong);
background: transparent; border: 0; border-bottom: 1px solid var(--line-hair);
padding: 10px 0; border-radius: 0;
transition: border-color var(--dur) var(--ease);
}
.campo input:hover, .campo textarea:hover { border-bottom-color: var(--accent-soft); }
.campo input:focus, .campo textarea:focus {
outline: none; border-bottom-color: var(--detail); border-bottom-width: 2px;
}
.campo textarea { resize: vertical; min-height: 110px; }
.campo-erro { display: block; margin-top: var(--sp-2); color: var(--detail);
font-family: var(--font-display); font-size: var(--fs-micro);
letter-spacing: 0.04em; }
.em-papel .campo-erro { color: #9d2b1f; }
.form-nota {
margin-top: var(--sp-4); font-size: 0.86rem; color: var(--text-muted);
max-width: 46ch;
}
.form-status { margin-top: var(--sp-4); font-family: var(--font-display);
font-size: var(--fs-label); letter-spacing: var(--ls-wide);
text-transform: uppercase; color: var(--text-muted); min-height: 1.2em; }
.canais { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }
.canais a { color: var(--text-strong); text-decoration: none;
box-shadow: inset 0 -1px 0 var(--line-hair);
transition: box-shadow var(--dur-micro) var(--ease); }
.canais a:hover, .canais a:focus-visible { box-shadow: inset 0 -2px 0 var(--detail); }
.canais a:active { transform: translateY(1px); }
/* O número lidera, o canal fica em segundo plano: quem lê anota o número. */
.canal-tipo { font-family: var(--font-display); font-size: var(--fs-micro);
letter-spacing: var(--ls-wide); text-transform: uppercase;
color: var(--text-muted); }
/* ------------------------------------------------------------ 14. rodapé */
.site-footer { background: var(--surface-sunken); padding-block: var(--sp-8) var(--sp-6); }
.footer-in { display: grid; gap: var(--sp-7);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.footer-marca svg { height: 62px; width: auto; color: var(--text-on-dark); }
.footer-frase { margin-top: var(--sp-4); color: var(--text-muted); font-size: 0.95rem;
max-width: 30ch; }
.footer-atuacao { margin-top: var(--sp-3); font-family: var(--font-display);
font-size: var(--fs-label); letter-spacing: var(--ls-wide);
text-transform: uppercase; color: var(--text-faint); }
.footer-nav ul, .footer-canais { display: grid; gap: var(--sp-3); }
.footer-in a { color: var(--text-muted); text-decoration: none;
transition: color var(--dur-micro) var(--ease); }
.footer-in a:hover, .footer-in a:focus-visible { color: var(--detail); }
.footer-in a:active { transform: translateY(1px); }
.footer-legal {
margin-top: var(--sp-8); padding-top: var(--sp-5);
border-top: 1px solid var(--line-on-dark-soft);
display: grid; gap: var(--sp-2);
font-size: 0.8rem; color: var(--text-muted);
}
/* Assinatura do autor: menor e mais discreta que a linha legal do cliente. */
.footer-author {
grid-column: 1 / -1; margin-top: 12px;
font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.06em;
color: var(--text-faint);
}
.footer-author a {
color: inherit; text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer-author a:hover, .footer-author a:focus-visible {
color: var(--detail); border-bottom-color: currentColor;
}
.footer-author a:active { transform: translateY(1px); }
/* ------------------------------------------------------------ 15. páginas internas */
.pagina-hero { padding-block: clamp(48px, 9vh, 100px) var(--sp-8); position: relative; }
.voltar {
grid-column: 2 / -1; display: inline-flex; align-items: center; gap: var(--sp-3);
font-family: var(--font-display); font-size: var(--fs-label);
letter-spacing: var(--ls-wide); text-transform: uppercase;
color: var(--text-muted); text-decoration: none; margin-bottom: var(--sp-6);
}
.voltar::before { content: ""; width: 34px; height: 1px; background: currentColor;
transform: scaleX(0.65); transform-origin: left;
transition: transform var(--dur) var(--ease); }
.voltar:hover, .voltar:focus-visible { color: var(--detail); }
.voltar:hover::before, .voltar:focus-visible::before { transform: scaleX(1); }
.voltar:active { transform: translateY(1px); }
.pagina-num { grid-column: 2 / -1; font-family: var(--font-display);
font-size: var(--fs-label); letter-spacing: var(--ls-wide);
color: var(--detail); font-variant-numeric: tabular-nums;
margin-bottom: var(--sp-4); }
.pagina-titulo { grid-column: 2 / 11; font-size: var(--fs-display-xl); margin-bottom: var(--sp-6); }
.pagina-resumo { grid-column: 2 / 9; font-size: var(--fs-lead); color: var(--text-body); }
.bloco { grid-column: 2 / 9; }
.bloco-lado { grid-column: 9 / -1; }
.bloco h2 { font-size: var(--fs-display-m); margin-bottom: var(--sp-5); }
.bloco h3 { font-size: var(--fs-display-s); margin-bottom: var(--sp-4); }
.lista-marcada li {
position: relative; padding-left: var(--sp-5); margin-bottom: var(--sp-4);
color: var(--text-body);
}
.lista-marcada li::before {
content: ""; position: absolute; left: 0; top: 0.72em;
width: 11px; height: 1px; background: var(--detail);
}
.destaque {
border-left: 1px solid var(--line-hair); padding-left: var(--sp-5);
margin: var(--sp-6) 0; color: var(--text-muted); font-size: 1rem;
}
/* head-*.html */
.head-topo { display: grid; gap: var(--sp-7) clamp(24px, 4vw, 64px);
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.head-retrato { position: relative; padding-left: var(--sp-5); max-width: 540px; }
.head-retrato::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
width: 1px; background: var(--line-hair); }
.head-retrato /* Mesmo fio dos retratos do hero, no campo claro. */
.head-foto, .head-mini-foto { border: 1px solid var(--line-hair); }
.head-foto { margin-bottom: 0; }
.head-nome { font-size: var(--fs-display-xl); margin-bottom: var(--sp-3); }
.head-sub { font-family: var(--font-display); font-size: var(--fs-lead);
color: var(--detail); margin-bottom: var(--sp-6); }
.em-papel .head-sub { color: var(--accent); }
.head-bio p { font-size: var(--fs-body-lg); }
.head-bio p:first-child { font-size: var(--fs-lead); }
.head-dados { margin-top: var(--sp-7); display: grid; gap: var(--sp-6);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.head-dados h3 { font-family: var(--font-display); font-size: var(--fs-label);
letter-spacing: var(--ls-wide); text-transform: uppercase;
color: var(--text-muted); margin-bottom: var(--sp-3); font-weight: 400; }
.head-dados li { margin-bottom: var(--sp-2); color: var(--text-strong); }
.assinadas li { display: grid; gap: var(--sp-1) var(--sp-5);
grid-template-columns: 1fr auto; align-items: baseline;
padding: var(--sp-4) 0; border-top: 1px solid var(--line-hair); }
.assinadas .ano { font-family: var(--font-display); font-size: var(--fs-label);
color: var(--text-faint); font-variant-numeric: tabular-nums; }
.corpo p { font-size: var(--fs-body-lg); }
.corpo p:first-child { font-size: var(--fs-lead); }
.heads-mini { display: grid; gap: var(--sp-6);
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.head-mini { display: block; text-decoration: none; color: inherit;
border-top: 1px solid var(--line-hair); padding-top: var(--sp-4); }
.head-mini-foto { margin: 0 0 var(--sp-4); aspect-ratio: 1 / 1; overflow: hidden;
max-width: 130px; background: var(--surface-sunken); border-radius: var(--r-sm); }
.head-mini-foto img { width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1) contrast(1.04);
transition: filter var(--dur-slow) var(--ease); }
.head-mini:hover .head-mini-foto img, .head-mini:focus-visible .head-mini-foto img {
filter: grayscale(0.72) contrast(1.06) sepia(0.16) hue-rotate(178deg);
}
.head-mini-nome { display: block; font-family: var(--font-display);
font-size: 1.1rem; color: var(--text-strong); }
.head-mini-espec { display: block; font-size: 0.9rem; color: var(--text-muted);
margin-top: 2px; max-width: 26ch; }
.head-mini:active { transform: translateY(1px); }
.outras li { padding: var(--sp-4) 0; border-top: 1px solid var(--line-hair); }
.outras .tabular { color: var(--text-faint); margin-right: var(--sp-2); }
/* Transição entre páginas. Degrada limpo em quem não suporta. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
@view-transition { navigation: none; }
}
/* ------------------------------------------------------------ 16. abertura */
/* A abertura sai sozinha, por CSS, e o JavaScript só antecipa a saída.
Antes ela dependia do JS para ser removida: se o script não rodasse por
qualquer motivo (erro, bloqueio, rede), o painel cobria o site inteiro
para sempre. Agora o pior caso é a abertura durar 1,4s a mais. */
.opening {
position: fixed; inset: 0; z-index: 90;
background: var(--surface-page);
display: grid; place-items: center;
animation: opening-sai 420ms var(--ease-saida) 1040ms forwards;
}
.opening img, .opening svg { width: min(52vw, 380px); height: auto; color: var(--text-on-dark); }
.opening.is-out { animation-delay: 0ms; }
@keyframes opening-sai {
to { clip-path: inset(0 0 0 100%); opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .opening { display: none; } }
/* ------------------------------------------------------------ 17. revelação
O HTML nasce VISÍVEL. A classe .js é o que liga o estado inicial.
Sem JavaScript nada some. Escala 2: máscara de borda dura mais 16px.
A cadência vem de --peso, o comprimento do próprio texto. */
.js .reveal {
opacity: 0;
transform: translateY(var(--mv-desloc));
clip-path: inset(0 100% 0 0);
transition:
opacity var(--dur-slow) var(--ease) calc(var(--mv-stagger) * var(--peso, 0)),
transform var(--dur-slow) var(--ease) calc(var(--mv-stagger) * var(--peso, 0)),
clip-path var(--dur-slow) var(--ease) calc(var(--mv-stagger) * var(--peso, 0));
}
.js .reveal.is-visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
.js .reveal { opacity: 1; transform: none; clip-path: none; transition: none; }
}
/* Seção cujo conteúdo é montado inteiramente por JavaScript. Sem JS ela
viraria uma faixa de cor vazia com o padding da seção, que é pior que
não existir. A classe .js é escrita no antes do CSS pintar. */
html:not(.js) .secao-js { display: none; }
/* Sem JS, o bloco da esquerda da página de frente (como a agência
trabalha) não é montado. O escopo, que tem fallback, assume a coluna
principal em vez de ficar sozinho na lateral direita. */
html:not(.js) .bloco-lado { grid-column: 2 / 10; }
/* ------------------------------------------------------------ 18. responsivo */
@media (max-width: 1023px) {
/* Em telas estreitas o conteúdo usa a largura toda do contêiner: o
recuo de uma coluna do desktop estoura o botão e a manchete. */
.hero-texto { grid-column: 1 / -1; padding-bottom: var(--sp-7); }
.hero-apoio { max-width: 58ch; }
.btn { flex-wrap: wrap; max-width: 100%; }
/* Abaixo de 1024px o painel DESCE para baixo do texto. As duas regras
que o põem ao lado (mesma linha do grid e sangria até a borda) são de
desktop e precisam ser desfeitas aqui: sem isso os dois caem na mesma
célula e o retrato passa por cima da manchete. */
.hero-texto, .hero-marca { grid-row: auto; align-self: auto; }
.hero-marca {
grid-column: 1 / -1;
padding-left: 0; margin-bottom: var(--sp-7);
/* Sem margin-top: ".hero-texto" (linha ~993) já tem padding-bottom:
var(--sp-7) — as duas regras juntas somavam 96px acima da marca
contra ~58px abaixo dela (só o padding-top da próxima seção), bem
mais espaço em cima do que embaixo. Uma única fonte de espaço de
cada lado.
O margin-bottom continua porque ".hero" (linha ~277) tem
padding-block "... 0": sem espaço embaixo, herdado de quando o
retrato bleedava até a borda da tela (comentário logo acima da
regra). A marca não bleeda mais, e sem essa margem o fundo
ardósia terminava colado nela, sem respiro antes da próxima
seção. */
justify-items: center;
/* "justify-items" acima só alinha o SVG DENTRO de .hero-marca. O
próprio .hero-marca, como item da grade do hero, continua
esticando (stretch, o padrão) até preencher a coluna inteira —
por isso "width" abaixo não bastava sozinho: era preciso
"justify-self" para o item parar de esticar e assumir só o
próprio tamanho, aí sim centralizável na coluna. */
justify-self: start;
/* justify-self:center chegou a valer mais largura que a coluna e
vazava pela direita (o mesmo com width:min()/clamp() no lugar de
max-width) — não investiguei a fundo por quê, só constatei que
"start" com max-width é a combinação que efetivamente respeita a
coluna. Centralizo por cima disso com margin-inline:auto, que
distribui a sobra dos dois lados sem depender de justify-self. */
max-width: 340px;
margin-inline: auto;
}
/* Era ".hero-marca img": a marca virou