/* ═══════════════════════════════════════════════════════════════════════════
AS PÁGINAS QUE NÃO SÃO A HOME NEM UMA DAS QUATRO DE SERVIÇO
Roosevelt Amazon Expedition · rota D
`site.css` é a home, `servico.css` é o template das quatro expedições, e
esta folha é o resto: a página-mãe, o quem somos, o journal com o molde de
post, e o contato.
ELA É PEQUENA DE PROPÓSITO. Quase tudo do que estas páginas precisam já
existe nas duas outras folhas, e reaproveitar é o que torna oito páginas
viáveis em rota D. Aqui mora só o que não existia:
numeros a faixa de número SOBRE PAPEL CLARO · ver §1, é correção de cor
compara a tabela das quatro lado a lado
linha a linha do tempo do quem somos
post o cartão e o índice do journal
artigo o corpo de um post, que é o molde que o cliente vai repetir
form o formulário de contato
═══════════════════════════════════════════════════════════════════════════ */
@layer kng-projeto {
/* ── 0 · Hero curto ──────────────────────────────────────────────────────
O `hero--servico` já é mais baixo que o da home porque a página de serviço
abre um produto. Índice de blog e página de contato abrem MENOS que isso:
quem chega neles quer a lista ou o formulário, e uma dobra inteira de foto
antes disso é um obstáculo com cara de capricho. */
.hero--curto { min-block-size: min(58svh, 520px); }
.hero--curto .display-xl { font-size: clamp(30px, 5vw, 64px); }
/* ── 1 · A faixa de número sobre papel claro ─────────────────────────────
ESTA CLASSE EXISTE POR UM ERRO DE TOKEN QUE QUASE FOI PARA O AR, e vale
registrar porque é a armadilha mais fácil desta paleta.
A faixa de prova da home é `.prova`, e ela TRAZ O PRÓPRIO FUNDO ESCURO
junto. O número dela é `acento_sobre_escuro`, #73B5B1, que é o token feito
para viver sobre o verde. Reaproveitar só o `.prova__grade` dentro de uma
seção clara parecia economia: o mesmo número, a mesma escala, sem código
novo. Só que o teal claro sobre o creme `#FAF4EC` mede perto de 2:1.
O token certo sobre papel claro é `acento_sobre_claro`, #3A6E6B, que é
exatamente para isso que ele existe. Sobre o creme dá 5,4:1, e sobre o
papel base dá mais. A lição é a de sempre nesta casa: a cor não se escolhe
pelo nome bonito, se escolhe pela superfície em que ela vai cair. */
.numeros { display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(28px, 4vw, 56px); align-items: baseline;
margin-block-start: clamp(40px, 6vw, 72px); }
.numeros--duplo { grid-template-columns: repeat(2, 1fr);
max-inline-size: var(--larg-conteudo); margin-inline: auto; }
.numeros__n {
font-family: var(--fam-display); font-weight: 400;
font-size: clamp(38px, 6vw, 80px); line-height: .86; letter-spacing: -.04em;
color: var(--acento-sobre-claro); margin: 0 0 var(--esp-sm);
/* "14 mi" e "1h50" partiam em duas linhas e desalinhavam a fileira inteira,
porque a unidade conta como palavra. Mesma correção do `prova--cartaz`. */
white-space: nowrap;
}
.numeros__l { font-size: var(--texto-ficha); line-height: 1.4;
color: var(--texto-medio); max-inline-size: 22ch;
margin-block-start: var(--esp-md); }
.numeros .sinal { color: var(--acento-sobre-claro); }
@media (max-width: 760px) {
.numeros { grid-template-columns: repeat(2, 1fr); gap: var(--esp-lg) var(--esp-md); }
.numeros--duplo { grid-template-columns: 1fr; }
}
/* ── 2 · A tabela das quatro ─────────────────────────────────────────────
TABELA DE VERDADE, com `| `, porque quem compara quatro produtos
num leitor de tela precisa ouvir o cabeçalho da linha e o da coluna junto
com a célula. Quatro `div` lado a lado não fazem isso.
NO TELEFONE ELA VIRA FICHA, SEM TROCAR O MARKUP. Cada linha vira um cartão
com o ` | ` de título, e cada célula ganha por `::before` o
rótulo da COLUNA a que pertence, lido de `data-c`.
A COLUNA, E NÃO A LINHA, e essa é a correção que só apareceu no print. A
primeira versão repetia o rótulo da linha em cada célula, e o cartão saía
com quatro valores sem dono: `You come for · Giant catfish`, `You come for ·
330+ species`... Quem lê no telefone não sabia de qual expedição era cada
uma, que é exatamente a única coisa que a tabela existe para dizer. O que
some na largura estreita é o ``, então é ele que precisa voltar. */
.compara { margin-block-start: clamp(32px, 5vw, 56px); }
.compara table { inline-size: 100%; border-collapse: collapse; text-align: start; }
/* `display: block` NUMA `` A TIRA DA FENDA DELA. O elemento deixa
de ser `table-caption`, o navegador o reembrulha como bloco anonimo dentro
da caixa da tabela, e ele desenhava ENTRE o `thead` e a primeira linha,
lendo como um rotulo solto da coluna da esquerda. Medido: y 2.570, com o
`thead` acabando em 2.569. Sem `display`, ela volta para cima da tabela. */
.compara caption { text-align: start; color: var(--texto-sutil);
caption-side: top; margin-block-end: var(--esp-md); }
/* ── A FACE DE CADA COLUNA ─────────────────────────────────────────────
A TABELA PASSA A TER COLUNA DE LARGURA FIXA, e e a foto que obriga.
Com largura automatica o navegador dimensiona cada coluna pelo conteudo
dela: medido em 1440, as quatro davam 240, 145, 230 e 145 px. Enquanto o
conteudo era so texto isso passava despercebido; com uma foto em 4/3 em
cada cabeca, as quatro saem de alturas diferentes e os quatro rotulos
caem em quatro linhas de base diferentes numa fileira so.
`table-layout: fixed` resolve na origem, e as larguras tem de ser ditas
na PRIMEIRA linha, que e a do `thead`: e ela que define as colunas neste
modo. A coluna dos rotulos de linha ja pedia 12rem no `tbody`, e agora
pede no lugar onde a conta acontece. */
.compara table { table-layout: fixed; }
/* A CALHA DOS ROTULOS ENCOLHE DE 12rem PARA 9rem, e a tabela sai da coluna de
leitura para a largura inteira da secao. As duas coisas existem pela mesma
razao: a fotografia de cada coluna media 190 por 143 px, que e miniatura, e
ao lado das celulas de 310 px logo acima ela lia como se a comparacao
fosse um apendice do bloco anterior em vez do argumento da pagina.
A conta: em `env--conteudo` sobravam (1.080 - 192) / 4 = 222 px por coluna.
Em `env`, com a calha em 144, sao (1.360 - 144) / 4 = 304. */
.compara thead td:first-child { inline-size: 9rem; }
.compara thead th { inline-size: calc((100% - 9rem) / 4); }
.compara tbody th { inline-size: 9rem; }
/* O QUADRADO, E NAO O 4/3. As celulas do `#four` sao retratos 3/4, e a face da
coluna fica entre os dois registros: quadrada ela ganha 90 px de altura, lê
como retrato da expedicao e nao como print de apoio. Area da fotografia:
27.170 px antes, 73.984 depois. */
.compara__face { display: block; inline-size: 100%; aspect-ratio: 1;
object-fit: cover; border-radius: var(--raio-sm);
margin-block-end: var(--esp-md); }
.compara th, .compara td {
padding: clamp(12px, 1.4vw, 18px) clamp(10px, 1.2vw, 16px);
vertical-align: top; text-align: start;
border-block-end: 1px solid color-mix(in srgb, var(--borda) 26%, transparent);
font-size: var(--texto-ficha); line-height: 1.45;
}
.compara thead th { border-block-end-width: 2px; }
.compara thead b { display: block; font-size: var(--texto-label); font-weight: 600;
text-transform: uppercase; letter-spacing: .12em; color: var(--acento-sobre-claro); }
.compara thead span { display: block; margin-block-start: 3px;
font-family: var(--fam-display); font-weight: 800;
font-size: var(--texto-heading-m); color: var(--texto-forte); }
.compara tbody th { inline-size: 12rem; color: var(--texto-sutil);
font-size: var(--texto-label); font-weight: 600;
text-transform: uppercase; letter-spacing: .1em; }
.compara tbody tr:last-child th, .compara tbody tr:last-child td { border-block-end: 0; }
.compara__ir { color: var(--acento-sobre-claro); text-decoration: none;
font-weight: 600; white-space: nowrap; }
.compara__ir:hover { text-decoration: underline; }
/* O "OPEN" DA TABELA NAO E LINK DENTRO DE FRASE, e por isso ele nao pega a
isencao de alvo pequeno que vale para link no meio de um paragrafo: ele e a
UNICA acao daquela coluna, e no telefone e a unica acao do cartao inteiro.
Media 17px de altura. O minimo da casa e `--alvo-toque`, 44. */
.compara td .compara__ir { display: inline-flex; align-items: center;
min-block-size: var(--alvo-toque); }
.compara__nota { color: var(--texto-sutil); max-inline-size: 62ch;
margin-block-start: var(--esp-lg); }
@media (max-width: 860px) {
.compara thead { position: absolute; inline-size: 1px; block-size: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.compara table, .compara tbody, .compara tr, .compara th, .compara td { display: block; }
/* A LEGENDA ENTRA NA LISTA DE BLOCO, e so aqui. No desktop `display: block`
numa `` a tira da fenda dela e ela desenha no meio da tabela; no
telefone a tabela inteira JA e bloco, e uma `table-caption` solta dentro
de um contorno de bloco saiu com 90px de largura e a frase quebrada em
tres linhas. Medido em 390px. */
.compara caption { display: block; }
.compara tbody { display: grid; gap: var(--esp-lg); }
.compara tbody tr { border: 1px solid color-mix(in srgb, var(--borda) 26%, transparent);
border-radius: var(--raio-md); padding: var(--esp-md); }
.compara tbody th { inline-size: auto; padding: 0 0 var(--esp-sm); border: 0; }
.compara tbody td { padding: 6px 0; border: 0; }
.compara tbody td::before { content: attr(data-c) "\00a0\00b7\00a0";
color: var(--acento-sobre-claro); font-weight: 600; }
}
/* ── 3 · A linha do tempo ────────────────────────────────────────────────
Quatro marcos, e o fio que os liga é uma borda no item, não um elemento a
mais. `counter` nenhum: os rótulos são anos e faixas, não posições. */
.linha { list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0;
display: grid; gap: 0; }
/* O FIO E O PONTO SAIRAM DAQUI em 30/09/2026, e viraram `.fio-tempo` no
`site.css`. Eram uma borda parada e quatro pontos acesos desde sempre; agora
o fio se desenha com a rolagem e cada marco acende na vez dele, pelo mesmo
mecanismo que a lista de horas das paginas de expedicao usa. O que fica
aqui e so o que e desta pele: a calha do ano e o espaco do texto. */
.linha__i { position: relative;
padding: 0 0 clamp(28px, 4vw, 44px) calc(var(--vao) + 14px); }
.linha__i:last-child { padding-block-end: 0; }
.linha__q { font-size: var(--texto-label); font-weight: 600;
text-transform: uppercase; letter-spacing: .14em;
color: var(--acento-sobre-claro); margin: 0 0 var(--esp-sm); }
.linha__t { font-family: var(--fam-display); font-weight: 800;
font-size: clamp(19px, 2.2vw, 27px); line-height: 1.2;
color: var(--texto-forte); margin: 0 0 var(--esp-sm); }
.linha__l { font-size: var(--texto-body-m); line-height: 1.6;
color: var(--texto-medio); margin: 0; max-inline-size: 58ch; }
/* ── A POLAROID DO MARCO ─────────────────────────────────────────────────
Mesmo objeto da pilha de 1914 do `#story`: papel `#FCFBF7`, moldura fina em
cima e nos lados, tarja larga embaixo, e um giro de poucos graus.
A MOLDURA ERA 22,5% DO CARTAO EM VEZ DE 5,7%, e a conta explica tudo.
Porcentagem de `padding` resolve contra o BLOCO QUE CONTEM, nunca contra a
largura do proprio elemento. A polaroid e `position: absolute` dentro do
``, que mede 1.080 px: os 5,7% viravam 61,6 px de moldura num cartao de
273. Sobrava 54,9% da largura para a fotografia e o resto era papel.
A mesma regra na pilha de 1914 quase nao aparece porque la o bloco que
contem tem 430 px e o cartao 331: da 7,4%, perto do que estava escrito. Foi
por isso que o defeito passou meses so na linha do tempo.
Agora a medida e dita contra a largura do proprio cartao, com `--w`. A
proporcao passa a ser a da Polaroid 600 que o comentario do `site.css` ja
declarava: quadro de 88 por 107 mm com imagem de 79 por 79, ou seja moldura
de 5,1% nos lados e no topo e tarja de 26% da largura embaixo.
`aria-hidden` SAIU. Ele existia porque a foto so aparecia no hover, e efeito
de ponteiro nao pode carregar informacao. Agora ela aparece no telefone
tambem, em fluxo, entao ela e conteudo: cada `![]() ` ganhou `alt` de
verdade. */
.marco__foto {
--w: clamp(200px, 19vw, 264px);
inline-size: var(--w); margin: 0;
background: #FCFBF7; border-radius: 2px;
padding: calc(var(--w) * .057) calc(var(--w) * .057) 0;
box-shadow: 0 1px 2px rgb(37 43 38 / .18), 0 26px 44px -20px rgb(37 43 38 / .52);
}
.marco__foto img { display: block; inline-size: 100%; block-size: auto;
aspect-ratio: 1; object-fit: cover;
filter: saturate(.76) contrast(1.05); }
.marco__foto figcaption { display: grid; place-items: center;
min-block-size: calc(var(--w) * .22); padding: 12px 6px 14px; text-align: center;
font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
color: var(--texto-medio); }
/* ── NO PONTEIRO ELA ABRE NO HOVER ──────────────────────────────────────
TRES DECISOES QUE VALEM REGISTRO:
1 · `position: absolute`. A foto nao pode empurrar o texto ao aparecer, e
nao pode reservar altura enquanto esta fechada. Fora do fluxo ela faz as
duas coisas de graca, e a linha do tempo mede o mesmo com e sem ela
2 · `:focus-within` junto do `:hover`. Quem navega por teclado passa pelos
marcos e merece ver a mesma coisa. Nao custa uma linha a mais
Com movimento reduzido ela continua abrindo, e sem se mexer: quem pediu
menos movimento nao pediu menos conteudo. Some so o giro e o deslize. */
@media (hover: hover) and (min-width: 861px) {
.marco__foto {
position: absolute; inset-block-start: -6px; inset-inline-end: 0; z-index: 3;
opacity: 0; rotate: -6deg; scale: .94; translate: 0 14px;
pointer-events: none;
transition: opacity 420ms var(--curva-entrada), rotate 420ms var(--curva-entrada),
scale 420ms var(--curva-entrada), translate 420ms var(--curva-entrada);
}
.linha__i:hover .marco__foto,
.linha__i:focus-within .marco__foto {
opacity: 1; rotate: -3deg; scale: 1; translate: 0 0;
}
/* Um giro para cada lado, como duas fotos pousadas na mesa e nao uma
fileira carimbada. */
.linha__i:nth-child(even) .marco__foto { rotate: 5deg; }
.linha__i:nth-child(even):hover .marco__foto,
.linha__i:nth-child(even):focus-within .marco__foto { rotate: 2.5deg; }
@media (prefers-reduced-motion: reduce) {
.marco__foto { transition: opacity 200ms linear; rotate: 0deg; scale: 1; translate: 0 0; }
.linha__i:hover .marco__foto, .linha__i:focus-within .marco__foto { rotate: 0deg; }
.linha__i:nth-child(even) .marco__foto,
.linha__i:nth-child(even):hover .marco__foto { rotate: 0deg; }
}
}
/* ── SEM PONTEIRO ELA ACENDE E APAGA COM A ROLAGEM ──────────────────────
ANTES ELA NAO EXISTIA NO TELEFONE. `display: none`, e a justificativa era
que hover nao existe la. Estava certa a premissa e errada a conclusao: o
que nao existe e o GATILHO, nao a foto. Quatro fotografias do acervo
ficavam de fora justamente na tela onde a linha do tempo e uma coluna so
de texto.
O GATILHO NOVO JA ESTAVA MEDIDO. `.fio-tempo` calcula `--pos` para cada
item, que e quantos marcos da lista ja passaram pela linha de leitura, a
62% da altura da tela. Zero quer dizer "este marco esta sendo lido agora".
Dai sai uma janela, que e o produto de duas rampas: sobe entre 0 e 0,25 e
desce entre 1,1 e 1,6. Cada foto acende quando o marco chega e apaga
quando o proximo toma a leitura, sem observador novo e sem um byte de JS.
O ULTIMO MARCO NAO APAGA, e isso e da aritmetica, nao um caso especial:
numa lista de quatro, `--pos` do ultimo so chega a 0,65, entao a rampa de
descida nunca morde. Ele fica aceso no fim da lista, que e onde a leitura
para.
EM FLUXO, E NAO ABSOLUTA. Em 335 px de coluna nao ha margem lateral para
uma polaroid pousar: ela entra depois do texto do marco, como a fotografia
que ilustra aquele paragrafo. */
@media not all and (hover: hover), (max-width: 860px) {
.linha__i {
--janela: calc(clamp(0, var(--pos, 1) * 4, 1) * clamp(0, (1.6 - var(--pos, 1)) * 2, 1));
}
/* A FOTO PERTENCE AO MARCO DE CIMA, e a proximidade tem de dizer isso.
Medido em 390 px: ela nascia a 42 px do proprio texto e a 18 px do marco
SEGUINTE, ou seja o olho a lia como abertura do proximo. Invertidos os
dois vaos, ela volta a fechar o bloco de quem e. */
.linha__i { padding-block-end: 52px; }
.marco__foto {
--w: min(232px, 76%);
margin-block-start: 14px;
opacity: var(--janela, 1);
rotate: calc(-3deg * var(--janela, 1));
translate: 0 calc(10px * (1 - var(--janela, 1)));
transition: opacity 320ms linear, rotate 320ms var(--curva-entrada),
translate 320ms var(--curva-entrada);
}
.linha__i:nth-child(even) .marco__foto {
margin-inline-start: auto;
rotate: calc(3deg * var(--janela, 1));
}
/* Quem pediu menos movimento nao pediu menos conteudo: as quatro ficam, e
paradas. Sem isto, `--p` travado em 1 poe `--pos` fora da janela e as
fotos sumiriam todas. */
@media (prefers-reduced-motion: reduce) {
.linha__i { --janela: 1; }
.marco__foto { transition: none; rotate: 0deg; translate: 0 0; }
}
}
/* O ANO VAI PARA UMA CALHA PROPRIA a partir do desktop.
Em coluna unica a linha do tempo ficava encostada na esquerda com uns
setecentos pixels de vazio a direita: nao lia como respiro, lia como bloco
que esqueceram de terminar. Com o ano numa calha de 10rem, o marco fica
alinhado com o ponto do fio e o texto ganha a largura que ele merece. */
@media (min-width: 861px) {
/* A calha do ano e a coluna 1, e o vao entre as duas colunas e por onde o
fio passa. As duas medidas sao as mesmas que `.linha.fio-tempo` declara,
senao o fio corre ao lado dos pontos em vez de por dentro deles. */
.linha__i { display: grid; grid-template-columns: 10rem minmax(0, 1fr);
column-gap: var(--vao); align-items: start; padding-inline-start: 0; }
.linha__q { grid-column: 1; grid-row: span 2; margin: 0;
padding-block-start: 5px; }
.linha__t, .linha__l { grid-column: 2; }
}
/* ── 4 · Três fotos em fileira ───────────────────────────────────────────
O `.par` do `site.css` é para DUAS e escalona a segunda. Este é para três e
não escalona nenhuma: quando são três, o degrau vira serrote. */
.tres-fotos { display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 2vw, 28px); margin-block-start: clamp(40px, 6vw, 72px); }
.tres-fotos figure { margin: 0; }
.tres-fotos img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3;
object-fit: cover; border-radius: var(--raio-md); display: block; }
.tres-fotos figcaption { font-size: var(--texto-ficha); color: var(--texto-sutil);
margin-block-start: var(--esp-sm); }
@media (max-width: 760px) { .tres-fotos { grid-template-columns: 1fr; } }
/* ── 5 · O journal ───────────────────────────────────────────────────────
O CARTÃO É O BLOCO INTEIRO E NÃO SÓ O TÍTULO. Num índice de leitura, alvo
de toque pequeno é a diferença entre ler e desistir, e o cartão tem sempre
mais de 44px em qualquer direção. */
.posts { display: grid; grid-template-columns: repeat(2, 1fr);
gap: clamp(24px, 3.4vw, 48px); margin-block-start: clamp(40px, 6vw, 72px); }
@media (max-width: 760px) { .posts { grid-template-columns: 1fr; } }
.post { display: block; text-decoration: none; color: inherit; }
.post__foto { overflow: hidden; border-radius: var(--raio-md); }
.post__foto img { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10;
object-fit: cover; display: block;
transition: scale var(--tempo-media) var(--curva-entrada); }
a.post:hover .post__foto img { scale: 1.03; }
.post__texto { padding-block-start: var(--esp-md); }
.post__cat { font-size: var(--texto-label); font-weight: 600;
text-transform: uppercase; letter-spacing: .14em;
color: var(--acento-sobre-claro); margin: 0 0 var(--esp-sm); }
.post__t { font-family: var(--fam-display); font-weight: 800;
font-size: clamp(20px, 2.4vw, 30px); line-height: 1.18;
color: var(--texto-forte); margin: 0 0 var(--esp-sm); text-wrap: balance; }
.post__l { font-size: var(--texto-body-m); line-height: 1.6;
color: var(--texto-medio); margin: 0 0 var(--esp-md); max-inline-size: 56ch; }
.post__ir { font-size: var(--texto-label); font-weight: 600;
text-transform: uppercase; letter-spacing: .12em;
color: var(--acento-sobre-claro); }
/* O destaque ocupa a largura toda, com a foto de um lado. É o gesto de índice
editorial: uma entrada manda, e as outras acompanham. */
.post--destaque { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: clamp(28px, 4vw, 64px); align-items: center; }
.post--destaque .post__foto img { aspect-ratio: 3 / 2; }
.post--destaque .post__texto { padding-block-start: 0; }
.post--destaque .post__t { font-size: clamp(26px, 3.6vw, 46px); }
@media (max-width: 860px) {
.post--destaque { grid-template-columns: 1fr; }
.post--destaque .post__texto { padding-block-start: var(--esp-md); }
}
/* O CARTÃO QUE AINDA NÃO É LINK. Foto acinzentada e rótulo em vez de seta:
ele precisa parecer o que é, um post anunciado, sem parecer defeito. E não
é ``, então não recebe foco nem promete clique. */
.post--espera .post__foto img { filter: grayscale(.85); opacity: .72; }
.post__ir--espera { color: var(--texto-sutil); }
.post--espera .post__t { color: var(--texto-medio); }
/* A grade de categorias reaproveita o submenu, e por isso ela precisa desfazer
as duas coisas que só valem dentro de um painel flutuante. */
.cat-grade { margin-block-start: clamp(32px, 5vw, 56px);
grid-template-columns: repeat(4, 1fr); gap: var(--esp-md); }
.cat-grade a { border: 1px solid color-mix(in srgb, var(--borda) 30%, transparent);
border-radius: var(--raio-md); padding: var(--esp-md);
text-decoration: none; color: inherit; }
.cat-grade span { font-family: var(--fam-display); font-weight: 800;
font-size: var(--texto-heading-m); }
@media (max-width: 760px) { .cat-grade { grid-template-columns: repeat(2, 1fr); } }
/* ── 6 · O corpo de um post ──────────────────────────────────────────────
ESTE É O MOLDE QUE O CLIENTE E A V4 VÃO REPETIR SOZINHOS, e é por isso que
ele é o bloco mais simples desta folha inteira. Coluna de leitura, título de
seção, parágrafo, lista. Nada aqui exige saber CSS para escrever o próximo
post, e no tema tudo isto sai de bloco nativo do WordPress. */
.artigo { padding-block: clamp(56px, 8vw, 104px); }
.artigo p { font-size: var(--texto-body-m); line-height: 1.75;
color: var(--texto-medio); margin: 0 0 var(--esp-lg); }
/* O primeiro parágrafo é maior, e é a única liberdade tipográfica do post.
Ele faz o trabalho do subtítulo sem precisar de um elemento a mais. */
.artigo__abre { font-size: clamp(18px, 1.6vw, 21px) !important;
line-height: 1.6 !important; color: var(--texto-forte) !important; }
.artigo__h { font-family: var(--fam-display); font-weight: 800;
font-size: clamp(21px, 2.6vw, 32px); line-height: 1.2;
color: var(--texto-forte);
margin: clamp(40px, 5vw, 64px) 0 var(--esp-md); text-wrap: balance; }
.artigo strong { color: var(--texto-forte); font-weight: 600; }
/* A FOTO DE ABERTURA DO POST, e o molde que o cliente repete.
O corpo do post nao tinha imagem nenhuma: abria em paragrafo e terminava em
paragrafo. Num site cuja home e feita de fotografia sangrada, o post lia
como documento de outra marca.
Uma so, logo depois da abertura, da largura da tela. Duas ja seriam
ensaio fotografico, e o post e texto. */
.artigo__foto { margin: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 64px); position: relative; }
.artigo__foto img { inline-size: 100%; block-size: auto; display: block;
aspect-ratio: 21 / 9; object-fit: cover; }
.artigo__foto figcaption { display: flex; flex-wrap: wrap; gap: var(--esp-sm) var(--esp-md);
align-items: baseline;
inline-size: min(100% - var(--margem) * 2, var(--larg-env, 1480px));
margin: var(--esp-md) auto 0; }
.artigo__foto b { font-family: var(--fam-display); font-weight: 800;
text-transform: uppercase; font-size: var(--texto-label); letter-spacing: .1em;
color: var(--acento-sobre-claro); }
.artigo__foto span { font-size: var(--texto-ficha); color: var(--texto-sutil); }
@media (max-width: 760px) { .artigo__foto img { aspect-ratio: 4 / 3; } }
.artigo__lista { list-style: none; margin: 0 0 var(--esp-lg); padding: 0;
display: grid; gap: var(--esp-md); }
.artigo__lista li { font-size: var(--texto-body-m); line-height: 1.6;
color: var(--texto-medio);
padding-inline-start: var(--esp-lg); position: relative; }
.artigo__lista li::before { content: ""; position: absolute;
inset-block-start: .6em; inset-inline-start: 0;
inline-size: 14px; block-size: 1px; background: var(--acento-sobre-claro); }
.artigo__lista b { color: var(--texto-forte); font-weight: 600; }
/* O parágrafo que fecha carrega a frase da marca, e ganha o fio à esquerda
para se separar do corpo sem virar citação. */
.artigo__fecho { border-inline-start: 2px solid var(--acento-sobre-claro);
padding-inline-start: var(--esp-lg); color: var(--texto-forte) !important;
margin-block: clamp(40px, 5vw, 64px) var(--esp-lg) !important; }
.artigo__pendente { background: var(--apoio-creme);
border-radius: var(--raio-md); padding: var(--esp-lg); }
/* ── 7 · Contato ─────────────────────────────────────────────────────────
Formulário à esquerda, onde-e-o-que à direita. No telefone o formulário vem
primeiro, que é o que a pessoa veio fazer. */
.contato__grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .contato__grade { grid-template-columns: 1fr; } }
/* A COLUNA DA DIREITA ACOMPANHA O FORMULARIO.
O formulario tem quatro blocos e passa de mil pixels; a ficha ao lado tem
trezentos. Parada, ela deixava setecentos pixels de vazio exatamente onde a
pessoa esta preenchendo. Grudada, o endereco e o mapa continuam a vista
enquanto ela escreve, e o vazio some. */
.contato__lado { position: sticky; inset-block-start: clamp(96px, 12vh, 132px);
overflow: hidden;
border-radius: var(--raio-md); background: var(--fundo-inverso);
color: var(--texto-sobre-inverso); padding: clamp(24px, 3vw, 40px); }
/* O MAPA DO CARTAO DE CONTATO, E DUAS MEDICOES QUE INVERTERAM A DECISAO.
O pedido era "mais opacidade no mapa pra dar leitura": em .5 ele virava
textura, via-se que havia um risco no fundo e nao se reconhecia o rio. E ele
esta ali justamente para dizer ONDE fica o lugar, que e o titulo da coluna.
PRIMEIRA MEDICAO: subir a opacidade sozinho piora. O traco herdava o acento
sobre escuro. Onde uma linha grossa do rio cruza o texto branco, o pixel
composto da 4,16:1 em .50 e 2,78:1 em .78. O cartao ja tinha esse defeito
antes; subir so o deixava visivel.
SEGUNDA MEDICAO, e essa foi um erro meu que o print pegou: ao fixar
`stroke-opacity: 1` para engrossar o rio, eu apaguei o `.6` que
`.sobre-escuro .m-roosevelt path` aplicava, e o rio virou uma linha BRANCA
CHEIA atravessando "Charter", "Season" e "Group". Media 1,00:1, que e texto
por cima de si mesmo. Numero de contraste nao pega isso sozinho; o print
pega na hora.
O que ficou: uma tinta so, branco translucido, dita explicitamente em todas
as quatro camadas em vez de herdada de tres lugares diferentes. E uma
mascara que tira o mapa de onde o texto comeca. Carta que passa por tras do
paragrafo nao e mapa, e ruido; encostada na borda direita e embaixo, ela
emoldura o texto e continua legivel como geometria. */
.contato__mapa {
position: absolute; inset: 0; opacity: 1; pointer-events: none;
color: color-mix(in srgb, var(--texto-sobre-inverso) 30%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent 0 34%, #000 78%),
linear-gradient(to bottom, transparent 0 8%, #000 34%);
mask-image: linear-gradient(to right, transparent 0 34%, #000 78%),
linear-gradient(to bottom, transparent 0 8%, #000 34%);
-webkit-mask-composite: source-in; mask-composite: intersect;
}
/* A tinta e dita em todas as camadas, e nao herdada: `.sobre-escuro` pinta
tres delas por conta propria, e era dai que vinha a linha branca cheia. */
.contato__mapa .m-agua { display: none; }
.contato__mapa .m-roosevelt path,
.contato__mapa .m-guariba path,
.contato__mapa .m-fluxo path,
.contato__mapa .m-rede path { stroke: currentColor; stroke-opacity: 1; }
.contato__mapa .m-roosevelt path { stroke-width: 7; }
.contato__mapa .m-fluxo path { stroke-width: 10; }
.contato__mapa .m-guariba path { stroke-width: 5; }
.contato__mapa .m-rede path { stroke-width: 2; stroke-opacity: .55; }
.contato__miolo { position: relative; }
.contato__miolo .rotulo { color: var(--acento-sobre-escuro); }
.contato__miolo h2 { margin-block: var(--esp-sm) var(--esp-md); }
.contato__miolo .ficha { color: var(--texto-sobre-inverso); opacity: .86; }
.contato__ficha { list-style: none; margin: var(--esp-lg) 0; padding: 0;
display: grid; gap: var(--esp-sm); font-size: var(--texto-ficha);
opacity: .9; }
.contato__ficha b { color: var(--acento-sobre-escuro); font-weight: 600; }
/* ── 8 · As perguntas que chegam antes ───────────────────────────────────
`` de verdade: pergunta e resposta têm relação semântica, e um leitor
de tela anuncia o par. Acordeão seria movimento a troco de esconder quatro
respostas curtas. */
/* DUAS COLUNAS, E CADA PERGUNTA NUMERADA.
Em coluna unica as quatro desciam como lista de FAQ de suporte, com fio
entre elas e a metade direita da secao vazia. A secao se chama "as quatro
perguntas": se sao quatro, que se vejam as quatro de uma vez.
O numero nao e enfeite, e o que transforma quatro paragrafos num conjunto
contavel, e e o mesmo gesto do `counter` do resto da casa. */
.faq { margin-block-start: clamp(40px, 6vw, 72px);
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(24px, 3vw, 44px); counter-reset: q; }
.faq > div { position: relative; counter-increment: q;
padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 30px);
border: 1px solid color-mix(in srgb, var(--borda) 26%, transparent);
border-radius: var(--raio-md);
background: color-mix(in srgb, var(--fundo-superficie) 62%, transparent); }
.faq > div::before { content: counter(q, decimal-leading-zero);
display: block; margin-block-end: var(--esp-md);
font-family: var(--fam-display); font-weight: 400; font-size: 13px;
letter-spacing: .16em; color: var(--acento-sobre-claro); }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }
.faq dt { font-family: var(--fam-display); font-weight: 800;
font-size: clamp(17px, 1.9vw, 22px); color: var(--texto-forte);
margin-block-end: var(--esp-sm); }
.faq dd { margin: 0; font-size: var(--texto-body-m); line-height: 1.65;
color: var(--texto-medio); max-inline-size: 62ch; }
/* O LINK DA RESPOSTA E ACAO, E NAO LINK NO MEIO DE FRASE ────────────────
Ele herdava `.compara__ir`, que nasceu dentro da tabela e la ja tinha sido
corrigido para 44 px. Na resposta do FAQ ele voltou a ser `inline`, e a
isencao de alvo pequeno que vale para link dentro de paragrafo nao cobre
este caso: medido em 390 px, tres dos quatro quebram para uma linha so
deles, com 18 px de altura, e sao a unica acao daquela resposta.
`display:flex` aqui faz duas coisas de uma vez: tira o link da linha do
texto, que e onde ele ja caia no telefone e nao caia no desktop, e faz a
altura minima morder. `fit-content` impede que o alvo vire a largura toda
da coluna, que seria generoso demais e confundiria com botao. */
.faq dd .compara__ir { display: flex; inline-size: fit-content;
align-items: center; min-block-size: var(--alvo-toque);
margin-block-start: var(--esp-sm); }
/* ═══ O QUE ESTES COMPONENTES VIRAM SOBRE A FAIXA VERDE ════════════════════
A superfície mora no `site.css`. O que mora aqui é a tinta de cada peça
desta folha quando ela cai dentro de uma `.faixa`, porque todas as três
declaram cor própria e por isso não herdam nada da seção.
O seletor tem dois nomes de classe de propósito: `.faq dt` já é 0,2,0 e
uma regra de um nome só perderia calada, que é o defeito que deixou o rio
do cartão de contato branco em 22/09. */
.faixa .linha__q { color: var(--acento-sobre-escuro); }
.faixa .linha__t { color: var(--texto-sobre-inverso); }
.faixa .linha__l { color: color-mix(in srgb, var(--texto-sobre-inverso) 84%, transparent); }
.faixa .numeros__n { color: var(--acento-sobre-escuro); }
.faixa .numeros__l { color: color-mix(in srgb, var(--texto-sobre-inverso) 84%, transparent); }
.faixa .numeros .sinal { color: var(--acento-sobre-escuro); }
.faixa .compara__ir { color: var(--acento-sobre-escuro); }
/* ── A TABELA SOBRE A FAIXA VERDE ────────────────────────────────────────
Ela declara tinta em SEIS lugares, todos escritos para papel claro, e
nenhum deles herda a cor da secao. Sobre `#28452E` seriam, na ordem:
3,0:1 na legenda, 1,6:1 no rotulo da coluna, 1,0:1 no nome dela, 3,0:1 no
rotulo da linha e 3,0:1 na nota. O nome da coluna em `texto.forte` e o
pior: verde escuro sobre verde escuro, invisivel.
Os filetes contam junto. `--borda` e um verde-cinza feito para creme, e
sobre a faixa some: sem eles a tabela deixa de ser tabela e vira seis
fileiras de texto solto, que e justamente o que a comparacao existe para
nao ser. */
.faixa .compara caption,
.faixa .compara__nota,
.faixa .compara tbody th {
color: color-mix(in srgb, var(--texto-sobre-inverso) 74%, transparent); }
.faixa .compara th,
.faixa .compara td {
border-block-end-color: color-mix(in srgb, var(--texto-sobre-inverso) 20%, transparent); }
.faixa .compara thead th {
border-block-end-color: color-mix(in srgb, var(--texto-sobre-inverso) 34%, transparent); }
.faixa .compara thead b { color: var(--acento-sobre-escuro); }
.faixa .compara thead span { color: var(--texto-sobre-inverso); }
.faixa .compara tbody td { color: color-mix(in srgb, var(--texto-sobre-inverso) 90%, transparent); }
.faixa .compara tbody td b { color: var(--texto-sobre-inverso); }
@media (max-width: 860px) {
/* No telefone a linha vira ficha, e a ficha tem contorno proprio. */
.faixa .compara tbody tr {
border-color: color-mix(in srgb, var(--texto-sobre-inverso) 22%, transparent); }
.faixa .compara tbody td::before { color: var(--acento-sobre-escuro); }
}
/* A FICHA DO FAQ DEIXA DE SER PAPEL. Ela era `fundo.superficie` a 62%, que é
branco: sobre a faixa verde o cartão viraria uma placa clara com texto
verde escuro dentro, que é o oposto do que a troca de superfície existe
para fazer. `fundo.inverso_superficie` é o token do DNA para exatamente
este caso, e o número da ficha volta a ser o teal do escuro. */
.faixa .faq > div {
border-color: color-mix(in srgb, var(--texto-sobre-inverso) 20%, transparent);
background: color-mix(in srgb, var(--fundo-inverso-superficie) 78%, transparent); }
.faixa .faq > div::before { color: var(--acento-sobre-escuro); }
.faixa .faq dt { color: var(--texto-sobre-inverso); }
.faixa .faq dd { color: color-mix(in srgb, var(--texto-sobre-inverso) 84%, transparent); }
/* ── A FAIXA DENTRO DO POST ──────────────────────────────────────────────
Ela é filha direta do ``, que não tem recuo lateral, e por isso
sangra sozinha sem margem negativa. O que ela precisa é do próprio ar:
sem `padding-block` o verde encosta no texto de cima e de baixo e lê como
erro de fundo em vez de troca de superfície.
A travessia só existe porque a superfície troca, que é a regra da casa:
sangrar por sangrar dentro de papel claro não conta nada a ninguém. */
.artigo__faixa { padding-block: clamp(48px, 6vw, 80px);
margin-block: clamp(44px, 6vw, 80px); }
.artigo__faixa .numeros { margin-block-start: clamp(28px, 4vw, 44px); }
.artigo__faixa .regua { margin-block-start: clamp(28px, 4vw, 44px); margin-block-end: 0; }
.artigo__faixa .rotulo { margin-block-end: var(--esp-md); }
.artigo__faixa .corpo { max-inline-size: 52ch; }
/* ── O NÚMERO DENTRO DO POST VOLTA A SER NÚMERO ──────────────────────────
DEFEITO ANTERIOR A ESTA FAIXA, e foi ela que o mostrou. `.artigo p` é
(0,1,1) e `.numeros__n` é (0,1,0): dentro do post, a regra do parágrafo
do artigo vencia a do número por um degrau de especificidade, e "1h50" e
"~8h" desenhavam a 17 px em vez de 80. Na mesma página de temporada, fora
do artigo, o mesmo bloco mede 80. O corpo e a margem caíam junto.
Sobre fundo claro ninguém tinha visto: o número ficava com a cor certa e o
tamanho errado, que é a falha que print de contraste e medidor de alvo
passam verdes. Foi o verde atrás que deixou o desequilíbrio evidente. */
.artigo .numeros__n { font-size: clamp(38px, 6vw, 80px); line-height: .86;
letter-spacing: -.04em; margin: 0 0 var(--esp-sm); }
.artigo .numeros__l { font-size: var(--texto-ficha); line-height: 1.4;
margin: var(--esp-md) 0 0; }
/* ═══ `/partners` ═══════════════════════════════════════════════════════
A pagina de parceiros, 13/10/2026. Ela nasceu fora desta folha, num
` |