*/
}
.case-nav-title::-webkit-details-marker { display: none; }
.case-nav-seta,
.case-nav-atual { display: none; }
.case-nav ol {
margin: 0;
padding: 0;
list-style: none;
border-left: 1px solid var(--line);
}
.case-nav a {
display: block;
padding: 9px 0 9px 16px;
margin-left: -1px;
border-left: 1px solid transparent;
font-size: 0.9rem;
line-height: 1.3;
color: var(--ink-soft);
transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.case-nav a:hover { color: var(--ink); }
.case-nav a[aria-current="true"] {
color: var(--destaque);
border-left-color: var(--destaque);
font-weight: 500;
}
.case-content { max-width: 74ch; }
.case-section + .case-section { margin-top: clamp(48px, 8vh, 88px); }
.case-h2 {
margin: 0 0 clamp(16px, 2.4vh, 22px);
font-size: clamp(1.5rem, 2.3vw, 2rem);
font-weight: 500;
letter-spacing: -0.04em;
line-height: 1.05;
font-variation-settings: "opsz" 28;
}
.case-h3 {
margin: clamp(28px, 4vh, 40px) 0 10px;
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
font-weight: 500;
letter-spacing: -0.02em;
}
.case-p {
margin: 0 0 16px;
font-size: 1rem;
line-height: 1.65;
color: var(--ink-soft);
}
.case-p b { font-weight: 500; color: var(--ink); }
.case-p:last-child { margin-bottom: 0; }
.case-ul {
margin: 0 0 16px;
padding: 0;
list-style: none;
}
.case-ul li {
position: relative;
padding-left: 22px;
margin-bottom: 10px;
font-size: 1rem;
line-height: 1.6;
color: var(--ink-soft);
}
.case-ul li::before {
content: "";
position: absolute;
left: 2px;
top: 0.62em;
width: 6px;
height: 1px;
background: var(--muted);
}
.case-ul b { font-weight: 500; color: var(--ink); }
/* citação de achado de pesquisa */
.finding {
margin: clamp(22px, 3.4vh, 30px) 0;
padding: clamp(20px, 3vw, 28px);
border-radius: 4px;
background: var(--surface);
}
.finding-n {
display: block;
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
font-weight: 500;
letter-spacing: -0.045em;
line-height: 1;
font-variation-settings: "opsz" 28;
margin-bottom: 8px;
}
.finding p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); }
.case-fig { margin: clamp(26px, 4vh, 40px) 0; }
.case-fig img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
border: 1px solid var(--line);
background: var(--surface);
}
.case-fig figcaption {
margin-top: 10px;
font-size: 0.85rem;
color: var(--ink-soft);
}
/* vídeo de tela: mesma moldura das imagens de figura.
O fundo claro fixo vem do próprio material — a peça foi exportada
sobre branco, e trocá-lo por --surface criaria uma borda visível
entre o vídeo e a caixa no tema escuro. */
.case-fig video {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
border: 1px solid var(--line);
background: #fff;
}
.case-fig video[controls] { background: var(--surface); }
/* telas: peças de celular lado a lado. O auto-fit é só o padrão de quem
não declara nada — na prática todo bloco desta página fixa as colunas
com .telas-altura, porque a contagem e a proporção delas são decisões
do conteúdo, não do espaço que sobrou. */
.telas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: clamp(16px, 2vw, 30px);
margin: clamp(26px, 4vh, 40px) 0;
align-items: start;
}
/* ============ galeria dentro de um projeto ============
Telas de desktop não cabem lado a lado: em 1366 de largura, duas numa
coluna de texto dão 300px cada e a interface some. A galeria mostra
UMA por vez, no tamanho em que dá para ler, e as outras ficam a um
clique — sem empurrar meia página de rolagem para baixo.
Ela reusa os controles do carrossel da home (.carousel-btn e
.carousel-dot): é o mesmo gesto, e um segundo desenho de seta só
daria ao leitor duas coisas para aprender no lugar de uma. */
.galeria { margin: clamp(26px, 4vh, 40px) 0; }
.galeria-head {
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 14px;
}
.car-track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
gap: clamp(16px, 2vw, 30px);
margin: 0;
padding: 0;
list-style: none;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.car-track::-webkit-scrollbar { display: none; }
.car-track:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 4px; }
.car-slide { scroll-snap-align: start; min-width: 0; }
.galeria .case-fig { margin: 0; }
/* A proporção vem travada da própria imagem (1366x768). Sem isso, a
trilha muda de altura a cada slide que entra, e os controles pulam
sob o dedo de quem está avançando. */
.galeria .case-fig img { aspect-ratio: 1366 / 768; object-fit: contain; }
.galeria .carousel-dots { justify-content: center; }
.telas .case-fig { margin: 0; }
/* a peça já vem com a moldura do aparelho desenhada: uma borda por cima
seria uma segunda moldura em volta da primeira */
.telas .case-fig video {
border: 0;
border-radius: 0;
background: none;
}
/* …mas só quando ela traz. Uma simulação gravada em fundo branco não
tem aparelho nenhum, e sem borda ela não tem onde terminar contra o
papel: o vídeo vira um retângulo branco invisível no tema claro. Aqui
a moldura volta, igual à que a imagem ao lado já tem — as duas peças
da mesma linha precisam terminar do mesmo jeito. */
.telas-moldura .case-fig video {
border: 1px solid var(--line);
border-radius: 4px;
background: var(--surface);
}
/* --- duas peças de proporções diferentes, terminando na mesma altura ---
Colunas iguais dariam alturas diferentes: uma peça quase quadrada e uma
vertical, na mesma largura, param em linhas distintas e a dupla deixa de
ler como um par.
Cortar ou deixar barra preta resolveria a altura estragando a peça. O
que a resolve de graça é a largura: com as colunas na razão das próprias
proporções, as duas alturas caem no mesmo número sem cortar um pixel.
Cada bloco declara as duas larguras em --colunas, em fr, usando a
proporção de cada arquivo (largura dividida pela altura). */
.telas-altura {
/* A linha inteira vem por variável, e não montada com calc(): fr não
é permitido dentro de calc(), e a declaração cairia por inteiro —
em silêncio, deixando as duas peças numa coluna só. */
grid-template-columns: var(--colunas);
align-items: start;
}
@media (max-width: 520px) {
/* empilhado, proporção de coluna não quer dizer nada */
.telas-altura { grid-template-columns: 1fr; }
}
.shots {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: clamp(12px, 1.6vw, 20px);
margin: clamp(26px, 4vh, 40px) 0;
}
.shots img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
border: 1px solid var(--line);
background: var(--surface);
}
.stack {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 22px clamp(20px, 3vw, 40px);
margin: 0;
}
.stack dt {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 8px;
}
.stack dd { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink); }
/* navegação entre cases */
.case-next {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 12px 32px;
margin-top: clamp(48px, 8vh, 88px);
padding-top: clamp(24px, 3.6vh, 34px);
border-top: 1px solid var(--line);
}
.case-next-link {
font-size: clamp(1.4rem, 2.4vw, 2rem);
font-weight: 500;
letter-spacing: -0.04em;
font-variation-settings: "opsz" 28;
transition: transform 0.5s var(--ease);
display: inline-flex;
align-items: center;
gap: 12px;
}
.case-next-link svg { width: 20px; height: 20px; transition: transform 0.45s var(--ease); }
.case-next-link:hover svg { transform: translate(4px, -4px); }
@media (max-width: 1000px) {
.case-body { grid-template-columns: 1fr; }
.case-nav { position: static; }
/* Fora do desktop o menu vira dropdown. A lista tinha nove itens
embrulhados em quatro linhas, empurrando o texto do case para bem
abaixo da dobra — o índice ocupava mais tela que o conteúdo que ele
indexa. Fechado, ele cabe em uma linha e diz em que seção você está. */
.case-nav-drop {
border: 1px solid var(--line);
border-radius: 8px;
background: var(--paper);
}
.case-nav-drop > ol { display: none; }
.case-nav-drop[open] > ol {
display: block;
border-left: 0;
border-top: 1px solid var(--line);
padding: 4px 0;
}
.case-nav-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 0;
padding: 12px 14px;
cursor: pointer;
/* O alvo de toque tem 44px de altura contando o recuo: abaixo disso o
dedo erra, e este é o controle que abre a navegação inteira. */
min-block-size: 44px;
box-sizing: border-box;
}
.case-nav-title:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* "Neste projeto" nunca quebra: é ele que explica o controle, e uma
altura que muda conforme o nome da seção faz a barra pular enquanto a
pessoa rola. Quem cede espaço é o nome da seção, com reticências. */
.case-nav-title > span:not(.case-nav-atual) {
flex: none;
white-space: nowrap;
}
.case-nav-atual {
display: block;
flex: 1 1 auto;
text-align: end;
color: var(--ink);
font-weight: 500;
/* O rótulo herdaria o caixa-alta espaçado de .u-label, e "Relatórios e
navegação" não caberia em 375px. Aqui ele volta ao texto normal: é
um valor que muda, não um rótulo fixo, e a diferença de tratamento
separa os dois à primeira vista. */
text-transform: none;
letter-spacing: normal;
font-size: 0.9rem;
/* O nome da seção cede primeiro: o rótulo "Neste projeto" é curto e
fixo, e é ele que dá sentido ao controle. */
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.case-nav-seta {
display: block;
flex: none;
inline-size: 16px;
block-size: 16px;
color: var(--muted);
transition: transform 0.3s var(--ease-controle);
}
.case-nav-drop[open] .case-nav-seta { transform: rotate(180deg); }
.case-nav a { padding: 10px 14px; border-left: 0; }
.case-nav a[aria-current="true"] { border-left: 0; background: var(--surface); }
.case-content { max-width: none; }
}
/* screenshot vertical de celular não deve ocupar a coluna inteira */
/* ============ ajustes de leitura e destaque ============ */
/* texto de corpo em tinta cheia; o destaque vem do peso, não da cor */
.case-p,
.case-ul li,
.case-tldr,
.hero-desc,
.about-text,
.exp-desc,
.stat-label,
.contact-lead {
color: var(--ink);
}
.case-p b,
.case-ul b,
.case-tldr b,
.hero-desc b,
.about-text b,
.exp-desc b {
font-weight: 700;
color: var(--ink);
}
/* big numbers com mais peso (ref. anexo 1) */
.case-kpi dd,
.exp-metrics dd,
.finding-n,
.stat-n {
font-weight: 700;
letter-spacing: -0.06em;
font-variation-settings: "opsz" 40;
}
.case-kpi dd { font-size: clamp(2.6rem, 4.6vw, 4rem); }
.case-kpis { border-top-color: var(--rule-strong); }
.case-kpi dt { color: var(--ink); font-size: 0.95rem; }
/* bullets em esfera para a lista de atribuições */
.case-ul-role li { font-weight: 500; padding-left: 24px; }
.case-ul-role li::before {
content: "";
left: 3px;
top: 0.55em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ink);
}
/* ============ cards de estatística (ref. anexo 2) ============ */
:root {
--stat-line: #bfc3bd;
--rule-strong: #bfc3bd;
}
:root[data-theme="dark"] {
--stat-line: rgba(207, 210, 205, 0.28);
--rule-strong: rgba(207, 210, 205, 0.28);
}
/* Sem caixa: o número e o ícone se sustentam sozinhos, e o espaço em
branco faz a separação que a borda fazia. Como o respiro interno de
32px sumiu junto com o box, ele migra para o gap entre as colunas —
a distância entre dois números continua a mesma de antes. */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 36px 48px;
margin: clamp(28px, 4.4vh, 40px) 0;
}
.stat-card {
padding: 0;
background: none;
border: 0;
}
/* O trazia margin-bottom de 1em do navegador, que colapsava com os
14px do rótulo e virava um vão de 46px — proporcional à fonte, e por
isso diferente em cada grid. Zerado aqui, o respiro passa a ser um
valor só, declarado no rótulo. */
.stat-n {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-size: clamp(2rem, 3.4vw, 2.9rem);
line-height: 1;
}
/* Ícone de apoio (Lucide): atenção nos problemas, check nos resultados.
Menor e mais leve que o número — acompanha, não compete. */
.stat-n svg {
width: 0.52em;
height: 0.52em;
stroke-width: 2;
flex: none;
/* Cor fixa cinza dava ~2:1 no tema claro, fraco demais para ler.
Partir da tinta e baixar a opacidade mantém o ícone secundário sem
sumir, e acompanha a troca de tema sozinho. */
opacity: 0.6;
}
.stat-label {
margin: 22px 0 0;
font-size: 0.94rem;
line-height: 1.45;
}
@media (max-width: 620px) {
.stat-grid { grid-template-columns: 1fr; }
}
/* quatro resultados numa única faixa horizontal */
.stat-grid-4 { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.stat-grid-4 .stat-n { font-size: clamp(1.8rem, 2.8vw, 2.4rem); }
@media (max-width: 900px) {
.stat-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ============ documentação embutida ao vivo ============ */
.embed {
margin: clamp(24px, 4vh, 36px) 0;
border: 1px solid var(--stat-line);
border-radius: 10px;
overflow: hidden;
background: var(--surface);
}
.embed-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px clamp(12px, 2vw, 20px);
padding: 10px clamp(12px, 1.6vw, 16px);
border-bottom: 1px solid var(--stat-line);
}
.embed-title {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
margin-right: auto;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
}
.embed-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ink);
animation: pulse 2.6s var(--ease) infinite;
}
.embed-open {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 500;
color: var(--ink);
transition: opacity 0.3s var(--ease);
}
.embed-open svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease); }
.embed-open:hover svg { transform: translate(2px, -2px); }
.embed-frame {
display: block;
width: 100%;
height: clamp(520px, 72vh, 780px);
border: 0;
background: var(--paper);
}
.embed-note {
margin: 12px 0 0;
font-size: 0.85rem;
line-height: 1.5;
color: var(--ink-soft);
}
@media (max-width: 620px) {
.embed-title { width: 100%; margin-right: 0; }
.embed-frame { height: 480px; }
}
/* ============ menu em gaveta (abaixo de 900px) ============
Acima de 900px o cabeçalho já mostra idioma e tema direto; a gaveta só
existe onde não cabem. Os controles dentro dela são os mesmos elementos
do cabeçalho, movidos por JS — não há cópia para sair de sincronia. */
.menu-toggle {
position: relative;
display: none;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid var(--hairline);
border-radius: 50%;
color: var(--ink);
transition: border-color 0.3s var(--ease-controle);
}
.menu-toggle:hover { border-color: var(--ink); }
.menu-toggle svg {
position: absolute;
width: 18px;
height: 18px;
transition: opacity 0.25s var(--ease-controle), transform 0.35s var(--ease-controle);
}
.menu-toggle .i-close { opacity: 0; transform: rotate(-45deg); }
.menu-toggle[aria-expanded="true"] .i-menu { opacity: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .i-close { opacity: 1; transform: none; }
.menu-drawer {
position: fixed;
inset: 0 0 auto 0;
z-index: 39;
padding: calc(clamp(18px, 2.4vw, 30px) + 58px) var(--gutter) clamp(26px, 4vh, 38px);
background: var(--paper);
border-bottom: 1px solid var(--hairline);
/* Fechada por visibilidade, e não por `display: none`: uma caixa que sai
do fluxo não tem estado de onde animar. A visibilidade troca sem
duração, mas só DEPOIS dos 0.3s ao fechar — é o atraso que deixa a
saída ser vista antes de a gaveta sumir de fato. */
visibility: hidden;
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
transition: opacity 0.3s var(--ease-controle),
transform 0.3s var(--ease-controle),
visibility 0s linear 0.3s;
}
.menu-drawer[data-open] {
visibility: visible;
opacity: 1;
transform: none;
pointer-events: auto;
transition: opacity 0.3s var(--ease-controle),
transform 0.3s var(--ease-controle),
visibility 0s;
}
/* O fio vem em TODO grupo, e não só a partir do segundo. Sem o de cima, os
links começavam colados na marca enquanto os demais blocos tinham fio e
respiro — o primeiro grupo era o único sem moldura, e por isso o único
com espaçamento diferente. */
.menu-group {
margin-top: clamp(20px, 3vh, 28px);
padding-top: clamp(20px, 3vh, 28px);
border-top: 1px solid var(--hairline);
}
.menu-group-label {
display: block;
margin-bottom: 14px;
}
.menu-row {
display: flex;
align-items: center;
gap: 10px;
}
/* dentro da gaveta os controles ganham área de toque de verdade */
.menu-drawer .nav {
display: flex;
flex-direction: column;
align-items: flex-start;
/* A margem automática serve ao cabeçalho; aqui ela jogaria a lista
inteira contra a borda direita da gaveta. */
margin-inline-start: 0;
gap: 2px;
/* Caixa-alta como na barra, mas em corpo de alvo de toque. O
espaçamento cai para 0.08em: o valor da barra existe para segurar
maiúsculas de 12px, e repetido neste tamanho abriria demais. */
font-size: 1.05rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.menu-drawer .nav a { padding: 10px 0; color: var(--ink); }
.menu-drawer .langs { gap: 4px; }
.menu-drawer .lang {
padding: 10px 16px;
font-size: 14px;
border: 1px solid var(--line);
border-radius: 999px;
}
.menu-drawer .lang[aria-pressed="true"] {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.menu-drawer .lang-sep { display: none; }
.menu-drawer .theme-toggle:hover { transform: none; }
.menu-drawer .theme-label { font-size: 0.95rem; color: var(--ink); }
@media (max-width: 900px) {
.menu-toggle { display: grid; }
/* fora da gaveta eles somem; dentro dela reaparecem */
.header-tools > .langs,
.header-tools > .theme-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.menu-toggle svg { transition: none; }
/* A gaveta aparece e some sem deslizar. O `visibility` fica sem atraso
nos dois sentidos: sem a saída para acompanhar, o atraso só faria a
gaveta demorar a sumir. */
.menu-drawer,
.menu-drawer[data-open] {
transform: none;
transition: visibility 0s;
}
}
/* ============ ampliar mídia ============
Imagem e vídeo, em qualquer ponteiro. A moldura existe para o botão
ter um pai posicionado que não englobe a legenda da figura. */
.case-fig-media { position: relative; display: block; }
.shots .case-fig-media { min-width: 0; }
.zoom-btn {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 2;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--paper);
border: 1px solid var(--line);
color: var(--ink);
box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.5);
transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.zoom-btn svg { width: 17px; height: 17px; }
.zoom-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Desktop: quadro centrado sobre um blanket escuro. O diálogo não tem
fundo próprio — quem pinta é a mídia, para a moldura não sobrar
ao redor de um vídeo mais estreito que o máximo. */
.lightbox {
width: auto;
max-width: min(1400px, 94vw);
max-height: 82dvh;
margin: auto;
padding: 0;
border: 0;
background: none;
color: var(--ink);
overflow: visible;
}
.lightbox::backdrop {
background: rgba(0, 0, 0, 0.74);
backdrop-filter: blur(6px);
}
.lightbox-fechar {
position: absolute;
top: -54px;
right: 0;
z-index: 2;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--paper);
border: 1px solid var(--line);
color: var(--ink);
transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.lightbox-fechar:hover { background: var(--ink); color: var(--paper); }
.lightbox-fechar svg { width: 19px; height: 19px; }
/* "safe center" para a peça mais alta que o quadro não ter o topo
cortado: centrada enquanto cabe, alinhada ao início quando transborda */
.lightbox-palco {
display: grid;
place-content: safe center;
max-height: 82dvh;
overflow: auto;
overscroll-behavior: contain;
}
.lightbox-palco img,
.lightbox-palco video {
display: block;
width: auto;
max-width: 100%;
height: auto;
border-radius: 8px;
background: var(--paper);
}
/* a imagem alta rola dentro do quadro em vez de encolher para caber —
limitar a altura faria o "ver maior" devolver algo menor que a página */
.lightbox-palco video { max-height: 82dvh; background: #000; }
.lightbox-dica {
position: absolute;
left: 0;
right: 0;
bottom: 14px;
text-align: center;
pointer-events: none;
}
/* Toque: a tela inteira é o quadro, e a peça larga enche a altura e
rola na horizontal — senão o "maior" repetiria o tamanho da página. */
@media (hover: none) {
.project-thumb img,
.case-card-thumb img { filter: none; transform: none; }
.lightbox {
width: 100vw;
max-width: 100vw;
height: 100dvh;
max-height: 100dvh;
margin: 0;
background: var(--paper);
overflow: hidden;
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: none; }
.lightbox-fechar { top: 12px; right: 12px; }
.lightbox-palco {
width: 100%;
height: 100%;
overflow: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.lightbox-palco img {
display: block;
height: 100%;
width: auto;
max-width: none;
max-height: none;
border-radius: 0;
}
.lightbox-palco video {
width: 100%;
height: auto;
max-height: 100%;
border-radius: 0;
}
}
/* ============ 404 ============ */
/* A página de erro pega emprestado o ritmo do hero, mas em escala menor:
ela é um desvio no caminho, e não a chegada — anunciá-la com o mesmo
tamanho de tipo do título da home daria a ela um peso que não tem. */
.erro {
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 var(--gutter);
}
.erro-titulo {
margin: 12px 0 0;
font-size: clamp(2rem, 5.2vw, 4.2rem);
line-height: 1.02;
letter-spacing: -0.035em;
font-variation-settings: "opsz" 40;
}
/* Os botoes do hero vem centrados, porque la a coluna inteira e
centrada. Aqui o texto e alinhado a esquerda, e uma acao centrada
embaixo de um paragrafo a esquerda parece solta do que a motivou. */
.erro .hero-actions { justify-content: flex-start; }
.erro-texto {
margin: clamp(16px, 2.4vh, 24px) 0 0;
max-width: 52ch;
font-size: clamp(0.98rem, 1.15vw, 1.15rem);
line-height: 1.6;
color: var(--ink-soft);
}