/* ============================================================
Vertical imobiliária do Grupo HP · editorial.css
CAMADA EDITORIAL — "Industrial Editorial"
------------------------------------------------------------
Carregar SEMPRE depois de components.css. Esta camada tem
autoridade sobre a aparência: onde ela e components.css
discordam, ela vence (é o novo padrão da marca).
TESE
A sofisticação não vem de ornamento. Vem de seis decisões:
1. peso leve (200/300 onde a v1 usava 700)
2. escala grande (display até 128px)
3. tracking (eyebrows a 0.28em, CTA a 0.18em)
4. respiro (capítulo com 96–200px de padding vertical)
5. fotografia (a imagem é a protagonista, não o texto)
6. movimento lento(1.2–1.6s, sem quique)
O QUE ESTA CAMADA PROÍBE (reprovado na v1, nota 2/10)
· grade 3×3 de cards iguais → sequência de capítulos
· véu azul chapado sobre o vídeo → overlay em gradiente
· botão amarelo grande → CTA de tipografia + fio (§5)
· botão de superfície cheia (v2) → nenhum CTA tem fundo
· wireframe azul no lugar de foto → blueprint vira fallback mudo
· etiquetas "A VALIDAR" na tela → uma única nota no rodapé
· densidade alta sem respiro → uma ideia por tela
REGRA DE COR (inegociável)
Azul Profundo #081C2B e Areia #FFF4EB dominam.
Amarelo Doca #F5BD42 aparece apenas como: fio de 1–2px,
número editorial, seta e estado de hover. Nunca como
superfície ampla, nunca como botão preenchido.
============================================================ */
/* ============================================================
0. FUNDAÇÃO
============================================================ */
/* TIPOGRAFIA: todas as sete faces (incluindo o 200 mapeado no Light)
vivem em css/fonts.css, o segundo arquivo da ordem. Havia aqui um
@font-face solto — exceção invisível para quem fosse mexer. */
:root {
/* --- ritmo --- */
--ed-chapter-pad: clamp(64px, 7vw, 124px); /* respiro vertical do capítulo (revisto em 16/09: telas baixas) */
--ed-gutter: clamp(24px, 5vw, 96px); /* margem lateral do capítulo */
--ed-max: 1440px; /* largura máxima do conteúdo */
--ed-gap-col: clamp(20px, 3vw, 56px); /* gutter entre colunas */
--ed-gap-row: clamp(32px, 5vw, 80px);
/* --- movimento --- */
--ed-ease: cubic-bezier(0.16, 1, 0.30, 1); /* "precision" — mesma do GSAP */
--ed-slow: 900ms;
--ed-med: 520ms;
/* --- papéis de texto (sobrescritos por variante de capítulo) --- */
--ed-fg: var(--mult-azul-profundo);
--ed-fg-soft: rgba(8, 28, 43, 0.68);
--ed-fg-mute: rgba(8, 28, 43, 0.62); /* 0.45 dava ~2,9:1 na areia; 0.62 passa de 4,5:1 */
--ed-hairline: rgba(8, 28, 43, 0.14);
/* --- véu de marca sobre imagem --- */
--ed-veil: linear-gradient(180deg,
rgba(8, 28, 43, 0.55) 0%,
rgba(8, 28, 43, 0.15) 45%,
rgba(8, 28, 43, 0.78) 100%);
--ed-veil-soft: linear-gradient(180deg,
rgba(8, 28, 43, 0.34) 0%,
rgba(8, 28, 43, 0.08) 50%,
rgba(8, 28, 43, 0.55) 100%);
--ed-veil-left: linear-gradient(96deg,
rgba(8, 28, 43, 0.82) 0%,
rgba(8, 28, 43, 0.38) 46%,
rgba(8, 28, 43, 0.12) 100%);
--ed-veil-right: linear-gradient(264deg,
rgba(8, 28, 43, 0.82) 0%,
rgba(8, 28, 43, 0.38) 46%,
rgba(8, 28, 43, 0.12) 100%);
/* Hero e capítulo de mídia carregam texto no MEIO da imagem, então
precisam de corpo na faixa central — continua gradiente, nunca
bloco chapado. É o véu padrão de .chapter--hero / .chapter--media. */
--ed-veil-hero: linear-gradient(180deg,
rgba(8, 28, 43, 0.60) 0%,
rgba(8, 28, 43, 0.42) 32%,
rgba(8, 28, 43, 0.52) 62%,
rgba(8, 28, 43, 0.86) 100%);
/* --- VÉU-ÂNCORA: o padrão de hero do site ---------------------
O véu de hero acima é simétrico e trabalha na média da foto.
Onde o tipo vive ancorado num lado (o padrão que o m4 fixou —
tipo à esquerda, no terço inferior), a média mente: uma cobertura
clara ou um painel de vidro no meio do quadro derruba o contraste
para 2,7:1 exatamente sob a manchete.
Este par ancora o corpo do véu NO LADO DO TEXTO e na base, e
libera o lado oposto — a fotografia continua aberta onde ninguém
lê. Dois gradientes sobrepostos: continua gradiente, nunca bloco.
Calibrado medindo o PIOR pixel (não a média) sob a caixa de texto,
com o filtro saturate(.88) contrast(1.04) já aplicado:
· abertura de grupo.html ............ 7,0:1 a 8,1:1
· hero do hub Múltiplo .............. 7,8:1
· sobrevoo do hub (96 quadros) ...... 8,5:1 a 9,6:1
O mínimo do projeto é 4,5:1 no pior pixel de cada linha.
REEQUILÍBRIO (21/08/2026). As duas camadas se MULTIPLICAM: 0,92
na horizontal somada a 0,44 na vertical davam ~95% de opacidade
no canto onde vive o título — a fotografia sobrava em 5%, num
site cuja premissa é que a imagem é a protagonista. Medido 7,8:1
onde o projeto pede 4,5:1, havia três paradas de folga gastas à
toa. Agora a combinação fica em ~80% no canto do texto e ~50% no
meio do quadro: a foto volta a existir e a linha mais clara
continua acima de 5:1. */
--ed-veil-anchor-left:
linear-gradient(90deg,
rgba(8, 28, 43, 0.72) 0%,
rgba(8, 28, 43, 0.66) 34%,
rgba(8, 28, 43, 0.46) 60%,
rgba(8, 28, 43, 0.22) 76%,
rgba(8, 28, 43, 0.06) 90%,
rgba(8, 28, 43, 0.00) 100%),
linear-gradient(180deg,
rgba(8, 28, 43, 0.30) 0%,
rgba(8, 28, 43, 0.08) 22%,
rgba(8, 28, 43, 0.20) 48%,
rgba(8, 28, 43, 0.74) 100%);
--ed-veil-anchor-right:
linear-gradient(270deg,
rgba(8, 28, 43, 0.72) 0%,
rgba(8, 28, 43, 0.66) 34%,
rgba(8, 28, 43, 0.46) 60%,
rgba(8, 28, 43, 0.22) 76%,
rgba(8, 28, 43, 0.06) 90%,
rgba(8, 28, 43, 0.00) 100%),
linear-gradient(180deg,
rgba(8, 28, 43, 0.30) 0%,
rgba(8, 28, 43, 0.08) 22%,
rgba(8, 28, 43, 0.20) 48%,
rgba(8, 28, 43, 0.74) 100%);
/* --- altura do header fixo --- */
--ed-header-h: 88px;
}
/* Sangramentos full-bleed usam 100vw; clip evita barra horizontal
sem quebrar position:sticky/fixed (o que overflow:hidden faria). */
html { overflow-x: clip; }
body {
font-weight: 300; /* o corpo do site é Light, não Regular */
font-synthesis-weight: none; /* proíbe peso falso */
/* Duotonia: a superfície clara do site é Areia. O branco puro saiu
de cena — entre um capítulo escuro e um capítulo Areia ele abria
uma faixa de #FFFFFF que lia como emenda, não como respiro. */
background: var(--mult-areia);
color: var(--ed-fg);
}
/* Contexto escuro: qualquer bloco pode assumir o jogo de cor invertido. */
.on-dark,
.is-dark,
.chapter--dark,
.chapter--media,
.chapter--hero {
--ed-fg: var(--mult-branco);
--ed-fg-soft: rgba(255, 255, 255, 0.72);
--ed-fg-mute: rgba(255, 255, 255, 0.62);
--ed-hairline: rgba(255, 255, 255, 0.18);
color: var(--ed-fg);
}
/* Sobre fotografia o cinza some antes: corpo e rótulo ganham mais corpo
que no azul liso (revisão de leitura, 17/09). */
.chapter--media,
.chapter--hero {
--ed-fg-soft: rgba(255, 255, 255, 0.86);
--ed-fg-mute: rgba(255, 255, 255, 0.72);
}
/* ============================================================
1. ESCALA TIPOGRÁFICA EDITORIAL
Um só tipo (Raleway). A hierarquia é feita por PESO e ESCALA,
nunca por cor ou caixa decorativa.
============================================================ */
/* Display de hero — a maior voz do site. Peso 200 em 128px lê
como elegância; o mesmo texto em 700 (v1) lia como cartaz. */
.display-xl {
font-family: var(--font-brand);
font-size: clamp(40px, 5.4vw, 88px);
font-weight: 200;
line-height: 1.0;
letter-spacing: -0.02em;
text-wrap: balance;
margin: 0;
}
/* Hairline de verdade — só para display gigante sobre foto escura. */
.display-xl--hairline { font-weight: 100; }
/* Display de abertura de página interna. */
.display {
font-family: var(--font-brand);
font-size: clamp(34px, 4.2vw, 64px);
font-weight: 200;
line-height: 1.04;
letter-spacing: -0.02em;
text-wrap: balance;
margin: 0;
}
/* Título de capítulo — a voz padrão das seções. */
.chapter-title {
font-family: var(--font-brand);
font-size: clamp(28px, 3vw, 46px);
font-weight: 300;
line-height: 1.14;
letter-spacing: -0.015em;
text-wrap: balance;
margin: 0;
}
/* UMA palavra-chave por título pode subir a 600. Uma só.
É o único contraste de peso permitido dentro de uma frase. */
.accent-word {
font-weight: 600;
letter-spacing: -0.02em;
}
/* Linha de entrada: maior que o corpo, ainda leve. */
.lede {
font-size: clamp(17px, 1.45vw, 21px);
font-weight: 300;
line-height: 1.55;
letter-spacing: -0.005em;
max-width: 42ch;
color: var(--ed-fg-soft);
margin: 0;
}
/* Corpo editorial: 46ch é o limite. Texto mais largo que isso
vira relatório, e relatório não é o que a JHSF faz. */
.body-editorial {
font-size: clamp(15px, 1.1vw, 16.5px);
font-weight: 300;
line-height: 1.7;
max-width: 46ch;
color: var(--ed-fg-soft);
margin: 0;
}
.body-editorial + .body-editorial { margin-top: 1.3em; }
/* Dentro de contêiner em grid o gap já separa os parágrafos: a margem
somava com ele e dobrava o vão (revisão de 16/09). */
.stack > .body-editorial + .body-editorial,
.chapter__text > .body-editorial + .body-editorial,
.chapter__inner--center > .body-editorial + .body-editorial { margin-top: 0; }
.body-editorial strong { font-weight: 600; color: var(--ed-fg); }
/* Overline / eyebrow — o sinal de que começou um capítulo. */
.eyebrow {
display: block;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ed-fg-mute);
margin: 0;
}
.eyebrow--accent { color: var(--mult-amarelo-doca); }
.eyebrow--ink { color: var(--ed-fg); }
/* Número editorial (01, 02, 03…) — um dos três usos legítimos
do Amarelo Doca. Nunca dentro de círculo, nunca em caixa. */
.num-editorial {
display: inline-block;
font-size: 20px;
font-weight: 200;
line-height: 1;
/* O tracking editorial do numeral é 0.1em, não 0.2em. A 0.2em os
dois dígitos se soltam e "02" passa a ler como "0 2" — dois
números, não um. A 0.1em o par continua aberto (a intenção do
código visual) e volta a ler como uma unidade.
O tracking também acrescenta um passo DEPOIS do último dígito,
que empurraria o fio Doca ao lado; a margem negativa devolve
exatamente esse passo. */
letter-spacing: 0.1em;
margin-right: -0.1em;
color: var(--mult-amarelo-doca);
font-variant-numeric: tabular-nums;
}
/* Legenda de foto / crédito / asterisco de dado a confirmar. */
.caption-editorial {
font-size: 12px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.02em;
color: var(--ed-fg-mute);
max-width: 44ch;
margin: 0;
}
/* O asterisco de "dado a confirmar" está EXTINTO da superfície.
Ele nasceu como substituto das etiquetas "A VALIDAR" da v1 e
acabou pior: um andaime de produção grudado no argumento de
venda, em cima de número em display e de rótulo de herói.
A honestidade do protótipo vive num lugar só — a nota de
créditos do rodapé. A regra abaixo garante que nenhuma sobra
de marcação possa trazer o asterisco de volta. */
.footnote-mark { display: none !important; }
/* Empilhamento vertical com respiro consistente. */
.stack { display: grid; gap: clamp(20px, 2.4vw, 34px); align-content: start; justify-items: start; }
.stack--sm { gap: clamp(12px, 1.4vw, 18px); }
.stack--lg { gap: clamp(32px, 4vw, 64px); }
.stack--center { justify-items: center; text-align: center; }
.stack--center .lede,
.stack--center .body-editorial { margin-inline: auto; }
/* ============================================================
2. O CAPÍTULO — unidade de composição do site
Cada seção é um capítulo: uma ideia, uma tela, muito respiro.
Substitui .section + grade de cards da v1.
============================================================ */
.chapter {
position: relative;
display: flex;
align-items: center;
min-height: min(80vh, 820px);
padding-block: var(--ed-chapter-pad);
padding-inline: var(--ed-gutter);
background: var(--mult-areia);
overflow: hidden; /* segura o parallax e o scale da figura */
}
.chapter__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--ed-max);
margin-inline: auto;
}
.chapter__inner--center {
max-width: 900px;
text-align: center;
display: grid;
justify-items: center;
gap: clamp(20px, 2.6vw, 36px);
}
.chapter__inner--narrow { max-width: 1080px; }
/* alinhamento vertical do conteúdo dentro do capítulo */
.chapter--top { align-items: flex-start; }
.chapter--bottom { align-items: flex-end; }
/* altura */
.chapter--full { min-height: 100vh; min-height: 100svh; }
.chapter--compact { min-height: 0; padding-block: clamp(56px, 6vw, 100px); }
/* --- Variantes de superfície --- */
.chapter--dark { background: var(--mult-azul-profundo); }
.chapter--sand { background: var(--mult-areia); }
/* .chapter--light foi APOSENTADA como terceira cor de fundo.
O site alterna Azul Profundo e Areia — e só. A classe continua
existindo (a marcação das páginas a usa para marcar o RITMO de
alternância dos capítulos claros), mas pinta Areia: dois capítulos
claros seguidos se separam pelo fio de cabelo de .chapter + .chapter--*,
nunca por uma terceira superfície. */
.chapter--light { background: var(--mult-areia); }
/* Azul Múltiplo — uso pontual, para separar dois capítulos escuros. */
.chapter--azul { background: var(--mult-azul); }
.chapter--azul { --ed-fg: var(--mult-branco); --ed-fg-soft: rgba(255,255,255,0.72);
--ed-fg-mute: rgba(255,255,255,0.62); --ed-hairline: rgba(255,255,255,0.18);
color: var(--ed-fg); }
/* --- .chapter--media: imagem full-bleed, texto sobreposto ---
A figura é filha direta e cobre o capítulo inteiro. É o formato
de "uma tela inteira por empreendimento". */
.chapter--media {
min-height: 90vh;
min-height: min(90svh, 920px);
align-items: flex-end;
background: var(--mult-azul-profundo);
padding-block: clamp(64px, 7vw, 120px);
}
.chapter--media > .figure {
position: absolute;
inset: 0;
z-index: 0;
}
.chapter--media .chapter__inner { z-index: 2; }
/* legibilidade extra do texto sobre foto, sem escurecer a imagem toda */
.chapter--media .chapter__inner {
text-shadow: 0 1px 32px rgba(8, 28, 43, 0.45);
}
/* --- .chapter--split: imagem sangra por um lado, texto em 5/12 ---
Estrutura esperada:
*/
.chapter--split,
.chapter--split-reverse {
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: var(--ed-gap-col);
align-items: center;
padding-inline: 0; /* a imagem precisa tocar a borda da tela */
min-height: min(80vh, 820px);
}
.chapter--split > .chapter__media { grid-column: 1 / 8; }
.chapter--split > .chapter__text { grid-column: 8 / 13; padding-right: var(--ed-gutter); }
/* Espelho exato do --split: mídia em 7 colunas, texto em 5.
DUAS ARMADILHAS DE GRID, as duas já custaram um capítulo partido
ao meio (imagem em cima, texto embaixo, vazio gigante ao lado):
1. o texto precisa TERMINAR antes da coluna onde a mídia começa —
com texto em 2/7 e mídia em 6/13 as duas peças disputam a
coluna 6;
2. mesmo sem disputa, a mídia vem primeiro no HTML e ocupa as
colunas da direita; o posicionamento automático "esparso" do
grid nunca volta para trás, então um item posterior que começa
numa coluna MENOR é jogado para a linha seguinte. Por isso a
linha é declarada explicitamente nas duas peças. */
.chapter--split > .chapter__media,
.chapter--split > .chapter__text,
.chapter--split-reverse > .chapter__media,
.chapter--split-reverse > .chapter__text { grid-row: 1; }
.chapter--split-reverse > .chapter__media { grid-column: 6 / 13; }
.chapter--split-reverse > .chapter__text { grid-column: 1 / 6; padding-left: var(--ed-gutter); }
/* --- REGISTROS DE PROPORÇÃO ---------------------------------
Um ziguezague 7/5 repetido não é assimetria: é simetria com
espelho — a grade de cards da v1 deitada. Estes modificadores
dão três medidas diferentes de divisão para que dois capítulos
vizinhos nunca tenham a mesma caixa. Use-os alternados. */
.chapter--split.split--wide > .chapter__media { grid-column: 1 / 9; }
.chapter--split.split--wide > .chapter__text { grid-column: 9 / 13; }
.chapter--split.split--narrow > .chapter__media { grid-column: 1 / 6; }
.chapter--split.split--narrow > .chapter__text { grid-column: 7 / 13; }
.chapter--split-reverse.split--wide > .chapter__media { grid-column: 5 / 13; }
.chapter--split-reverse.split--wide > .chapter__text { grid-column: 1 / 5; }
.chapter--split-reverse.split--narrow > .chapter__media { grid-column: 8 / 13; }
.chapter--split-reverse.split--narrow > .chapter__text { grid-column: 1 / 7; }
/* --- REGISTROS DE ALTURA ------------------------------------
A escala também precisa variar: um capítulo que respira mais
que o vizinho é o que impede a leitura de virar tabela. */
/* O respiro vertical entra junto com a altura mínima: sem isso o
padding fixo do capítulo iguala tudo de novo e a diferença de
escala some. Sobrescrever --ed-chapter-pad (e não o padding)
mantém o sangramento vertical da mídia em sincronia. */
.chapter--taller { min-height: min(92vh, 900px); --ed-chapter-pad: clamp(80px, 9vw, 150px); }
.chapter--lower { min-height: min(64vh, 640px); --ed-chapter-pad: clamp(48px, 5vw, 88px); }
.chapter__media {
position: relative;
align-self: stretch;
min-height: min(72vh, 760px);
display: flex;
}
.chapter--taller > .chapter__media { min-height: min(88vh, 880px); }
.chapter--lower > .chapter__media { min-height: min(60vh, 600px); }
.chapter__media > .figure { flex: 1; min-height: 100%; }
/* A foto do capítulo dividido NÃO pode ditar a altura da seção.
Com um retrato na coluna de mídia, o ![]()
em height:100% dentro
de uma figura de altura automática cai na proporção intrínseca e
estica o capítulo para 1600px — o registro de altura escolhido
pela direção deixa de valer. Tirando a imagem do fluxo, quem
manda na altura é o capítulo, e o object-fit cuida do recorte. */
:where(.chapter__media) > :where(.figure) > img,
:where(.chapter__media) > :where(.figure) > video { position: absolute; inset: 0; }
.chapter__text {
display: grid;
gap: clamp(20px, 2.4vw, 34px);
justify-items: start;
/* A medida do parágrafo fica com o .body-editorial (46ch). A caixa do
texto inclui a margem lateral do capítulo dividido: somada a ela, o
título deixa de ficar preso em ~380px. */
max-width: calc(34rem + var(--ed-gutter));
}
/* --- Capítulo de abertura (hero) --- */
.chapter--hero {
min-height: 100vh;
min-height: 100svh;
align-items: center;
background: var(--mult-azul-profundo);
padding-block: clamp(104px, 13vh, 160px);
}
.chapter--hero > .figure { position: absolute; inset: 0; z-index: 0; }
.chapter--hero .chapter__inner {
z-index: 2;
text-shadow: 0 1px 40px rgba(8, 28, 43, 0.5);
}
/* Índice do capítulo: 01 — com fio amarelo curto ao lado. */
.chapter__index {
display: inline-flex;
align-items: center;
gap: 16px;
}
.chapter__index .rule-yellow { width: 40px; }
/* Separação entre capítulos claros consecutivos: fio de cabelo,
nunca sombra, nunca card. */
.chapter + .chapter--light,
.chapter + .chapter--sand { border-top: 1px solid var(--ed-hairline); }
/* Utilitário de offset para páginas sem hero (header já sólido). */
.site-main--offset { padding-top: var(--ed-header-h); }
/* ============================================================
3. GRID DE 12 COLUNAS
Assimetria é regra: use 5/12, 7/12, 4/12 — evite 6/6.
============================================================ */
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: var(--ed-gap-col);
row-gap: var(--ed-gap-row);
align-items: start;
width: 100%;
}
.grid-12--center { align-items: center; }
/* `1fr` é `minmax(auto, 1fr)`: uma palavra longa em display empurra a
trilha e a grade inteira vaza para fora da tela, arrastando junto o
lede e a linha de contexto. min-width:0 devolve a decisão de largura
à grade. */
.grid-12 > [class*="col-"] { min-width: 0; }
.col-1-3 { grid-column: 1 / 4; }
.col-1-4 { grid-column: 1 / 5; }
.col-1-5 { grid-column: 1 / 6; }
.col-1-6 { grid-column: 1 / 7; }
.col-1-7 { grid-column: 1 / 8; }
.col-1-8 { grid-column: 1 / 9; }
.col-1-12 { grid-column: 1 / 13; }
.col-2-6 { grid-column: 2 / 7; }
.col-2-7 { grid-column: 2 / 8; }
.col-2-8 { grid-column: 2 / 9; }
.col-2-11 { grid-column: 2 / 12; }
.col-2-12 { grid-column: 2 / 13; }
.col-3-8 { grid-column: 3 / 9; }
.col-3-10 { grid-column: 3 / 11; }
.col-3-11 { grid-column: 3 / 12; }
.col-4-9 { grid-column: 4 / 10; }
.col-4-12 { grid-column: 4 / 13; }
.col-5-9 { grid-column: 5 / 10; }
.col-5-12 { grid-column: 5 / 13; }
.col-6-12 { grid-column: 6 / 13; }
.col-7-12 { grid-column: 7 / 13; }
.col-8-12 { grid-column: 8 / 13; }
.col-9-12 { grid-column: 9 / 13; }
.col-10-12 { grid-column: 10 / 13; }
/* ============================================================
4. .figure — moldura de imagem com o tratamento de marca
Filtro: leve dessaturação + micro contraste (a "sombra fria"
vem do véu azul em gradiente, nunca de um bloco chapado).
============================================================ */
.figure {
position: relative;
overflow: hidden;
margin: 0;
background: var(--mult-azul-profundo);
isolation: isolate;
}
.figure > img,
.figure > video {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.88) contrast(1.04);
}
/* O placeholder .media-slot foi extinto (base.css). Nenhum quadro
do site pode renderizar como campo azul vazio: se não há foto,
a tela é de tipografia. */
/* Véu SEMPRE em gradiente. O véu chapado da v1 matava a foto.
O véu é escolhido por --fig-veil: o capítulo define um padrão
sensato (via :where(), sem peso de especificidade) e o autor da
página troca por classe quando quiser. */
.figure::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background: var(--fig-veil, var(--ed-veil));
}
:where(.chapter--hero, .chapter--media) > .figure { --fig-veil: var(--ed-veil-hero); }
.figure--veil-hero { --fig-veil: var(--ed-veil-hero); }
.figure--veil-anchor-left { --fig-veil: var(--ed-veil-anchor-left); }
.figure--veil-anchor-right { --fig-veil: var(--ed-veil-anchor-right); }
.figure--veil-soft { --fig-veil: var(--ed-veil-soft); }
.figure--veil-left { --fig-veil: var(--ed-veil-left); }
.figure--veil-right { --fig-veil: var(--ed-veil-right); }
.figure--veil-none::after { display: none; }
/* Sangramento até a borda da viewport. */
.figure--full {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
}
/* Proporções */
.figure--tall { min-height: 88vh; }
.figure--full-h { min-height: 100vh; min-height: 100svh; }
.figure--landscape { aspect-ratio: 16 / 9; }
.figure--portrait { aspect-ratio: 3 / 4; }
.figure--square { aspect-ratio: 1 / 1; }
/* Legenda fora da imagem — nunca etiqueta flutuando por cima. */
.figure__caption {
position: relative;
z-index: 4;
margin-top: 14px;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.02em;
color: var(--ed-fg-mute);
}
/* --- Blueprint = fallback técnico MUDO ---
O wireframe azul virou personagem na v1. Aqui ele existe só
para o slot não ficar vazio: campo azul com grade quase
imperceptível, sem desenho e sem scanner. */
.figure .blueprint {
background: linear-gradient(158deg, var(--mult-azul-profundo) 0%, var(--mult-azul) 78%, var(--mult-azul-profundo) 100%);
}
.figure .blueprint svg,
.figure .blueprint__scanner { display: none !important; }
.figure .blueprint::before { opacity: 0.035; background-size: 96px 96px; }
/* ============================================================
5. CTAs — tipografia e fio. NUNCA superfície.
------------------------------------------------------------
A v1 reprovou com botão amarelo preenchido. A v2 repintou o
MESMO retângulo em Areia e reprovou de novo: o problema nunca
foi a cor, foi a superfície cheia. Aqui não existe CTA com
fundo. Existe uma família de dois, separada por PESO e por FIO:
.cta-editorial PRIMÁRIO peso 600 + fio Amarelo Doca 1px
.cta-ghost SECUNDÁRIO peso 500 + fio de cabelo
Nenhum dos dois tem padding lateral: o texto nasce na prumada
da coluna, como uma entrada de índice. A seta é Amarelo Doca
(um dos usos legítimos) e é a única coisa que se move.
============================================================ */
.cta-editorial,
.cta-ghost {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0 0 10px;
border: 0;
border-bottom: 1px solid var(--ed-hairline);
border-radius: 0;
background: none;
appearance: none;
-webkit-appearance: none;
color: var(--ed-fg);
font-family: var(--font-brand);
font-size: 11px;
line-height: 1;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: color var(--ed-med) var(--ed-ease),
border-color var(--ed-med) var(--ed-ease);
}
.cta-editorial::after,
.cta-ghost::after {
content: "";
display: inline-block;
width: 16px; height: 16px; flex: none;
background-color: currentColor;
-webkit-mask: url("../assets/icons/arrow-right.svg") center / contain no-repeat;
mask: url("../assets/icons/arrow-right.svg") center / contain no-repeat;
font-size: 14px;
line-height: 1;
letter-spacing: 0;
color: var(--mult-amarelo-doca);
transform: translateX(0);
transition: transform var(--ed-med) var(--ed-ease);
}
/* Primário: o peso e o fio Doca fazem toda a hierarquia. */
.cta-editorial {
font-weight: 600;
border-bottom-color: var(--mult-amarelo-doca);
}
/* Secundário: um degrau abaixo no peso, fio de cabelo. */
.cta-ghost { font-weight: 500; }
.cta-editorial:hover,
.cta-editorial:focus-visible,
.cta-ghost:hover,
.cta-ghost:focus-visible {
color: var(--mult-amarelo-doca);
border-bottom-color: var(--mult-amarelo-doca);
}
.cta-editorial:hover::after,
.cta-editorial:focus-visible::after,
.cta-ghost:hover::after,
.cta-ghost:focus-visible::after { transform: translateX(9px); }
/* Modificadores legados das páginas. Continuam existindo para não
quebrar marcação antiga, mas nenhum deles pinta superfície:
sobre Areia, Branco, foto ou Azul Profundo o CTA é o mesmo
objeto, porque a cor do texto vem de --ed-fg do contexto. */
.cta-editorial--dark,
.cta-editorial--on-dark,
.cta-editorial--outline {
background: none;
box-shadow: none;
color: var(--ed-fg);
}
.cta-ghost--on-dark,
.cta-editorial--on-dark {
color: var(--mult-branco);
}
.cta-ghost--on-dark { border-bottom-color: rgba(255, 255, 255, 0.28); }
/* --- LINHA DE CONTEXTO DO HERO ---
Fio Amarelo Doca curto + uma frase. É a peça que o m4 fixou e que
passa a ser o padrão de todo hero: o olho abre em cima, o display
ancora à esquerda no terço inferior, esta linha fecha embaixo.
Não é badge, não é etiqueta, não é estado de projeto. */
.hero-context {
display: flex;
align-items: center;
gap: 18px;
margin: 0;
font-size: 11px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
.hero-context .rule-yellow { flex: none; }
/* --- ANCORAGEM DE HERO (o padrão do site) ---
Tipo à esquerda, no terço inferior. A centralização fica
reservada a no máximo UMA tela do site inteiro. O respiro extra
embaixo existe para o cue de rolagem não pousar sobre o CTA. */
.chapter--hero.chapter--anchor {
align-items: flex-end;
padding-block: clamp(104px, 13vh, 160px) clamp(88px, 11vh, 140px);
}
/* Com o tipo à esquerda, o cue centralizado no eixo cairia sobre o
CTA. Ele vai para a margem oposta: continua sendo sinal, deixa de
ser estorvo — e a simetria do rodapé do hero some junto. */
.chapter--hero.chapter--anchor .scroll-cue {
left: auto;
right: var(--ed-gutter);
transform: none;
justify-items: end;
}
/* Par de CTAs: primário + secundário. O vão precisa ser largo o
bastante para que os dois fios não leiam como um só. */
.cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(28px, 3.6vw, 60px);
}
/* ============================================================
6. .rule-yellow — a assinatura de 1px
O Amarelo Doca só existe como fio, número, seta e hover.
============================================================ */
.rule-yellow {
display: block;
width: 64px;
height: 1px;
border: 0;
margin: 0;
background: var(--mult-amarelo-doca);
transform-origin: left center; /* o GSAP cresce daqui */
}
.rule-yellow--2 { height: 2px; }
.rule-yellow--wide { width: 100%; }
.rule-yellow--short{ width: 32px; }
/* Fio vertical — usado ao lado de citação, número e índice. */
.rule-yellow--v {
width: 1px;
height: clamp(56px, 8vw, 96px);
transform-origin: center top;
}
.rule-yellow--v.rule-yellow--2 { width: 2px; height: clamp(56px, 8vw, 96px); }
/* ============================================================
7. .stat-editorial — número grande, sem caixa
A v1 punha KPI dentro de card com sombra. Aqui o número
flutua no branco; a única moldura permitida é um fio.
============================================================ */
.stat-editorial {
display: grid;
gap: 12px;
justify-items: start;
}
.stat-editorial__value {
font-size: clamp(38px, 4.2vw, 64px);
font-weight: 200;
line-height: 1;
letter-spacing: -0.02em;
color: var(--ed-fg);
font-variant-numeric: tabular-nums;
}
.stat-editorial__unit {
font-size: 0.32em;
font-weight: 400;
letter-spacing: 0.06em;
margin-left: 0.3em;
vertical-align: baseline;
color: var(--ed-fg-soft);
}
.stat-editorial__label {
font-size: 11px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ed-fg-mute);
/* em em, não ch: com caixa alta e tracking largo, 22ch dava ~140px
e o rótulo quebrava em 4 a 6 linhas. */
max-width: min(28em, 100%);
text-wrap: balance;
}
/* Variante com fio amarelo acima do número. */
.stat-editorial--ruled { padding-top: 22px; border-top: 1px solid var(--mult-amarelo-doca); }
/* Série horizontal de estatísticas: espaçamento largo, sem divisórias
verticais (linha vertical entre números vira tabela). */
.stat-row {
display: flex;
flex-wrap: wrap;
gap: clamp(40px, 6vw, 104px);
width: 100%;
}
.stat-row--ruled {
padding-top: clamp(28px, 3vw, 44px);
border-top: 1px solid var(--ed-hairline);
}
/* ============================================================
8. .quote-editorial — citação grande com fio amarelo à esquerda
============================================================ */
.quote-editorial {
margin: 0;
padding-left: clamp(24px, 3vw, 48px);
border-left: 1px solid var(--mult-amarelo-doca);
font-size: clamp(22px, 2.4vw, 34px);
font-weight: 200;
line-height: 1.3;
letter-spacing: -0.012em;
color: var(--ed-fg);
max-width: 26ch;
text-wrap: balance;
}
.quote-editorial--2 { border-left-width: 2px; }
.quote-editorial p { margin: 0; font: inherit; letter-spacing: inherit; }
.quote-editorial__cite,
.quote-editorial figcaption {
display: block;
margin-top: clamp(24px, 2.6vw, 36px);
font-size: 11px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.22em;
text-transform: uppercase;
font-style: normal;
color: var(--ed-fg-mute);
}
/* ============================================================
9. HEADER EDITORIAL
Transparente sobre o hero → Azul Profundo com leve blur
depois de 80px de rolagem (layout.js alterna .is-solid).
Sem botão preenchido. Sem sombra. Fio de cabelo no rodapé
do header apenas no estado sólido.
============================================================ */
.site-header--editorial {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 120;
background: transparent;
box-shadow: none;
color: var(--mult-branco);
transition: background-color var(--ed-slow) var(--ed-ease),
backdrop-filter var(--ed-slow) var(--ed-ease),
border-color var(--ed-slow) var(--ed-ease);
border-bottom: 1px solid rgba(255, 255, 255, 0);
}
/* Scrim de topo no estado transparente: uma sombra de luz que
segura a leitura da nav sobre foto clara. Não é uma barra —
é gradiente, e some quando o header fica sólido. */
.site-header--editorial::before {
content: "";
position: absolute;
inset: 0 0 -64px 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(180deg, rgba(8, 28, 43, 0.58) 0%, rgba(8, 28, 43, 0) 100%);
transition: opacity var(--ed-slow) var(--ed-ease);
}
.site-header--editorial.is-solid::before { opacity: 0; }
.site-header--editorial.is-solid {
background: rgba(8, 28, 43, 0.86);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
border-bottom-color: rgba(255, 255, 255, 0.10);
}
/* Páginas sem hero escuro (variant="light") já nascem sólidas. */
.site-header--solid-start { background: rgba(8, 28, 43, 0.94); }
body:has(.site-header--solid-start) { padding-top: var(--ed-header-h); }
.site-header__bar {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: clamp(16px, 2.4vw, 40px);
min-height: var(--ed-header-h);
padding-inline: var(--ed-gutter);
}
.site-header__zone { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); }
.site-header__zone--left { grid-column: 1; justify-content: flex-start; }
.site-header__zone--brand { grid-column: 2; justify-content: center; min-width: 0; }
.site-header__zone--right { grid-column: 3; justify-content: flex-end; }
/* --- itens de navegação: 11px, tracking largo, sem preenchimento --- */
.nav-editorial {
display: flex;
align-items: center;
/* O teto caiu de 26px para 20px: o mesmo menu em espanhol é mais longo
que em português e encostava no seletor de idioma entre 1400 e 1700px. */
gap: clamp(11px, 1.15vw, 20px);
}
.nav-editorial__link {
position: relative;
display: inline-block;
padding-block: 10px;
font-size: 11px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
color: rgba(255, 255, 255, 0.78);
transition: color var(--ed-med) var(--ed-ease);
}
.nav-editorial__link:hover { color: var(--mult-branco); }
/* item ativo: fio amarelo fino embaixo (2º uso legítimo do amarelo) */
.nav-editorial__link::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: 2px;
height: 1px;
background: var(--mult-amarelo-doca);
transition: right var(--ed-med) var(--ed-ease);
}
.nav-editorial__link:hover::after { right: 0; }
.nav-editorial__link[aria-current="page"] { color: var(--mult-branco); }
.nav-editorial__link[aria-current="page"]::after { right: 0; }
/* migalha de volta à vertical (Múltiplo → vertical imobiliária) e, nas
páginas da vertical, o próprio nome "Vertical imobiliária" ao lado do
logo do Grupo HP. Sempre em uma linha. */
.crumb-editorial {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
color: rgba(255, 255, 255, 0.5);
transition: color var(--ed-med) var(--ed-ease);
}
.crumb-editorial:hover { color: var(--mult-branco); }
.site-header__zone--left .crumb-editorial { white-space: nowrap; }
/* Nas páginas da vertical o nome lê em voz mais cheia: é a marca da página. */
/* O descritivo da vertical não é item de navegação: corpo menor que o
menu (9px contra 11px) e meia-voz, como a tagline do lockup antigo. */
.crumb-editorial--vertical {
font-size: 9px;
letter-spacing: 0.24em;
color: rgba(255, 255, 255, 0.5);
}
.crumb-editorial--vertical:hover { color: var(--mult-branco); }
/* --- assinatura do Grupo HP na zona esquerda (páginas da vertical) ---
Logo do grupo a 22px, link para o site institucional. O fio de cabelo
que o separa do texto repete o ::before do .hp-endorse: 1px × 18px em
currentColor, meia-voz. */
/* Lockup empilhado: o logo do grupo assina em cima e o nome da vertical
fica embaixo, em corpo menor. Lado a lado, "Vertical imobiliária" em
caixa alta de 11px lia como o sexto item do menu, que começa 35px
depois. Empilhado, a zona esquerda encolhe de 294px para ~130px, o
menu ganha respiro e a hierarquia fica óbvia: quem assina é o grupo,
o descritivo é legenda. É o mesmo desenho do lockup anterior (marca
em cima, tagline embaixo), agora com o logo no lugar do wordmark. */
.hp-lockup {
display: inline-grid;
justify-items: start;
gap: 6px;
flex: 0 0 auto;
}
.hp-brand {
display: block;
color: var(--mult-branco);
text-decoration: none;
opacity: 0.92;
transition: opacity 200ms var(--ease-dock);
}
.hp-brand:hover,
.hp-brand:focus-visible { opacity: 1; }
.hp-brand svg { display: block; }
/* --- marca --- */
.brand-editorial {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 5px;
text-decoration: none;
color: var(--mult-branco);
}
.brand-editorial__word {
font-size: 17px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--mult-branco);
}
.brand-editorial__tag {
font-size: 9px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.brand-editorial img { height: 34px; width: auto; }
/* --- idioma: PT / EN, EN inativo --- */
.lang-editorial {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mult-branco);
background: none;
border: 0;
padding: 0;
}
.lang-editorial__sep { color: rgba(255, 255, 255, 0.3); font-weight: 300; }
.lang-editorial__off { color: rgba(255, 255, 255, 0.38); cursor: default; }
/* Idioma ativo em voz cheia; os outros dois em meia-voz, acendendo no
hover. Sem caixa e sem bandeira: é navegação, não enfeite. */
.lang-editorial__on { color: var(--mult-branco); }
.lang-editorial__link {
color: rgba(255, 255, 255, 0.42);
text-decoration: none;
transition: color var(--ed-med) var(--ed-ease);
}
.lang-editorial__link:hover,
.lang-editorial__link:focus-visible { color: var(--mult-branco); }
/* --- WhatsApp: link discreto com ícone de 14px. NUNCA botão. --- */
.wa-link {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
color: rgba(255, 255, 255, 0.78);
transition: color var(--ed-med) var(--ed-ease);
}
.wa-link svg { width: 14px; height: 14px; flex: none; }
/* O rótulo do WhatsApp só volta acima de 1900px. Em espanhol ele é
bem mais longo ("Hablar con alquileres") e empurrava o nav central
sobre o seletor de idioma. O ícone com aria-label diz o mesmo. */
@media (max-width: 1900px) {
.site-header__bar .wa-link__label { display: none; }
}
/* Em espanhol o menu inteiro é mais largo e o rótulo ("Hablar con
alquileres") é o mais longo dos três idiomas: ali o ícone basta em
qualquer largura. O vem da própria página traduzida. */
html[lang="es"] .site-header__bar .wa-link__label { display: none; }
.wa-link:hover { color: var(--mult-amarelo-doca); } /* 3º uso legítimo: hover */
/* --- botão de menu (só mobile) --- */
.menu-toggle-editorial {
display: none;
grid-column: 3;
justify-self: end;
/* O botão vira inline-flex no mobile. Sem flex-direction: column os
dois traços viravam ITENS EM LINHA — dois tracinhos lado a lado, e
o estado aberto desenhava um "V" no lugar do X. Empilhar é o que
faz o ícone ser um hambúrguer e o margin-top do 2º traço valer. */
flex-direction: column;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: none;
color: var(--mult-branco);
cursor: pointer;
/* a sombra acompanha o traço, não uma caixa: nada de retângulo */
filter: drop-shadow(0 1px 2px rgba(8, 28, 43, 0.85));
}
/* Contraste independente da foto que estiver atrás.
Dois traços de 1px sobre o canto claro do hero mediam 2,7:1 — e
este é o único controle de navegação do celular. Os traços vão a
2px e ganham uma sombra curta: o par branco/sombra garante a
borda mesmo sobre telhado branco, sem virar botão nem caixa. */
.menu-toggle-editorial span {
display: block;
width: 22px;
height: 2px;
background: currentColor;
transition: transform var(--ed-med) var(--ed-ease),
opacity 200ms linear;
}
/* 2 + 5 + 2 = 9px: os centros seguem a 7px um do outro, então o X
do estado aberto continua fechando com os mesmos 3,5px. */
.menu-toggle-editorial span + span { margin-top: 5px; }
.menu-toggle-editorial[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle-editorial[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
/* ============================================================
10. MENU MOBILE — overlay de tela cheia
Itens grandes em peso 200. Entrada por CSS (sem depender do GSAP).
============================================================ */
.nav-overlay {
position: fixed;
inset: 0;
z-index: 115;
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(20px, 3vh, 34px);
padding: calc(var(--ed-header-h) + 40px) var(--ed-gutter) 56px;
background: var(--mult-azul-profundo);
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: opacity 620ms var(--ed-ease),
transform 620ms var(--ed-ease),
visibility 0s linear 620ms;
overflow-y: auto;
}
.nav-overlay.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0s;
}
.nav-overlay__list {
display: grid;
gap: clamp(16px, 2.4vh, 28px);
justify-items: start;
}
/* Alvo de toque: no celular este overlay é o ÚNICO caminho de
navegação. A 30px/1.1 o link media 33px de altura — abaixo dos
44px recomendados. O min-height + flex leva a área tocável a 44px
sem tocar no tamanho da letra: a tipografia continua a mesma, só
o dedo passa a ter para onde ir. */
.nav-overlay__link {
display: flex;
align-items: center;
min-height: 44px;
font-size: clamp(30px, 7.6vw, 52px);
font-weight: 200;
line-height: 1.1;
letter-spacing: -0.015em;
text-decoration: none;
color: var(--mult-branco);
opacity: 0;
transform: translateY(18px);
transition: opacity 620ms var(--ed-ease), transform 620ms var(--ed-ease);
}
.nav-overlay.is-open .nav-overlay__link { opacity: 1; transform: translateY(0); }
.nav-overlay.is-open .nav-overlay__link:nth-child(1) { transition-delay: 90ms; }
.nav-overlay.is-open .nav-overlay__link:nth-child(2) { transition-delay: 150ms; }
.nav-overlay.is-open .nav-overlay__link:nth-child(3) { transition-delay: 210ms; }
.nav-overlay.is-open .nav-overlay__link:nth-child(4) { transition-delay: 270ms; }
.nav-overlay.is-open .nav-overlay__link:nth-child(5) { transition-delay: 330ms; }
.nav-overlay__link:nth-child(6) { transition-delay: 390ms; }
.nav-overlay__link[aria-current="page"] { color: var(--mult-amarelo-doca); }
.nav-overlay__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: clamp(28px, 5vh, 56px);
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* Mesmo tratamento do rodapé do overlay: o WhatsApp de 11px media
18px de altura e o seletor de idioma pouco mais. A área tocável
sobe para 44px; o desenho (11px, tracking 0.16em) não muda. */
.nav-overlay__foot .wa-link,
.nav-overlay__foot .lang-editorial {
min-height: 44px;
align-items: center;
}
/* O endosso do Grupo HP fecha o rodapé do overlay em linha própria:
abaixo de 1400px o header só mostra a zona esquerda, e nas páginas
Múltiplo o logo do grupo precisa existir em algum lugar do celular.
Sozinho na linha, dispensa o fio separador. */
.hp-endorse--overlay {
flex: 1 0 100%;
min-height: 44px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hp-endorse--overlay::before { display: none; }
body.nav-open { overflow: hidden; }
/* ============================================================
11. RODAPÉ EDITORIAL
Azul Profundo, títulos em eyebrow, fio amarelo separando,
e UMA nota de honestidade — a única do site.
============================================================ */
.footer-editorial {
background: var(--mult-azul-profundo);
color: var(--mult-branco);
padding: clamp(80px, 9vw, 140px) var(--ed-gutter) 40px;
--ed-fg: var(--mult-branco);
--ed-fg-soft: rgba(255, 255, 255, 0.72);
--ed-fg-mute: rgba(255, 255, 255, 0.62);
}
.footer-editorial__inner { max-width: var(--ed-max); margin-inline: auto; }
.footer-editorial__grid {
display: grid;
grid-template-columns: 2.2fr 1fr 1fr 1fr;
gap: clamp(32px, 4vw, 80px);
padding-bottom: clamp(48px, 6vw, 88px);
}
/* Rodapé da landing page (atributo lp): só marca e contato, em duas colunas. */
.footer-editorial__grid--lp { grid-template-columns: 2.2fr 1fr; }
.footer-editorial__word {
font-size: 18px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.24em;
text-transform: uppercase;
}
.footer-editorial__about {
margin-top: 22px;
max-width: 34ch;
font-size: 15px;
font-weight: 300;
line-height: 1.7;
color: rgba(255, 255, 255, 0.6);
}
/* Logo do Grupo HP abrindo a coluna de marca: quem assina o rodapé é o
grupo; o eyebrow logo abaixo nomeia a vertical. */
.footer-editorial__hp {
display: inline-block;
color: var(--mult-branco);
opacity: 0.92;
transition: opacity 200ms var(--ease-dock);
}
.footer-editorial__hp:hover,
.footer-editorial__hp:focus-visible { opacity: 1; }
.footer-editorial__hp svg { display: block; }
.footer-editorial__hp + .eyebrow { margin-top: 28px; }
.footer-editorial__col h2,
.footer-editorial__col h3,
.footer-editorial__col p.eyebrow { margin-bottom: 22px; }
.footer-editorial__col ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 13px;
}
.footer-editorial__col a {
font-size: 14px;
font-weight: 300;
text-decoration: none;
color: rgba(255, 255, 255, 0.72);
transition: color var(--ed-med) var(--ed-ease);
}
.footer-editorial__col a:hover { color: var(--mult-amarelo-doca); }
.footer-editorial__rule {
height: 1px;
border: 0;
margin: 0;
background: var(--mult-amarelo-doca);
opacity: 0.85;
}
.footer-editorial__base {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 16px 32px;
padding-top: 26px;
/* reserva o canto do botão fixo de voltar ao topo (44px + margem) */
padding-right: 64px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.64);
}
/* A ÚNICA nota de honestidade do site. Não repetir na superfície. */
.footer-editorial__nota {
padding-top: 26px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 1.7;
color: rgba(255, 255, 255, 0.64);
max-width: 62ch;
}
/* ============================================================
12. DETALHES
============================================================ */
/* Indicador de rolagem no hero: fio vertical que respira. */
.scroll-cue {
position: absolute;
left: 50%;
bottom: clamp(28px, 4vh, 56px);
z-index: 3;
display: grid;
justify-items: center;
gap: 12px;
transform: translateX(-50%);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
pointer-events: none;
}
.scroll-cue__line {
width: 1px;
height: 44px;
background: linear-gradient(180deg, rgba(245, 189, 66, 0.9), rgba(245, 189, 66, 0));
animation: cue-breathe 3.2s var(--ed-ease) infinite;
transform-origin: top center;
}
@keyframes cue-breathe {
0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
50% { transform: scaleY(1); opacity: 1; }
}
/* Lista editorial (especificações) — fios de cabelo, sem tabela. */
.spec-list { display: grid; width: 100%; max-width: 560px; }
.spec-list > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
padding-block: 16px;
border-bottom: 1px solid var(--ed-hairline);
}
.spec-list dt,
.spec-list__key {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ed-fg-mute);
}
.spec-list dd,
.spec-list__val {
margin: 0;
font-size: 16px;
font-weight: 300;
color: var(--ed-fg);
text-align: right;
}
/* Selos de cliente sem caixa: só o nome, em fio de base. */
.client-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(28px, 4vw, 64px);
padding-top: clamp(24px, 3vw, 40px);
border-top: 1px solid var(--ed-hairline);
}
.client-line span {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ed-fg-mute);
}
/* ------------------------------------------------------------------
Selos de clientes — a marca do ocupante entra em silhueta, nunca
com a cor própria: quatro paletas alheias na mesma linha quebram a
página. O nome escrito é o estado natural; o logo assume o lugar
dele só quando o arquivo existe (media.js decide, ver LEIA-ME em
assets/img/logos/clientes/).
------------------------------------------------------------------ */
.client-mark { display: inline-flex; align-items: center; }
.client-mark__logo {
display: none;
height: clamp(20px, 2.1vw, 28px);
width: auto;
filter: brightness(0);
opacity: 0.52;
transition: opacity 220ms var(--ease-dock);
}
.client-mark.tem-logo .client-mark__logo { display: block; }
.client-mark.tem-logo .client-mark__nome { display: none; }
.client-mark__logo:hover { opacity: 0.78; }
/* Sobre fundo escuro a silhueta é branca, com um degrau a mais de voz:
a mesma opacidade do fundo claro deixa o selo apagado no azul. */
.chapter--dark .client-mark__logo { filter: brightness(0) invert(1); opacity: 0.80; }
/* SOBRE FOTOGRAFIA (chapter--media / hero) a regra é outra: o selo preto
sumia dentro da imagem (era o caso da faixa "Operam nestes endereços").
Branco quase cheio, porque fotografia é fundo inquieto e o selo precisa
se impor sem ganhar caixa nem sombra. */
.chapter--media .client-mark__logo,
.chapter--hero .client-mark__logo { filter: brightness(0) invert(1); opacity: 0.95; }
.chapter--media .client-mark__nome,
.chapter--hero .client-mark__nome { color: rgba(255, 255, 255, 0.86); }
/* Equilíbrio ÓPTICO, não geométrico: altura igual para todos faz o
lockup de duas linhas (Mercado Livre) parecer metade dos de uma
linha só. Cada marca ganha o fator que a faz pesar igual na linha. */
.client-mark__logo[src*="mercado-livre"] { height: clamp(30px, 3.2vw, 43px); }
.client-mark__logo[src*="wework"] { height: clamp(19px, 2.0vw, 26px); }
/* Quadrado 1:1 pesa menos que wordmark na mesma altura: sobe um degrau.
O "itaú" é VAZADO no arquivo (transparência real), então a silhueta
preserva a leitura da marca nos dois fundos. */
.client-mark__logo[src*="itau"] { height: clamp(27px, 2.9vw, 38px); }
/* Foco visível coerente com a marca. */
.cta-editorial:focus-visible,
.cta-ghost:focus-visible,
.nav-editorial__link:focus-visible,
.nav-overlay__link:focus-visible,
.wa-link:focus-visible,
.hp-brand:focus-visible,
.hp-endorse:focus-visible,
.crumb-editorial:focus-visible,
.footer-editorial__hp:focus-visible {
outline: 1px solid var(--mult-amarelo-doca);
outline-offset: 6px;
}
/* ============================================================
13. DESINTOXICAÇÃO DA v1
Neutraliza, em qualquer página que ainda tenha marcação antiga,
os elementos que derrubaram a nota. Assim nenhuma sobra de HTML
legado reintroduz o amarelo grande, o card ou a etiqueta.
============================================================ */
/* Etiquetas de status somem da superfície. A honestidade fica em
um lugar só: a nota de créditos do rodapé. */
.media-note,
.validar-tag,
.seal--pendente { display: none !important; }
/* Qualquer botão legado — amarelo da v1 ou Areia da v2 — perde a
superfície e vira o mesmo objeto de tipografia e fio. */
.btn.btn--primary,
.btn.btn--secondary,
.btn--lg {
background: none !important;
box-shadow: none;
color: var(--ed-fg);
border: 0;
border-bottom: 1px solid var(--mult-amarelo-doca);
border-radius: 0;
min-height: 0;
padding: 0 0 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.btn.btn--primary:hover,
.btn.btn--secondary:hover { color: var(--mult-amarelo-doca); }
/* Badges pílula amarelas → texto com ponto amarelo de 4px. */
.badge {
background: transparent !important;
border: 0 !important;
border-radius: 0;
padding: 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ed-fg-mute);
}
.badge .dot { width: 4px; height: 4px; background: var(--mult-amarelo-doca); }
/* Cards com sombra → sem sombra, sem raio, sem hover que levanta. */
.unit-card, .asset-card, .compare-card {
box-shadow: none;
border-radius: 0;
background: transparent;
}
.unit-card::after, .asset-card::after { display: none; }
.unit-card:hover, .asset-card:hover { transform: none; }
.asset-card--destaque { outline: 0; }
/* Véu chapado do hero legado → gradiente de marca. */
.hero__media::after { background: var(--ed-veil-left); }
/* Barra fixa de CTA no mobile (dois botões amarelos) — fora. */
.sticky-cta { display: none !important; }
@media (max-width: 720px) { body { padding-bottom: 0; } }
/* ============================================================
14. RESPONSIVO
No mobile o capítulo continua sendo capítulo: uma ideia por
tela, imagem inteira, texto respirando. Só a assimetria some.
============================================================ */
/* Entre 1400 e 1620px o menu de 5 itens, com rótulos mais longos
("Galpões logísticos", "Imóveis sob encomenda"), fica no limite (e em
espanhol passa dele). Um degrau menor de corpo e de tracking devolve
a folga sem tirar nenhum item do ar. */
@media (min-width: 1401px) and (max-width: 1620px) {
.nav-editorial__link { font-size: 10px; letter-spacing: 0.11em; }
.lang-editorial, .wa-link { font-size: 10px; }
}
@media (max-width: 1400px) {
.site-header__bar { grid-template-columns: 1fr auto; }
/* Some o nav central e as ferramentas; a marca da página fica. */
.site-header__zone--brand,
.site-header__zone--right { display: none; }
.site-header__zone--left { grid-column: 1; justify-content: flex-start; }
.brand-editorial { align-items: flex-start; }
.menu-toggle-editorial { display: inline-flex; grid-column: 2; }
:root { --ed-header-h: 68px; }
}
/* O menu espanhol precisa de mais espaço antes de assumir a forma desktop. */
@media (min-width: 1401px) and (max-width: 1500px) {
html[lang="es"] .site-header__bar { grid-template-columns: 1fr auto; }
html[lang="es"] .site-header__zone--brand,
html[lang="es"] .site-header__zone--right { display: none; }
html[lang="es"] .site-header__zone--left { grid-column: 1; justify-content: flex-start; }
html[lang="es"] .brand-editorial { align-items: flex-start; }
html[lang="es"] .menu-toggle-editorial { display: inline-flex; grid-column: 2; }
}
.home-units { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.home-unit { min-width: 0; }
@media (max-width: 700px) { .home-units { grid-template-columns: 1fr; } }
html[lang="es"] #titulo-disponibilidade .accent-word { color: var(--mult-azul-profundo); }
@media (max-width: 900px) {
.chapter { min-height: 0; padding-block: clamp(56px, 12vw, 96px); }
.chapter--media,
.chapter--hero { min-height: 92vh; }
.chapter--split,
.chapter--split-reverse {
display: block;
padding-inline: 0;
min-height: 0;
}
.chapter--split > .chapter__media,
.chapter--split-reverse > .chapter__media {
min-height: 0;
aspect-ratio: 4 / 3;
margin-bottom: clamp(28px, 6vw, 48px);
}
.chapter--split > .chapter__text,
.chapter--split-reverse > .chapter__text {
padding-inline: var(--ed-gutter);
max-width: none;
}
.grid-12 > [class*="col-"] { grid-column: 1 / -1; }
.footer-editorial__grid { grid-template-columns: 1fr 1fr; }
.footer-editorial__col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
/* Em 375px a zona esquerda tem 267px úteis. O lockup empilhado cabe
(logo de 129px sobre um descritivo de 9px), então ele fica. O que
não cabe é a migalha do Múltiplo ao LADO do logo da marca: essa
sai, e o logo continua sendo o link de volta. */
.site-header__zone--left > .crumb-editorial { display: none; }
.footer-editorial__grid { grid-template-columns: 1fr; }
.stat-row { gap: clamp(32px, 9vw, 48px); }
.cta-row { gap: 22px; }
.figure--tall { min-height: 70vh; }
}
/* Movimento reduzido: nada pisca, nada respira. */
@media (prefers-reduced-motion: reduce) {
.scroll-cue__line { animation: none; transform: scaleY(1); opacity: 0.6; }
.nav-overlay,
.nav-overlay__link { transition-duration: 0.01ms; }
}
/* ------------------------------------------------------------------
CANAL PENDENTE (protótipo)
O botão do WhatsApp existe como intenção de projeto, mas não há
número oficial (R12). Em vez de apontar para um wa.me inventado —
que abriria conversa com um desconhecido durante a apresentação —
ele vira um elemento inerte, com o mesmo desenho e sem o gesto de
quem clica: sem seta que desliza, sem cursor de mão.
------------------------------------------------------------------ */
.cta-editorial.is-pendente {
cursor: default;
opacity: 0.62;
border-style: dashed;
}
.cta-editorial.is-pendente:hover { transform: none; }
.cta-editorial.is-pendente svg { opacity: 0.8; }
/* ==================================================================
ENDOSSO DO GRUPO HP NAS EXTREMIDADES
------------------------------------------------------------------
Pedido de direção: que ninguém esqueça, em nenhuma tela, que o
Grupo HP controla o conjunto — no registro da JHSF, onde a marca
controladora é presença silenciosa e permanente, nunca alarde.
O manual da holding (pág. 27) autoriza: "parte do grafismo do
logotipo do Grupo pode ser utilizado como marca d'água nas peças,
integrando o layout".
Três gestos, todos discretos:
1. FITAS VERTICAIS nas duas bordas da janela — "GRUPO HP" em caixa
alta, 10px, tracking largo, girado 90°. Ficam fixas: o
endosso acompanha a leitura inteira, em qualquer página.
2. mix-blend-mode: difference resolve o contraste sozinho — sobre
o Azul Profundo a fita clareia, sobre a Areia escurece, sobre
fotografia se adapta. Sem JS, sem trocar cor por seção.
3. pointer-events: none e aria-hidden: é ornamento de layout, não
conteúdo; não intercepta clique nem entra no leitor de tela.
Some abaixo de 1200px: em tela estreita a margem é do conteúdo.
================================================================== */
.hp-edge {
position: fixed;
top: 50%;
z-index: 60;
display: none;
align-items: center;
gap: 14px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--mult-branco);
mix-blend-mode: difference;
/* 0.72: o difference devolve cinza sobre fundo cinza-médio (vidro do
grupo.html); mais opacidade segura a legibilidade no pior caso. */
opacity: 0.72;
pointer-events: none;
white-space: nowrap;
user-select: none;
}
.hp-edge--left { left: 18px; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; }
.hp-edge--right { right: 18px; transform: translateY(-50%); writing-mode: vertical-rl; }
/* fio de cabelo que prolonga a fita — a régua da marca controladora */
.hp-edge::after {
content: "";
width: 1px;
height: clamp(40px, 9vh, 96px);
background: currentColor;
opacity: 0.5;
}
@media (min-width: 1200px) { .hp-edge { display: flex; } }
@media (prefers-reduced-motion: reduce) { .hp-edge { opacity: 0.55; } }
/* ------------------------------------------------------------------
VOLTAR AO TOPO
Botão fixo no canto inferior direito, criado por js/core/layout.js.
Nasce invisível; ganha .is-visible depois de 80% da altura da janela
rolada e some com o menu mobile aberto (body.nav-open). Vidro escuro
com fio branco: nunca fundo amarelo (o amarelo é só a seta no hover).
z-index 100: abaixo do header (120) e do overlay (115), acima das
fitas .hp-edge (60), que vivem centradas na borda, longe do canto.
(A antiga assinatura de fecho .hp-signature saiu em 03/09/2026: o
logo do grupo agora abre a coluna de marca do rodapé.)
------------------------------------------------------------------ */
.to-top-editorial {
position: fixed;
right: clamp(16px, 2vw, 28px);
bottom: clamp(16px, 2vw, 28px);
z-index: 100;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(8, 28, 43, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--mult-branco);
display: grid;
place-items: center;
padding: 0;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 520ms cubic-bezier(0.16, 1, 0.30, 1),
transform 520ms cubic-bezier(0.16, 1, 0.30, 1),
border-color 200ms var(--ease-dock),
visibility 0s linear 520ms;
}
.to-top-editorial svg {
display: block;
width: 16px;
height: 16px;
transition: color 200ms var(--ease-dock);
}
.to-top-editorial.is-visible {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
.to-top-editorial:hover,
.to-top-editorial:focus-visible { border-color: rgba(255, 255, 255, 0.5); }
.to-top-editorial:hover svg,
.to-top-editorial:focus-visible svg { color: var(--mult-amarelo-doca); }
body.nav-open .to-top-editorial { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
.to-top-editorial { transition: none; }
}
/* ==================================================================
COSTURA ENTRE CAPÍTULOS — fim do buraco entre seções
------------------------------------------------------------------
Medição na home (1440×900): oito vãos de 273 a 390px, todos na
emenda de um capítulo com o seguinte. A causa é aritmética: cada
.chapter tem padding vertical de clamp(96px,12vw,200px), então a
emenda soma DOIS paddings — ~346px de cor chapada.
O critério não é "diminuir tudo". Quando o fundo MUDA (Areia →
Azul Profundo), o vão é a respiração que separa dois assuntos e
fica como está. Quando o fundo CONTINUA o mesmo, não há separação
nenhuma para marcar: é só buraco. Nesses casos a emenda encolhe
para cerca de um terço.
================================================================== */
.chapter--sand + .chapter--sand,
.chapter--sand + .chapter--light,
.chapter--light + .chapter--sand,
.chapter--light + .chapter--light,
.chapter--dark + .chapter--dark,
.chapter--azul + .chapter--azul {
padding-top: clamp(48px, 5vw, 92px);
}
/* o capítulo que fecha um bloco de mesma cor também não precisa do
colchão inteiro embaixo */
.chapter--sand:has(+ .chapter--sand),
.chapter--sand:has(+ .chapter--light),
.chapter--light:has(+ .chapter--sand),
.chapter--light:has(+ .chapter--light),
.chapter--dark:has(+ .chapter--dark),
.chapter--azul:has(+ .chapter--azul) {
padding-bottom: clamp(48px, 5vw, 92px);
}
/* ------------------------------------------------------------------
Endosso do Grupo HP: o logo completo fecha a extremidade direita do
header nas páginas Múltiplo (nas páginas da vertical o grupo já abre a
esquerda, ver .hp-brand) e repete no rodapé do overlay mobile
(.hp-endorse--overlay). Um fio de cabelo o separa das ferramentas; o
hover devolve a opacidade cheia.
------------------------------------------------------------------ */
.hp-endorse {
display: flex;
align-items: center;
gap: 16px;
flex: 0 0 auto;
/* Endosso, não protagonista: menor que a marca da página e em
meia-voz — a 20px o desenho fica nítido em retina e discreto
na barra. O tamanho de leitura plena das listras é o do footer. */
opacity: 0.78;
transition: opacity 200ms var(--ease-dock);
}
.hp-endorse:hover,
.hp-endorse:focus-visible { opacity: 1; }
.hp-endorse::before {
content: "";
width: 1px;
height: 18px;
background: currentColor;
opacity: 0.28;
}
.hp-endorse svg { display: block; }
/* Aplicado por costurarSecoes() em js/core/layout.js: vizinhas de mesma
cor não precisam de dois colchões inteiros na emenda. */
#conteudo > .seam-tight { padding-top: clamp(48px, 5vw, 92px); }
#conteudo > .seam-tight-bottom { padding-bottom: clamp(48px, 5vw, 92px); }
/* Promoção de camada só com motion ligado (gate .motion-ok) —
sem motion, nenhum elemento fica promovido à toa. */
.motion-ok .figure > video { will-change: transform; }
/* ============================================================
REVISÃO DE LEITURA E CELULAR (17/09/2026, HP-184)
Regras que as 13 páginas repetiam uma a uma: tamanho mínimo de
rótulo, alvo de toque dos CTAs e véu de foto quando o texto ocupa
a largura toda.
============================================================ */
@media (max-width: 900px) {
.eyebrow,
.stat-editorial__label,
.hero-context,
.caption-editorial,
.spec-list dt,
.spec-list__key,
.footer-editorial__base,
.footer-editorial__nota { font-size: 12px; }
/* Com 12px, rótulos curtos passavam a deixar uma palavra sozinha. */
.eyebrow,
.hero-context,
.stat-editorial__label { text-wrap: balance; }
/* 44px de alvo de toque; a sobra fica acima do texto, então o fio
continua a 10px dele. */
.cta-editorial,
.cta-ghost { font-size: 12px; min-height: 44px; padding-top: 19px; }
.cta-row { row-gap: 6px; }
.chapter__inner--center .cta-row { justify-content: center; }
/* O respiro do capítulo no celular (56px) ficava menor que o header
fixo (68px) na abertura e colava no indicador de rolagem. */
.chapter--hero { padding-block: 96px 128px; }
/* Véu lateral não cobre texto em largura total: no celular a foto
escurece de cima para baixo, onde o texto está. */
.chapter--media > .figure--veil-left,
.chapter--media > .figure--veil-right,
.chapter--media > .figure--veil-anchor-left,
.chapter--media > .figure--veil-anchor-right,
.chapter--hero > .figure--veil-left,
.chapter--hero > .figure--veil-right,
.chapter--hero > .figure--veil-anchor-left,
.chapter--hero > .figure--veil-anchor-right { --fig-veil: var(--ed-veil-hero); }
}
/* Rótulos pequenos sobre fotografia: um halo escuro segura a leitura
nos trechos claros (céu, vidro, fachada) sem virar bloco chapado. */
.chapter--media :is(.eyebrow, .hero-context, .caption-editorial, .stat-editorial__label),
.chapter--hero :is(.eyebrow, .hero-context, .caption-editorial, .stat-editorial__label) {
text-shadow: 0 0 16px rgba(8, 28, 43, 0.85), 0 1px 3px rgba(8, 28, 43, 0.7);
}
/* Telas estreitas: tracking um degrau menor para rótulos e CTAs não
estourarem a coluna nem quebrarem numa palavra só. */
@media (max-width: 400px) {
.eyebrow,
.hero-context,
.stat-editorial__label { letter-spacing: 0.16em; }
.cta-editorial,
.cta-ghost { letter-spacing: 0.12em; }
}
/* ============================================================
REFINO DO CELULAR (HP-177, 17/09/2026)
Correções da auditoria automática em 360, 390, 430, 768 e 844x390.
============================================================ */
/* Seletor de idioma no menu do celular: cada idioma media 18px de
altura e o toque caía no vão. O link ganha 44px de alvo; o desenho
(11px, tracking, barras) continua igual porque o respiro lateral de
6px substitui o gap de 7px. */
.nav-overlay__foot .lang-editorial { gap: 1px; margin-left: -6px; }
.nav-overlay__foot .lang-editorial__link,
.nav-overlay__foot .lang-editorial__on {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: 6px;
}
/* Marcas do header: área tocável maior sem mudar o desenho. No lockup
da vertical, logo e descritivo levam ao mesmo destino (a home), então
as duas áreas somadas ocupam a altura útil do header. */
.hp-brand,
.crumb-editorial--vertical,
a.brand-editorial { position: relative; }
.hp-lockup .hp-brand::after { content: ""; position: absolute; inset: -12px -8px -3px; }
.hp-lockup .crumb-editorial--vertical::after { content: ""; position: absolute; inset: -3px -8px -14px; }
a.brand-editorial::after { content: ""; position: absolute; inset: -8px; }
/* Logo do rodapé: 36px de altura viram 44px de alvo, sem empurrar o
eyebrow de baixo. */
a.footer-editorial__hp { padding-block: 4px; margin-block: -4px; }
/* Links de texto em lista (e-mail do contato): alvo de 44px por uma
área invisível, sem mexer no fio de sublinhado. */
.link-ed { position: relative; }
.link-ed::after { content: ""; position: absolute; inset: -12px 0; }
/* Títulos e frases de exibição curtas: sem palavra sozinha na última
linha ("permanece." na home, "inspección." no Múltiplo em espanhol). */
.home-phrase,
.afirmacao { text-wrap: balance; }
/* Piso de 12px para rótulos no celular e no tablet. Vários vivem nos