/* mocosense · a landing, segunda versão
* ═══════════════════════════════════════════════════════════════════════════
*
* Implementa o desenho aprovado no Claude Design: um herói de 640vh onde o
* scroll não passa a página — conduz uma coreografia de sete fases, uma por
* verbo do que a casa faz. As peças que andam no ecrã são os NÚMEROS
* VERDADEIROS do produto, não enfeite: o 65,0 que aterra no cartão grande é
* a fatia do crédito que vai para o Estado.
*
* A matemática do movimento vive em `sense2.js`. Aqui está a matéria: as
* cores, os tipos, as superfícies e as medidas fixas que o desenho fixou.
*
* UMA LINHA QUE PARECE DETALHE E NÃO É: `overflow-x: clip` no body, nunca
* `hidden`. Com `hidden`, o body passa a ser o bloco que contém os elementos
* presos, e TODOS os `position: sticky` da página deixam de funcionar — o
* herói inteiro assenta nisso.
*/
/* As fontes da casa, servidas da própria origem. A política de segurança não
* deixa entrar nada de fora, e ainda bem: uma folha que depende de um CDN
* depende de terceiros para mostrar um número que dizemos ser verificável. */
@font-face {
font-family: 'Stack Sans Notch';
src: url('/marca/stacksansnotch.woff2') format('woff2-variations');
font-weight: 200 700;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Sans';
src: url('/marca/plex-regular.woff2') format('woff2');
font-weight: 400; font-display: swap;
}
@font-face {
font-family: 'IBM Plex Sans';
src: url('/marca/plex-medium.woff2') format('woff2');
font-weight: 500; font-display: swap;
}
:root {
--azul-moco: #173D64;
--creme-moco: #E8DDC8;
--azul-2: #3E6B96;
--ambar: #B45309;
--fundo: #F0F3F5;
--superficie: #F5F7FA;
--cartao: #FCFDFE;
--tinta: #14140F;
--secundario: #4c5561;
--linha: #DDE3EA;
--escuro: #0B1119;
--escuro-2: #141E2A;
--escuro-texto: #F2F5F8;
--escuro-secundario: #A3BFD6;
--dados-1: #173D64; --dados-2: #2C5580; --dados-3: #4A749C;
--dados-4: #7098BC; --dados-5: #A3BFD6;
/* AS TRÊS CORES DE CONFIANÇA. Faltavam nesta folha por inteiro, e uma
* variável que não existe torna a declaração inválida: a camada de
* confiança saía com a cor herdada do pai, ou seja, sem cor nenhuma.
* Pertencem ao selo de estado e a mais nada — nunca a um juízo de valor
* sobre outra coisa qualquer. */
--forte: #146132;
--media: #8A3F07;
--fraca: #B91C1C;
--fonte-display: 'Stack Sans Notch', 'IBM Plex Sans', system-ui, sans-serif;
--fonte-texto: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
--fonte-mono: 'IBM Plex Mono', ui-monospace, monospace;
--aurora-fria: radial-gradient(60% 80% at 22% 24%, rgba(62,107,150,.42), transparent 64%),
radial-gradient(52% 64% at 74% 68%, rgba(23,61,100,.52), transparent 66%),
radial-gradient(50% 60% at 60% 20%, rgba(232,221,200,.42), transparent 62%),
linear-gradient(150deg, #4A749C, #173D64);
--grao: url("data:image/svg+xml;utf8,");
/* A MALHA DO HERÓI, NUM SÓ TRAÇO E NÃO EM DOIS GRADIENTES CRUZADOS.
* Com `repeating-linear-gradient` nos dois eixos, cada cruzamento leva a cor
* duas vezes: medido, uma linha a 16% dá um ponto de 29% em cada cruzamento
* — #B7B9BB, 1,97:1 contra o branco, um mosaico de pontos que se vê antes de
* se ver a malha. Aqui a linha é UM caminho, pintado uma vez: o cruzamento
* tem exactamente a mesma força do resto do traço, e a intensidade fica toda
* na opacidade da camada. */
--grelha: url("data:image/svg+xml;utf8,");
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
/* clip, NUNCA hidden — ver o cabeçalho deste ficheiro. */
overflow-x: clip;
background: var(--fundo);
color: var(--tinta);
font-family: var(--fonte-texto);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1, h2 { margin: 0; font-family: var(--fonte-display); font-weight: 700; letter-spacing: -.03em; }
p { margin: 0; }
.rot {
font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
color: var(--secundario); font-weight: 500;
}
.so-leitor {
position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
:where(a, button):focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
/* ── a barra fixa ─────────────────────────────────────────────────────── */
.topo {
position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 30;
block-size: 72px;
display: flex; align-items: center; justify-content: space-between;
padding: 0 clamp(16px, 4vw, 64px);
/* A BARRA TEVE DE TROCAR DE LADO, e não foi capricho. Era vidro escuro a
* 42% com letra creme: por cima do azul do herói lia-se, por cima do branco
* novo dava um borrão cinzento — medido, #989B9E, e o creme em cima dele
* caía para 1,88:1. Vidro claro resolve nos dois extremos da página: sobre
* o herói branco a letra azul mede 11,12:1, e sobre o preto do #rel-caixa,
* que é o fundo mais escuro por onde a barra passa, ainda mede 6,84:1. */
background: rgba(255, 255, 255, .78);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.topo-marca {
font-family: var(--fonte-display); font-weight: 700; font-size: 20px;
letter-spacing: -.02em; color: var(--azul-moco); text-decoration: none;
}
/* As mesmas contas das pastilhas do remate: cheia em azul (8,27:1 com o creme
* por cima), linha com risco azul a 70%. O risco é o que mais sofre com a
* barra a atravessar a página inteira — medido, 4,64:1 sobre o herói branco e
* 3,58:1 sobre o vidro que se forma quando a barra passa por cima do #0B1119
* da secção horizontal, o fundo mais escuro do caminho. */
.topo .pil-cheia { background: var(--azul-moco); color: var(--creme-moco); }
.topo .pil-linha { border-color: rgba(23,61,100,.7); color: var(--azul-moco); }
.topo-accoes { display: flex; gap: 10px; }
.pil {
display: inline-flex; align-items: center; justify-content: center;
min-block-size: 44px; padding: 0 18px;
font-size: 14px; text-decoration: none; border-radius: 999px;
white-space: nowrap;
transition: transform .2s cubic-bezier(.22,1,.36,1), opacity .2s;
}
.pil:hover { transform: translateY(-1px); }
.pil-linha { border: 1px solid rgba(232,221,200,.42); color: var(--creme-moco); }
.pil-cheia { background: var(--creme-moco); color: var(--azul-moco); font-weight: 600; }
/* A BARRA NÃO CABIA NO TELEMÓVEL. Medido a 375px: a barra precisava de 396px e
* «Ver os números de hoje» — o botão principal da casa — saía 21,5px fora do
* ecrã, cortado ao meio. O corpo tem `overflow-x: clip`, por isso não havia
* barra de rolamento a denunciar o defeito: o botão estava simplesmente
* cortado, e ninguém o via a menos que medisse.
*
* Aperta-se o que é folga e não se tira nada: as margens da barra, o espaço
* entre pastilhas e o enchimento de cada uma. Nenhuma pastilha sai da barra —
* quem paga a conta é a folga, não o conteúdo. O `min-block-size: 44px` do
* alvo de toque fica INTACTO nos dois degraus: é a medida que não se negoceia.
*
* Medido, com «Os planos» já escondido abaixo dos 900px (regra que já existia):
* larguras precisa folga
* 320px 311px +9
* 360px 311px +49
* 375px 349px +26
* 430px 349px +81
* 431px 415px +16 (já sem estas regras — não há salto no degrau)
*
* Dois degraus e não um: a 320px o primeiro ainda não chegava (precisava de
* 349 num ecrã de 320), e um ecrã de 320px continua a ser um telemóvel que
* alguém tem na mão em Luanda. */
@media (max-width: 430px) {
.topo { padding-inline: 12px; }
.topo-accoes { gap: 6px; }
.topo .pil { padding-inline: 11px; font-size: 13px; }
.topo-marca { font-size: 18px; }
}
@media (max-width: 360px) {
.topo { padding-inline: 10px; }
.topo-accoes { gap: 5px; }
.topo .pil { padding-inline: 9px; font-size: 12px; }
.topo-marca { font-size: 16px; }
}
/* ── as superfícies de marca que o rodapé usa ────────────────────────── */
.aurora-fria { background-image: var(--aurora-fria); background-size: cover; }
.grao { isolation: isolate; }
.grao::after {
content: ''; position: absolute; inset: 0;
background-image: var(--grao); background-size: 160px 160px;
mix-blend-mode: soft-light; opacity: .85; pointer-events: none;
}
/* ── o método e o acervo ──────────────────────────────────────────────── */
.metodo, .acervo2 {
max-inline-size: 1180px; margin-inline: auto;
padding: clamp(60px, 10vh, 120px) clamp(16px, 4vw, 64px);
}
.metodo h2, .acervo2 h2 { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.1; margin-block: 10px 34px; }
.acervo2 { background: var(--superficie); max-inline-size: none; }
.acervo2 > * { max-inline-size: 1180px; margin-inline: auto; }
.acervo2-grelha {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
gap: clamp(22px, 3vw, 40px); margin: 0;
}
.acervo2-item { margin: 0; }
.acervo2-num {
font-family: var(--fonte-display); font-weight: 700;
font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.03em;
color: var(--azul-moco); font-variant-numeric: tabular-nums;
}
.acervo2-item dd { margin: 8px 0 0; display: grid; gap: 4px; }
.acervo2-item dd span:first-child { font-size: 14px; }
.acervo2-item dd span:last-child { font-size: 12px; color: var(--secundario); line-height: 1.45; }
/* Quem pediu menos movimento recebe a página parada e legível. */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* ═══════════════════════════════════════════════════════════════════════
* AS SECÇÕES DE ARGUMENTO que ficaram da landing de Agosto — o método e o
* nome. Extraídas do protótipo aprovado e revistas contra ele; as
* correcções que a revisão obrigou estão comentadas no sítio onde vivem.
* ═══════════════════════════════════════════════════════════════════════ */
/* ── o método: o cartão que se prova a si próprio ─────────────────────────
*
* Uma superfície de dado nunca passa dos 6px de raio; o cartão que a contém
* tem 32px. É a mesma regra dita duas vezes: o relevo e a curva são para o
* que se toca e para o que contém, nunca para o que se lê.
*/
.seccao-metodo {
/* O relevo do cartão. Os tokens globais de relevo (--relevo-2) ainda não
* existem nesta folha; quando existirem, esta linha aponta para lá e os
* dois hex desaparecem daqui. A luz é 98% de branco, nunca 100%. */
--metodo-relevo: 6px 6px 12px #D1D9E6, -6px -6px 12px #FAFCFE;
/* A camada escura traz os seus dois tons próprios, que não têm token:
* 17,3:1 para o texto e 7,2:1 para o rótulo, medidos sobre --escuro. */
--metodo-escuro-tinta: #F2F5F8;
--metodo-escuro-rot: #93A1B1;
background: var(--fundo);
padding: clamp(56px, 7vw, 104px) clamp(20px, 4vw, 64px);
}
.metodo-dentro { max-inline-size: 1180px; margin-inline: auto; }
.metodo-cabeca { max-inline-size: 1080px; }
.metodo-cabeca h2 {
color: var(--azul-moco);
font-size: clamp(28px, 3.6vw, 52px); line-height: 1.1;
margin-block-start: 16px; text-wrap: pretty;
}
.metodo-entrada {
font-size: clamp(15px, 1.5vw, 20px); line-height: 1.55;
color: var(--tinta); max-inline-size: 720px; margin-block-start: 18px;
}
.metodo-corpo {
display: flex; flex-wrap: wrap; gap: 24px;
margin-block-start: 40px; align-items: flex-start;
}
/* ── o cartão ─────────────────────────────────────────────────────────── */
.metodo-cartao {
flex: 1 1 380px;
display: flex; flex-direction: column; gap: 14px;
background: var(--cartao);
border-radius: 32px;
box-shadow: var(--metodo-relevo);
padding: clamp(24px, 3vw, 36px);
}
/* O cursor de mão só aparece quando já há JavaScript para o honrar. */
.metodo-cartao.vivo { cursor: pointer; }
.metodo-cartao-rot {
font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
color: var(--secundario);
}
/* Corpo grande, cauda pequena: 76px de inteiro contra 32px de milhar — os
* 42% que o desenho fixou. Nunca um tamanho a meio caminho. */
.metodo-valor { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.metodo-valor-num {
font-family: var(--fonte-display); font-weight: 700;
letter-spacing: -.04em; font-variant-numeric: tabular-nums;
color: var(--azul-moco);
font-size: clamp(48px, 5.4vw, 76px); line-height: .9;
}
.metodo-valor-cauda { font-size: clamp(20px, 2.2vw, 32px); font-weight: 600; letter-spacing: -.02em; }
.metodo-valor-unidade { font-size: 15px; color: var(--secundario); }
/* O disco tem 40px porque é o desenho aprovado — mas o botão é a LINHA
* inteira, não o disco: 14px de folga + 1px de fio + 40px de disco = 55px de
* alvo medido. Assim o desenho fica de pé e a regra dos 44px cumpre-se sem
* inchar o círculo. */
.metodo-accao {
appearance: none; -webkit-appearance: none;
border: 0; background: none; padding: 0;
font: inherit; color: inherit; text-align: start;
inline-size: 100%; min-block-size: 44px;
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding-block-start: 14px;
border-block-start: 1px solid var(--linha);
cursor: pointer;
}
.metodo-accao[hidden] { display: none; }
.metodo-accao-texto { font-size: 13px; color: var(--secundario); }
.metodo-accao-glifo {
inline-size: 40px; block-size: 40px; border-radius: 999px; flex: none;
background: var(--escuro); color: var(--metodo-escuro-tinta);
display: inline-flex; align-items: center; justify-content: center;
font-size: 17px; line-height: 1;
transition: background 150ms ease-out;
}
/* O único sinal de rato é uma troca de cor de marca. Nada salta: o glifo é um
* marcador de coordenada, não um enfeite que reage. */
.metodo-accao:hover .metodo-accao-glifo { background: var(--azul-moco); }
/* ── as cinco camadas ─────────────────────────────────────────────────── */
.metodo-camadas { display: flex; flex-direction: column; gap: 8px; }
.metodo-camada {
background: var(--superficie);
border-radius: 6px; /* 6px é o tecto em qualquer superfície de dado */
padding: 14px;
}
.metodo-camada[hidden] { display: none; }
.metodo-camada-rot {
font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
color: var(--secundario);
}
.metodo-camada-txt {
font-size: 15px; line-height: 1.45; color: var(--tinta);
margin-block-start: 5px;
}
/* A cor da confiança vive aqui e em mais lado nenhum da secção — e nunca
* sozinha: a palavra «Forte» está escrita ao lado dela. 7,0:1 sobre a
* superfície. */
.metodo-camada-confianca .metodo-camada-rot,
.metodo-camada-confianca .metodo-camada-txt { color: var(--forte); }
/* A cor segue o estado real da leitura — a palavra («Média») está sempre
escrita ao lado, a cor nunca fala sozinha. */
.metodo-camada-confianca[data-confianca="media"] .metodo-camada-rot,
.metodo-camada-confianca[data-confianca="media"] .metodo-camada-txt { color: var(--media); }
.metodo-camada-confianca[data-confianca="fraca"] .metodo-camada-rot,
.metodo-camada-confianca[data-confianca="fraca"] .metodo-camada-txt { color: var(--fraca, #B91C1C); }
.metodo-camada-formula { background: var(--creme-moco); }
.metodo-camada-formula .metodo-camada-txt {
font-family: var(--fonte-mono); font-size: 13px; color: var(--azul-moco);
}
.metodo-camada-documento { background: var(--escuro); }
.metodo-camada-documento .metodo-camada-rot { color: var(--metodo-escuro-rot); }
.metodo-camada-documento .metodo-camada-txt {
font-family: var(--fonte-mono); font-size: 12px; color: var(--metodo-escuro-tinta);
/* Só aqui: o selo são 40 caracteres sem um espaço e num telemóvel de 375px
* o cartão tem 287px úteis — medido. Partir palavras portuguesas assim
* seria feio; partir um selo é o correcto. */
overflow-wrap: anywhere;
}
/* ── o trilho de cinco segmentos ──────────────────────────────────────── */
.metodo-trilho {
display: flex; gap: 8px;
margin-block-start: auto; padding-block-start: 12px;
}
.metodo-trilho[hidden] { display: none; }
.metodo-trilho-seg {
flex: 1; block-size: 4px; border-radius: 2px;
background: var(--linha);
transition: background 150ms ease-out;
}
.metodo-trilho-seg[data-aceso="sim"] { background: var(--azul-moco); }
/* ── a lista dos cinco passos ─────────────────────────────────────────── */
.metodo-passos {
flex: 1 1 340px;
display: flex; flex-direction: column; gap: 10px;
list-style: none; margin: 0; padding: 0;
}
.metodo-passo {
appearance: none; -webkit-appearance: none;
border: 0; font: inherit; text-align: start;
inline-size: 100%;
display: flex; align-items: baseline; gap: 16px;
background: var(--superficie); color: var(--tinta);
border-radius: 6px; padding: 16px 18px; cursor: pointer;
transition: background 150ms ease-out, color 150ms ease-out;
}
.metodo-passo[data-aberto="sim"] { background: var(--creme-moco); color: var(--azul-moco); }
.metodo-passo-n {
font-family: var(--fonte-mono); font-size: 12px;
color: var(--secundario); flex: none;
}
.metodo-passo[data-aberto="sim"] .metodo-passo-n { color: var(--azul-moco); }
.metodo-passo-txt { min-inline-size: 0; display: block; }
.metodo-passo-nome { display: block; font-size: 15px; font-weight: 400; }
.metodo-passo[data-aberto="sim"] .metodo-passo-nome { font-weight: 600; }
/* O apoio fica em --secundario nas duas superfícies: 7,0:1 sobre a superfície
* e 5,6:1 sobre o creme. Com o #65686E do protótipo dava 4,15:1 sobre o
* creme — reprovava AA a 13px. O token da casa é mais escuro e passa. */
.metodo-passo-apoio {
display: block; font-size: 13px; color: var(--secundario);
line-height: 1.5; margin-block-start: 3px;
}
/* ── 5 · o nome, e a assinatura ───────────────────────────────────────── */
/* `position: relative` aqui não é arrumação — é o que prende o grão à secção.
*
* `.grao` só declara `isolation: isolate`. O grão vive num `::after` com
* `inset: 0`, e um absoluto sem antepassado posicionado agarra-se ao bloco de
* contenção inicial, não ao elemento que o declara. Medido nesta secção, a
* 360px de largura: COM `relative` o grão pinta 360×577 — a secção; SEM ele,
* 360×760 — o ecrã inteiro, por cima de tudo o que estiver lá.
* No herói o contexto vinha de graça, do `position: sticky` do palco. Aqui não
* vem de lado nenhum, e o defeito só se vê a olhar para as duas regras juntas. */
.nome {
position: relative;
padding: clamp(56px, 7vw, 104px) clamp(20px, 4vw, 64px);
/* O chão, para quando a malha não pintar (imagens desligadas, motor velho):
* o texto claro continua a assentar em azul escuro, e não em branco. */
background-color: var(--azul-moco);
}
/* O VÉU, e porque tem de existir.
*
* A aurora crua não aguenta um parágrafo. O terceiro radial da malha — o
* núcleo creme, centrado a 60% 20% — assenta exactamente onde o título fica, e
* levanta o fundo até rgb(122,144,162). Medido no pior ponto de cada bloco,
* sem véu: título 2,83:1 e corpo 2,85:1 num telemóvel de 390px; rótulo 3,21:1;
* assinatura 3,18:1 e risco do botão 2,37:1 a 1440px. O mínimo da casa é
* 4,5:1 — e o título não cumpria sequer os 3:1 do texto grande.
*
* Um véu chapado de --escuro a 34% desce a malha inteira sem lhe tocar na
* forma: continua a ver-se o creme quente, o azul-2 e a aresta fria, uma
* oitava abaixo. Medido depois, no pior ponto, a 360 / 390 / 768 / 1440:
* rótulo 4,88:1 · título 5,23:1 · corpo 4,89:1 · ênfase 6,59:1 ·
* assinatura 6,07:1 · medida 5,07:1 · risco do botão 3,05:1. */
.nome::before {
content: ''; position: absolute; inset: 0;
background: rgba(11, 17, 25, .34); /* --escuro; o alfa não passa por var() */
pointer-events: none;
}
/* O conteúdo passa à frente do véu E do grão. No herói o grão passa por cima
* das letras, e lá aceita-se: as legendas são curtas e vivem sobre a parte
* escura da malha. Aqui há um parágrafo inteiro para ler, e ruído em
* soft-light sobre 15px come contraste que já está todo contado. */
.nome-corpo { position: relative; z-index: 1; max-inline-size: 820px; }
/* O protótipo escreve .08em em todos os rótulos da landing — 15 ocorrências,
* nenhuma a .12em. O `.rot` global está a .12em; ver a nota da entrega. */
.nome .rot { color: rgba(232, 221, 200, .82); letter-spacing: .08em; }
.nome-titulo {
font-size: clamp(28px, 3.6vw, 52px); line-height: 1.1;
color: var(--escuro-texto); margin-block-start: 16px;
}
.nome-texto {
font-size: clamp(15px, 1.5vw, 20px); line-height: 1.55;
color: rgba(242, 245, 248, .88); /* --escuro-texto, a 88% */
margin-block-start: 18px;
text-wrap: pretty; /* progressivo: onde não houver, quebra como sempre */
}
/* O protótipo põe `moco` e `sense` em itálico. A casa serve três ficheiros de
* tipo e nenhum é itálico — o navegador inclinaria o romano à força, e um
* falso itálico numa palavra que É a marca lê-se como defeito, não como
* ênfase. A ênfase passa a ser de cor e de peso: creme, 500. O `` fica,
* que é o que o leitor de ecrã anuncia. */
.nome-texto em { font-style: normal; font-weight: 500; color: var(--creme-moco); }
.nome-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 32px; }
/* 52px de altura e 26px de folga, e não os 44px/18px da barra fixa: aqui o
* botão é o fim da página, não um acessório do cabeçalho. Continua muito acima
* do mínimo de 44px de alvo de toque. */
.nome-botoes .pil { min-block-size: 52px; padding: 0 26px; font-size: 15px; }
.nome-botoes .pil-linha { border-color: rgba(232, 221, 200, .5); }
/* O foco âmbar da casa foi desenhado para superfície clara. Sobre esta, âmbar
* contra o fundo dá 1,94:1 a 1440px e 2,10:1 a 360px — invisível, e o mínimo
* para um indicador de foco é 3:1. O âmbar fica (é a cor do foco em toda a
* casa) e ganha um halo creme que o rodeia por dentro e por fora: o contorno
* pinta por cima da sombra, portanto sobra creme dos dois lados da linha.
* Âmbar contra creme 3,73:1; creme contra a aurora velada 7,26:1 a 7,83:1.
* Os dois limites cumpridos sem trocar a cor do foco. */
.nome :focus-visible {
outline: 2px solid var(--ambar); outline-offset: 3px;
box-shadow: 0 0 0 7px rgba(232, 221, 200, .92);
}
.nome-rodape { margin-block-start: 28px; display: grid; gap: 6px; }
.nome-assinatura { font-size: 13px; color: rgba(242, 245, 248, .78); }
/* Uma data não parte ao meio. Sem isto, a 390px sai «21-08-» numa linha e
* «2026» na seguinte — e uma data partida deixa de ser uma data. */
.nome-assinatura time { white-space: nowrap; }
.nome-medida { font-size: 13px; color: var(--escuro-secundario); }
/* Se a medida não chegou, a linha desaparece em vez de ficar um vazio mudo com
* altura. Quem tem de explicar a falta é a secção do acervo, que a leu. */
.nome-medida:empty { display: none; }
/* «Os planos» e «Como funciona» são a terceira e a quarta pastilha da barra,
* e a barra não quebra de linha: abaixo de 900px saem as duas. O caminho
* para os degraus continua na faixa de um sistema; «Como funciona» continua
* no primeiro ecrã, ao lado da frase de apoio. */
@media (max-width: 899px) { .topo-planos, .topo-como { display: none; } }
/* ═══════════════════════════════════════════════════════════════════════
* A LANDING DE 12-09-2026 — a prateleira de portas. Prefixo `lp2-`.
*
* O primeiro ecrã já não é uma coreografia: é o título, a linha dos
* sectores e o topo da prateleira, com duas portas acima da dobra num
* telemóvel de 390px. Cada porta é um sector com UM número lido ao vivo e
* a data ao lado; nada aqui está escrito à mão. Os tokens vêm de ds/*.css,
* que o sense.html carrega antes desta folha; as variáveis do topo desta
* folha ficam intactas porque o painel também a lê.
* ═══════════════════════════════════════════════════════════════════════ */
.lp2-dentro { max-inline-size: var(--largura-max, 1180px); margin-inline: auto; }
/* O `a:hover` de ds/cores.css pinta qualquer ligação de âmbar. Numa pastilha
* isso apagava o texto (creme→âmbar sobre a aurora dá 1,9:1); fica dito aqui
* que cor cada pastilha mantém ao passar o rato. */
.topo .pil-linha:hover { color: var(--azul-moco); }
.topo .pil-cheia:hover { color: var(--creme-moco); }
.nome .pil-linha:hover { color: var(--creme-moco); }
.nome .pil-cheia:hover, .lp2-faixa .pil-cheia:hover { color: var(--azul-moco); }
/* ── 1 · o primeiro ecrã ─────────────────────────────────────────────── */
.lp2-abertura {
background: var(--fundo);
/* os 72px da barra fixa, mais o ar de cima */
padding: calc(72px + clamp(20px, 5vh, 56px)) clamp(16px, 4vw, 64px) clamp(14px, 3vh, 28px);
}
.lp2-abertura h1 {
font-size: clamp(30px, 5vw, 60px); line-height: 1.04;
color: var(--azul-moco); max-inline-size: 18ch; text-wrap: balance; /* 11,12:1 */
}
.lp2-linha {
margin-block-start: 14px;
font-size: clamp(15px, 1.5vw, 19px); line-height: 1.5;
color: var(--tinta); max-inline-size: 62ch; text-wrap: pretty;
}
.lp2-apoio {
margin-block-start: 10px;
display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px;
font-family: var(--fonte-display); font-weight: 600; letter-spacing: -.01em;
font-size: clamp(14px, 1.3vw, 18px); color: var(--secundario);
}
.lp2-como {
font-family: var(--fonte-texto); font-weight: 500; font-size: 14px;
color: var(--azul-moco); text-decoration: underline; text-underline-offset: 3px;
padding-block: 6px;
}
/* ── 2 · a prateleira ─────────────────────────────────────────────────── */
.lp2-prateleira { background: var(--fundo); padding: 0 clamp(16px, 4vw, 64px) clamp(40px, 6vh, 72px); }
.lp2-prateleira-titulo, .lp2-fila-rotulo {
font-family: var(--fonte-texto); font-weight: 500; font-size: 11px;
text-transform: uppercase; letter-spacing: .12em; color: var(--secundario);
margin: 0 0 10px;
}
.lp2-fila-rotulo { margin-block-start: 22px; }
.lp2-portas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.lp2-portas > li { min-inline-size: 0; }
@media (min-width: 640px) { .lp2-portas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1080px) {
.lp2-portas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp2-portas--lidas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* A porta. No telemóvel é uma linha de duas colunas — o nome e a cadência à
* esquerda, o número e a data à direita — para caberem duas acima da dobra.
* A partir de 640px empilha, como o cartão de menu que o design especificou. */
.lp2-porta {
display: grid; gap: 3px 14px; align-items: start; align-content: start;
grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
grid-template-areas: "nome vivo" "quem vivo" "cad vivo" "abre vivo";
/* a folga vai toda para a última fila: a coluna da esquerda fica encostada
* ao topo mesmo quando a da direita é mais alta */
grid-template-rows: auto auto auto 1fr;
min-block-size: 44px; block-size: 100%;
padding: 14px 16px; border-radius: 20px;
background: var(--cartao); color: var(--tinta); text-decoration: none;
box-shadow: var(--cartao-sombra, 0 1px 2px rgba(11,17,25,.04), 0 16px 32px rgba(11,17,25,.09));
transition: transform var(--transicao, 150ms ease-out), box-shadow var(--transicao, 150ms ease-out);
}
a.lp2-porta:hover { color: var(--tinta); transform: translateY(-2px); }
@media (min-width: 640px) {
.lp2-porta {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "nome" "quem" "vivo" "cad" "abre";
grid-template-rows: auto auto auto auto 1fr;
gap: 6px; padding: 20px; border-radius: var(--raio-cartao, 32px);
}
/* numa fila de quatro, o «Abrir…» alinha em baixo em todas as portas */
.lp2-porta-abre { align-self: end; }
}
.lp2-porta-nome {
grid-area: nome; font-family: var(--fonte-display); font-weight: 700;
font-size: clamp(17px, 1.6vw, 21px); line-height: 1.15; letter-spacing: -.02em;
color: var(--azul-moco);
}
/* A linha do «para quem» só cabe a partir de 640px; no telemóvel a dobra
* manda, e a dobra quer duas portas. */
.lp2-porta-quem { grid-area: quem; display: none; font-size: 12px; line-height: 1.4; color: var(--secundario); }
@media (min-width: 640px) { .lp2-porta-quem { display: block; } }
.lp2-porta-vivo {
grid-area: vivo; display: flex; flex-direction: column; gap: 2px;
align-items: flex-end; text-align: end; min-inline-size: 0;
}
@media (min-width: 640px) { .lp2-porta-vivo { align-items: flex-start; text-align: start; margin-block: 6px 2px; } }
.lp2-valor {
display: inline-flex; align-items: baseline; gap: 0; white-space: nowrap;
font-family: var(--fonte-display); font-weight: 700; letter-spacing: -.03em;
font-variant-numeric: tabular-nums; color: var(--azul-moco);
font-size: clamp(26px, 2.6vw, 38px); line-height: 1;
}
.lp2-cauda { font-size: .55em; font-weight: 600; letter-spacing: -.01em; }
.lp2-un { font-size: .4em; font-weight: 500; letter-spacing: 0; color: var(--secundario); margin-inline-start: .2em; }
.lp2-data, .lp2-nota { font-size: 12px; line-height: 1.35; color: var(--secundario); font-variant-numeric: tabular-nums; }
/* uma data não parte ao meio */
.lp2-quando { white-space: nowrap; }
.lp2-porta-cadencia { grid-area: cad; font-size: 12px; line-height: 1.4; color: var(--tinta); font-variant-numeric: tabular-nums; }
.lp2-porta-abre { grid-area: abre; margin-block-start: 4px; font-size: 13px; font-weight: 500; color: var(--azul-moco); }
.lp2-porta-abre::after { content: ' →'; }
a.lp2-porta:hover .lp2-porta-abre { color: var(--ambar); } /* 4,93:1 sobre o cartão */
/* A segunda fila: o que está a ser lido. O mesmo tipo, superfície lisa, o
* motivo em texto secundário — nunca em âmbar. Não é uma ligação: o que abre
* é a pequena «Ver as fontes». */
.lp2-porta--lida {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "nome" "motivo" "fontes";
grid-template-rows: auto auto 1fr;
background: var(--superficie); box-shadow: none; border: 1px solid var(--linha);
}
.lp2-porta-motivo { grid-area: motivo; font-size: 13px; line-height: 1.45; color: var(--secundario); }
.lp2-porta-fontes {
grid-area: fontes; justify-self: start; margin-block-start: 4px; padding-block: 6px;
font-size: 13px; font-weight: 500; color: var(--azul-moco);
text-decoration: underline; text-underline-offset: 3px;
}
.lp2-procurar { margin-block-start: 22px; font-size: 15px; color: var(--tinta); }
.lp2-procurar a { color: var(--azul-moco); font-weight: 500; text-underline-offset: 3px; }
/* A porta que não é um sector: uma encomenda. Vai no fim, em creme, com o
* rótulo diferente — para ninguém a ler como mais um painel. Em creme só
* entram as tintas que lá passam: o azul da marca (8,27:1) e o #4C5561
* (5,62:1); o --secundario da folha de tokens reprova em creme. */
.lp2-porta--relatorio {
margin-block-start: 14px;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "rotulo" "nome" "motivo" "abre";
grid-template-rows: auto auto auto 1fr;
background: var(--creme-moco); box-shadow: none; color: var(--azul-moco);
}
.lp2-porta--relatorio .lp2-porta-motivo { color: var(--azul-moco); font-size: 14px; }
.lp2-porta-rotulo { grid-area: rotulo; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: #4C5561; }
.lp2-porta--relatorio:hover .lp2-porta-abre { color: var(--azul-moco); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) {
.lp2-porta--relatorio {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "rotulo rotulo" "nome abre" "motivo abre";
grid-template-rows: auto auto auto;
align-items: center; column-gap: 24px;
}
.lp2-porta--relatorio .lp2-porta-abre { align-self: center; margin: 0; }
}
/* ── 3 · a faixa de um sistema ────────────────────────────────────────── */
.lp2-faixa { background: var(--escuro); padding: clamp(40px, 6vh, 72px) clamp(16px, 4vw, 64px); }
.lp2-faixa .lp2-dentro { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.lp2-faixa-texto {
flex: 1 1 420px; max-inline-size: 64ch;
font-size: clamp(16px, 1.6vw, 21px); line-height: 1.5; color: var(--escuro-texto); text-wrap: pretty;
}
.lp2-faixa .pil { min-block-size: 52px; padding-inline: 24px; font-size: 15px; }
/* ── 4 · a espera e o vazio, iguais em toda a página ──────────────────── */
/* A trama da casa enquanto o número não chega: nunca um zero, nunca um valor
* provisório no lugar do final. */
.lp2-espera { display: block; inline-size: 100%; min-inline-size: 96px; block-size: 34px; border-radius: var(--raio-dados, 6px); }
.lp2-porta-vivo .lp2-espera { max-inline-size: 150px; }
#acervo2-espera { block-size: 64px; max-inline-size: 1180px; margin-inline: auto; }
.lp2-vazio { display: grid; gap: 3px; }
.lp2-vazio-estado { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--media); }
.lp2-vazio-motivo, .lp2-aviso { font-size: 12.5px; line-height: 1.45; color: var(--secundario); }
/* ── 6 · as contas que ninguém publica ────────────────────────────────── */
.lp2-contas { background: var(--superficie); padding: clamp(56px, 7vw, 104px) clamp(16px, 4vw, 64px); }
.lp2-contas h2 {
color: var(--azul-moco); font-size: clamp(28px, 3.6vw, 52px); line-height: 1.1;
margin-block-start: 16px; max-inline-size: 24ch; text-wrap: pretty;
}
.lp2-contas-grelha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-block-start: 36px; }
@media (min-width: 900px) { .lp2-contas-grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp2-conta {
display: flex; flex-direction: column; gap: 12px; min-inline-size: 0;
background: var(--cartao); border-radius: var(--raio-cartao, 32px);
padding: clamp(22px, 2.4vw, 32px);
box-shadow: var(--cartao-sombra, 0 1px 2px rgba(11,17,25,.04), 0 16px 32px rgba(11,17,25,.09));
}
.lp2-conta-rot {
margin: 0; font-family: var(--fonte-texto); font-weight: 500; font-size: 11px;
text-transform: uppercase; letter-spacing: .08em; color: var(--secundario);
}
.lp2-conta-corpo { display: flex; flex-direction: column; gap: 10px; }
.lp2-conta .lp2-espera { block-size: 110px; }
.lp2-conta .lp2-valor { font-size: clamp(44px, 5vw, 72px); white-space: normal; flex-wrap: wrap; }
.lp2-conta-frase { font-size: 15px; line-height: 1.55; color: var(--tinta); text-wrap: pretty; }
.lp2-conta-frase b { font-family: var(--fonte-display); font-weight: 700; color: var(--azul-moco); font-variant-numeric: tabular-nums; }
.lp2-conta-prova { font-size: 12px; line-height: 1.45; color: var(--secundario); font-variant-numeric: tabular-nums; }
.lp2-conta-porta {
margin-block-start: auto; align-self: flex-start;
display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 18px;
border-radius: 999px; border: 1px solid rgba(23,61,100,.7);
font-size: 14px; font-weight: 500; color: var(--azul-moco); text-decoration: none;
}
.lp2-conta-porta:hover { color: var(--ambar); border-color: var(--ambar); }
/* ── 7 · o rodapé: o direito de resposta ──────────────────────────────── */
.nome-direito { margin-block-end: 6px; font-size: 14px; line-height: 1.5; color: rgba(242, 245, 248, .88); }
.nome-direito a { color: var(--creme-moco); text-underline-offset: 3px; }
.nome-direito a:hover { color: #FFFFFF; }