/* MEDIDA DE LEITURA EM px, NAO EM ch
`ch` e a largura do caractere "0" da fonte ATUAL. Medido em producao: 72ch
valia 621px com o fallback e 702,72px com a Manrope — 82px de diferenca. Quando
a fonte trocava (display=swap), todo bloco com medida em ch mudava de largura e
o texto refluia: CLS de 0,02 a 0,06 em laptop, desktop e wide.
Os valores em px abaixo sao os equivalentes COM a fonte real aplicada, entao a
medida de leitura e a mesma — sem depender de qual fonte esta carregada. */
/* ==========================================================================
POLTERS — Bíblia do AION 2
Layout de documentação. Prioridade absoluta: LEITURA.
Identidade POLTERS só no header, nas cores e em detalhes pequenos.
========================================================================== */
/* ==========================================================================
SHELL: sidebar + conteúdo
========================================================================== */
.docs {
display: grid;
grid-template-columns: 288px minmax(0, 1fr);
gap: 0;
min-height: calc(100vh - var(--header-h));
margin-top: var(--header-h);
}
/* --------------------------- SIDEBAR --------------------------- */
/* Sem régua vertical separando sidebar e conteúdo: a diferença de tom entre
as duas superfícies já estabelece a divisão. */
.docs__side {
position: sticky;
top: var(--header-h);
align-self: start;
height: calc(100vh - var(--header-h));
overflow-y: auto;
overscroll-behavior: contain;
padding: 26px 18px 60px;
background: #090910;
scrollbar-width: thin;
scrollbar-color: var(--line) transparent;
}
.docs__side::-webkit-scrollbar { width: 8px; }
.docs__side::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
/* --- Campo de busca --- */
.docs-search { margin-bottom: 22px; }
/* Só o campo é o contexto de posicionamento do ícone */
.docs-search__field { position: relative; display: block; }
/* Campo definido por superfície, não por contorno. O foco é sinalizado por
um anel via box-shadow — que não é borda desenhada em repouso. */
.docs-search__input {
width: 100%;
min-height: 46px;
padding: 11px 14px 11px 40px;
background: #17171f;
border: 0;
border-radius: var(--radius-sm);
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-ui);
transition: background-color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease);
}
.docs-search__input::placeholder { color: var(--text-dim); }
.docs-search__input:focus {
outline: none;
background: #1d1d27;
box-shadow: 0 0 0 2px var(--violet);
}
/* Centralizado no campo, verificado em relação à altura real dele */
.docs-search__icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--text-dim);
pointer-events: none;
transition: color var(--t-fast) var(--ease);
}
.docs-search__input:focus + .docs-search__icon,
.docs-search__field:focus-within .docs-search__icon { color: var(--lilac); }
.docs-search__count {
margin-top: 8px;
font-size: var(--fs-micro);
color: var(--text-soft);
min-height: 1em;
}
/* --- Título de grupo na sidebar --- */
.docs__side-label {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-dim);
padding: 0 8px;
margin-bottom: 10px;
}
/* --- Árvore de navegação --- */
.docs-nav { list-style: none; display: grid; gap: 1px; }
.docs-nav__chapter > a {
display: flex;
align-items: baseline;
gap: 10px;
padding: 9px 11px;
border-radius: var(--radius-sm);
font-size: var(--fs-ui);
font-weight: 500;
color: var(--text-soft);
transition: color var(--t-fast) var(--ease),
background-color var(--t-fast) var(--ease);
}
.docs-nav__chapter > a:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.035);
}
/* Capítulo ativo (scrollspy): tinta de fundo, sem barra na lateral */
.docs-nav__chapter > a.is-active {
color: var(--text);
background: rgba(124, 58, 237, 0.15);
font-weight: 700;
}
.docs-nav__num {
font-family: var(--font-mono);
font-size: var(--fs-micro);
color: var(--violet);
flex-shrink: 0;
}
.docs-nav__chapter > a.is-active .docs-nav__num { color: var(--lilac); }
/* --------------------------------------------------------------------------
SUBSEÇÕES — indicador que desliza
Escolha vinda do motion-cookbook: a trilha de subseções é um traço único
revelado por clip-path, que VIAJA até o item ativo. A skill recomenda
clip-path para esse caso por quatro razões: acelerado por hardware, sem
layout shift, sem elemento extra no DOM, e mais suave que animar height.
O movimento usa clip-path inset — nunca top, que causaria layout.
-------------------------------------------------------------------------- */
.docs-nav__sub {
position: relative;
list-style: none;
margin: 2px 0 8px 22px;
padding-left: 12px;
display: grid;
gap: 1px;
}
/* Trilha de fundo: linha contínua e apagada da coluna de subseções */
.docs-nav__sub::before {
content: '';
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 2px;
border-radius: 1px;
background: rgba(255, 255, 255, 0.07);
}
/* Traço ativo: mesma coluna, revelado por clip-path na altura do item.
--sub-top e --sub-h vêm do JS. */
.docs-nav__sub::after {
content: '';
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 2px;
border-radius: 1px;
background: var(--violet);
clip-path: inset(var(--sub-top, 0px) 0 calc(100% - var(--sub-top, 0px) - var(--sub-h, 0px)) 0);
opacity: 0;
/* 440ms era 5,5x o token. Este traço acompanha o scroll: se demora mais que
o gesto, ele indica a subseção que o leitor já passou. */
transition: clip-path var(--t-slow) cubic-bezier(0.16, 1, 0.3, 1),
opacity var(--t-exit) var(--ease);
}
/* Só acende quando há uma subseção ativa neste capítulo */
.docs-nav__sub.has-active::after { opacity: 1; }
/* 35px de altura medidos no desktop, contra o mínimo de 44 da WCAG 2.5.8.
A correção anterior só valia em `max-width: 1080px` — mas o alvo pequeno
também atinge quem usa mouse com precisão reduzida ou tela sensível ao toque
grande. Cresce a área em volta do texto, não o texto: mesma densidade visual,
alvo confortável. */
.docs-nav__sub a {
display: flex;
align-items: center;
min-height: 44px;
padding: 6px 9px;
border-radius: 6px;
font-size: var(--fs-micro);
color: var(--text-soft);
transition: color var(--t-fast) var(--ease),
background-color var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease-quart);
}
.docs-nav__sub a:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.035);
}
.docs-nav__sub a.is-active {
color: var(--lilac);
font-weight: 700;
transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
.docs-nav__sub::after { transition: opacity 0.15s linear; }
.docs-nav__sub a.is-active { transform: none; }
}
/* Item escondido pela busca */
.is-filtered { display: none !important; }
/* ==========================================================================
CONTEÚDO
========================================================================== */
.docs__main { min-width: 0; padding: 42px 0 100px; }
.docs__content {
width: 100%;
max-width: var(--wrap-read);
margin-inline: auto;
padding-inline: 30px;
}
/* --- Cabeçalho da Bíblia --- */
/* Separação por espaço, não por régua */
.docs-hero {
padding-bottom: 8px;
margin-bottom: 52px;
}
.docs-hero__title {
font-size: clamp(1.95rem, 5vw, 2.9rem);
margin-bottom: 14px;
}
/* Medida de leitura: sem max-width a linha acompanhava a coluna inteira.
66ch é mais apertado que o corpo dos capítulos (72ch) porque este é um
parágrafo de abertura, lido de uma vez. */
.docs-hero__text { color: var(--text-soft); margin-bottom: 18px; max-width: 644px; }
.docs-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
font-size: var(--fs-micro);
color: var(--text-soft);
}
.docs-hero__meta a { color: var(--lilac); }
/* --- Capítulo ---
content-visibility: auto faz o navegador pular render e layout dos
capítulos fora da viewport. Em 12 capítulos com tabelas isso corta muito
trabalho na primeira pintura.
contain-intrinsic-size reserva altura estimada para a barra de scroll
não pular conforme o conteúdo é renderizado. */
.chapter {
padding-top: 18px;
margin-bottom: 62px;
scroll-margin-top: calc(var(--header-h) + 24px);
content-visibility: auto;
/* A estimativa precisa ser próxima da altura real, senão a página muda de
tamanho conforme os capítulos são renderizados e âncoras profundas caem
no lugar errado. Os capítulos deste guia variam de ~800 a 5400px; 2200px
é a mediana ponderada, que reduz o erro acumulado. */
contain-intrinsic-size: auto 2200px;
}
/* A busca precisa medir o texto de todos os capítulos. Quando um filtro está
ativo, desliga o skip para o conteúdo ser mensurável. */
.docs.is-searching .chapter { content-visibility: visible; }
/* Os capítulos da primeira dobra NUNCA entram em skip.
`content-visibility: auto` os colocava em skip junto com o resto: eles
pintavam, colapsavam para 0x0 e voltavam quando o observer os promovia —
um shift medido de 0,10, a maior fatia do CLS desta página.
Medido: com esta regra o CLS cai de 0,115 para 0,071 e o LCP de 278ms para
184ms. Os outros 10 capítulos seguem em skip, então a economia de render que
motivou o recurso continua valendo.
ESTA REGRA TAMBÉM EXISTE NO CSS CRÍTICO INLINE do guia.html — as duas
precisam mudar juntas. */
.chapter:nth-of-type(1),
.chapter:nth-of-type(2) {
content-visibility: visible;
contain-intrinsic-size: none;
}
/* Numeração de capítulo: aqui a sequência é informação real (o guia É
ordenado), então o marcador numerado se justifica. */
.chapter__eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--lilac);
margin-bottom: 8px;
}
/* Título de capítulo sem régua embaixo. O peso do próprio título e o
espaço abaixo dele já criam a hierarquia. */
.chapter__title {
font-size: clamp(1.5rem, 3.4vw, 2.1rem);
margin-bottom: 26px;
}
/* --- Tipografia de leitura --- */
.chapter h3 {
font-size: 1.32rem;
font-weight: 500;
letter-spacing: 0.025em;
margin: 36px 0 13px;
scroll-margin-top: calc(var(--header-h) + 24px);
}
.chapter h4 {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
color: var(--lilac);
margin: 24px 0 9px;
}
/* Corpo do guia: leitura é a prioridade absoluta aqui */
.chapter p {
margin-bottom: 15px;
color: var(--text-soft);
font-size: 1.01rem;
line-height: 1.72;
max-width: 703px;
}
.chapter strong { color: var(--text); font-weight: 700; }
.chapter em { color: var(--lilac); font-style: normal; font-weight: 600; }
.chapter ul, .chapter ol {
margin: 0 0 17px 0;
padding-left: 21px;
color: var(--text-soft);
max-width: 703px;
}
.chapter li { margin-bottom: 7px; line-height: 1.68; }
.chapter li::marker { color: var(--violet); }
.chapter ul ul, .chapter ol ol { margin-top: 7px; margin-bottom: 0; }
.chapter a:not(.btn) {
color: var(--lilac);
text-decoration: underline;
text-decoration-color: var(--line-accent);
text-underline-offset: 3px;
}
.chapter a:not(.btn):hover { text-decoration-color: var(--violet); }
/* --- Código inline / valores de stat --- */
/* Código inline: tinta de fundo mais forte substitui o contorno */
.chapter code {
font-family: var(--font-mono);
font-size: 0.86em;
padding: 2px 7px;
border-radius: 5px;
background: rgba(124, 58, 237, 0.18);
color: #d8ccff;
}
/* --- Fórmula (bloco destacado) --- */
/* Fórmula: bloco definido por contraste de superfície (mais escuro que a
página), sem contorno desenhado */
.formula {
margin: 20px 0;
padding: 18px 20px;
background: #05050a;
border-radius: var(--radius-sm);
overflow-x: auto;
font-family: var(--font-mono);
font-size: var(--fs-micro);
line-height: 1.75;
color: var(--lilac);
-webkit-overflow-scrolling: touch;
}
.formula__label {
display: block;
margin-bottom: 9px;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-soft);
}
/* --- Callouts: DICA / IMPORTANTE / PRIORIDADE (briefing seção 14) ---
Sem barra colorida na lateral. A distinção vem de borda completa
tonalizada + tinta de fundo + cor do label. */
/* Callouts sem contorno: a distinção vem da tinta de fundo, que já é
suficiente para separar do corpo do texto. */
.callout {
margin: 22px 0;
padding: 15px 18px;
border-radius: var(--radius-sm);
background: var(--surface);
font-size: var(--fs-ui);
color: var(--text-soft);
}
.callout__label {
display: block;
margin-bottom: 5px;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* O corpo dos capítulos limita a 72ch, mas o parágrafo dentro do callout
não herdava isso (`.chapter p` não alcança este nível de aninhamento no
HTML gerado) e ia a ~93ch. Mesma medida do corpo, para o ritmo de leitura
não mudar ao entrar e sair de um callout. */
.callout p { max-width: 703px; }
.callout p:last-child { margin-bottom: 0; }
/* Tinta mais densa compensa a ausência de borda */
.callout--tip { background: rgba(124, 58, 237, 0.13); }
.callout--tip .callout__label { color: #d3c4ff; }
.callout--important { background: rgba(251, 191, 36, 0.11); }
.callout--important .callout__label { color: #fcd34d; }
.callout--prio { background: rgba(52, 211, 153, 0.11); }
.callout--prio .callout__label { color: #6ee7a8; }
/* --- Tabelas: scroll horizontal no mobile (briefing seção 15) ---
Sem grade desenhada. O cabeçalho tem superfície própria e as linhas
alternam tom — é assim que planilha e jornal bem feitos separam dados,
sem uma régua por linha. */
.table-wrap {
margin: 20px 0;
overflow-x: auto;
border-radius: var(--radius-sm);
background: var(--surface);
-webkit-overflow-scrolling: touch;
}
table {
width: 100%;
min-width: 460px;
border-collapse: collapse;
font-size: var(--fs-micro);
}
thead th {
position: sticky;
top: 0;
padding: 12px 15px;
background: #1c1c26;
text-align: left;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--text);
white-space: nowrap;
}
tbody td {
padding: 11px 15px;
color: var(--text-soft);
vertical-align: top;
}
tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.024); }
tbody tr:hover td { background: rgba(139, 92, 246, 0.09); }
tbody td:first-child { color: var(--text); font-weight: 600; }
/* --- Grid de cards informativos --- */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
gap: 13px;
margin: 22px 0;
}
.info-card {
padding: 17px;
background: var(--surface-2);
border-radius: var(--radius-sm);
}
.info-card__title {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.03em;
color: var(--text);
margin-bottom: 7px;
}
.info-card__value {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--lilac);
line-height: 1.12;
margin-bottom: 5px;
}
.info-card__text { font-size: var(--fs-micro); color: var(--text-soft); margin: 0; }
/* --- TLDR --- */
.tldr {
margin: 18px 0;
padding: 13px 17px;
background: rgba(124, 58, 237, 0.07);
border: 1px dashed var(--line-accent);
border-radius: var(--radius-sm);
font-size: var(--fs-ui);
color: var(--text-soft);
}
.tldr strong {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--lilac);
margin-right: 8px;
}
/* --- Placeholder de conteúdo pendente --- */
/* --- Progresso de leitura ---
Anima scaleX num retângulo puro: sem cap arredondado virando reto no
meio da transição, e preenche a trilha inteira até o fim do documento. */
/* PROGRESSO DE LEITURA REMOVIDO: o guia tinha esta barra E a
.scroll-progress do anim.css ao mesmo tempo, as duas fixas no topo em roxo.
Quem marca posicao aqui e o capitulo ativo no indice lateral. */
/* --- Navegação entre capítulos --- */
/* Navegação entre capítulos: separada por espaço, cards por superfície */
.chapter-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 56px;
}
.chapter-nav a {
display: grid;
gap: 4px;
padding: 16px 18px;
border-radius: var(--radius-sm);
background: var(--surface);
transition: background-color var(--t) var(--ease);
}
.chapter-nav a:hover { background: #1e1e29; }
.chapter-nav a:last-child { text-align: right; }
.chapter-nav__dir {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
}
.chapter-nav__name {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 500;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--text);
}
/* --- Voltar ao topo --- */
.to-top {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 60;
width: 44px;
height: 44px;
display: grid;
place-items: center;
background: var(--purple);
border: 0;
border-radius: 50%;
color: #fff;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
/* Saída: o botão desaparecendo não precisa ser acompanhado */
transition: opacity var(--t-exit) var(--ease),
visibility var(--t-exit) var(--ease),
transform var(--t-exit) var(--ease);
}
/* Entrada: percorre 10px, é um elemento pequeno — token moderate basta */
.to-top.is-visible {
opacity: 1;
visibility: visible;
transform: none;
transition-duration: var(--t);
}
.to-top svg { width: 17px; height: 17px; }
/* --- Barra mobile da Bíblia (abre o menu de capítulos) --- */
.docs-bar {
display: none;
position: sticky;
top: var(--header-h);
z-index: 70;
padding: 11px 22px;
/* OPACO: 0.97 deixava o texto atravessar quando o blur era descartado */
background: #0b0b12;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.docs-bar__btn {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 44px; /* mínimo confortável de toque */
padding: 10px 16px;
background: #1c1c26;
border: 0;
border-radius: var(--radius-sm);
font-size: var(--fs-micro);
font-weight: 600;
color: var(--text);
}
.docs-bar__btn svg { width: 15px; height: 15px; color: var(--violet); }
.docs__backdrop {
position: fixed;
inset: 0;
z-index: 88;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
transition: opacity var(--t-exit-slow) var(--ease), visibility var(--t-exit-slow) var(--ease);
}
/* Acompanha o drawer: mesma entrada, mesma saída, para os dois se moverem juntos */
.docs__backdrop.is-open {
opacity: 1;
visibility: visible;
transition-duration: var(--t-slow);
}
/* ==========================================================================
RESPONSIVO
========================================================================== */
@media (max-width: 1080px) {
.docs { grid-template-columns: 1fr; }
.docs-bar { display: block; }
/* Sidebar vira drawer lateral no mobile */
.docs__side {
position: fixed;
top: 0;
left: 0;
z-index: 90;
width: min(320px, 86vw);
height: 100vh;
padding-top: 22px;
transform: translateX(-102%);
/* Repouso = saída, mais curta que a entrada (ver .is-open abaixo) */
transition: transform var(--t-exit-slow) var(--ease);
box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5);
}
/* Entrada do drawer: percorre a largura da tela, então merece o token slow */
.docs__side.is-open {
transform: none;
transition-duration: var(--t-slow);
}
.docs__main { padding-top: 26px; }
.docs__content { padding-inline: 22px; }
/* --------------------------------------------------------------------
ALVO DE TOQUE NO DRAWER
A altura de 44px agora vem da regra base, para todos os viewports. Aqui
sobra só o padding lateral maior: no drawer, operado com o dedo, o alvo
ganha folga horizontal sem mudar a densidade vertical.
-------------------------------------------------------------------- */
.docs-nav__sub a { padding: 10px 11px; }
.docs-nav__chapter > a { min-height: 46px; align-items: center; }
}
@media (max-width: 560px) {
.chapter { margin-bottom: 46px; }
.chapter h3 { font-size: 1.08rem; }
.formula { font-size: var(--fs-micro); padding: 14px; }
.info-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.info-card { padding: 13px; }
.info-card__value { font-size: 1.18rem; }
.to-top { right: 14px; bottom: 14px; }
}
/* ==========================================================================
FIGURA INLINE COMPACTA
--------------------------------------------------------------------------
Terceira e ultima forma deste recurso. O historico importa para nao repetir:
1a imagem inline em TIRA (ate 1:4.5) -> "ocupa espaco" (procedente)
2a so botao, imagem apenas no modal -> "devem ser diretas no guia"
3a imagem inline COMPACTA + Ampliar (esta)
A 1a e a 3a parecem iguais e nao sao: lá a imagem era uma tira de 1200x5428,
que comia varias telas de rolagem. Depois do empacotamento justificado as
imagens tem proporcao de 1:0.23 a 1:0.99, e com teto de altura a figura ocupa
uma fracao daquilo. O cliente recusou a TIRA inline, nao a figura inline.
========================================================================== */
.fig-topico {
/* teto de altura: e o que cumpre "nao ocupar tanto espaco" */
--fig-h: 340px;
/* passa da medida de leitura (703px) de proposito: captura de interface com
texto de 11px precisa de largura. min() resolve contra o pai, e nao contra
a coluna — max-width: 100% sozinho nao daria o teto. */
width: min(920px, 100%);
margin: 20px 0 24px;
}
/* O quadro e o contexto de posicionamento do botao Ampliar e a superficie que
separa a imagem do corpo do texto. Tom mais escuro que a pagina, como as
outras superficies do guia — sem contorno desenhado. */
/* quadro-com-a-largura-da-imagem
ANTES: o quadro tomava a coluna inteira e a imagem, limitada por max-height,
ficava centralizada e mais estreita. Sobrava grafite dos dois lados, e o botao
Ampliar — absoluto no canto do QUADRO — aparecia num vao vazio ao lado da
imagem, parecendo solto na pagina.
AGORA o quadro mede o que a imagem vai medir: a altura-teto multiplicada pela
proporcao da figura (--ar, escrita no HTML a partir do width/height do ),
limitada pela coluna. Sem vao, e o botao cai no canto da imagem. */
.fig-topico__quadro {
position: relative;
display: block;
/* encaixe-por-formato
Tres limites, e vence o MENOR:
100% nunca passa da coluna de leitura
--fig-h * --ar o teto de altura, convertido em largura
--nat-w a largura NATIVA: nunca ampliar.
O terceiro e o que corrige "as pequenas estao grandes": skills-passivas
tem 418px e era exibida com 652px — 1,56x, borrada. Agora para em 418px.
Pequena e nitida e melhor que grande e borrada. */
width: min(100%, calc(var(--fig-h) * var(--ar, 1.6)), var(--nat-w, 100%));
/* A PROPORCAO DA IMAGEM, nao uma altura independente.
Sem isto, no celular o `100%` vencia o teto de altura: o quadro ficava com a
largura da coluna e a imagem, mais baixa por proporcao, deixava uma faixa de
grafite embaixo — e o botao Ampliar, absoluto no canto do quadro, caia nessa
faixa em vez de ficar sobre a imagem. Com aspect-ratio o quadro tem a forma
da imagem em qualquer largura. */
aspect-ratio: var(--ar, 1.6);
margin-inline: auto;
padding: 0;
background: #0c0c14;
border-radius: var(--radius-sm);
overflow: hidden;
line-height: 0;
}
.fig-topico__img {
display: block;
/* preenche o quadro, que ja tem a proporcao dela: cover e contain dao o mesmo
recorte quando as proporcoes coincidem, e cover elimina o fio de grafite que
o arredondamento de subpixel deixava na borda */
width: 100%;
height: 100%;
max-width: 100%;
/* contain: cabe sem distorcer e sem cortar. A proporcao real vem dos
atributos width/height do , que tambem reservam o espaco antes da
imagem chegar — é o que evita o CLS da versao inline anterior. */
object-fit: cover;
border-radius: 6px;
/* casa com o #101018 da imagem composta: sem moldura de cor diferente */
background: #101018;
}
/* Enquanto o src nao foi promovido, o quadro nao pode nascer colapsado, ou a
pagina salta quando a imagem entra. */
.fig-topico__img:not([src]) {
width: 100%;
min-height: 160px;
background: linear-gradient(110deg,
rgba(139, 92, 246, 0.05) 0%,
rgba(139, 92, 246, 0.10) 50%,
rgba(139, 92, 246, 0.05) 100%);
}
/* --- botao Ampliar ---
Canto superior direito, como no print de referencia. Fundo proprio porque ele
fica SOBRE a imagem: sem superficie, o texto desapareceria em captura clara. */
.fig-topico__zoom {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 6px;
/* 36px, nao 44: e um controle secundario SOBRE a imagem, e 44px cobriria
conteudo da captura. A figura inteira tambem abre o modal no clique (ver
lightbox.js), entao o alvo real e muito maior que o botao. */
min-height: 36px;
padding: 0 11px;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text);
background: rgba(12, 12, 20, 0.82);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 0;
border-radius: 8px;
box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.34);
cursor: pointer;
opacity: 0.88;
transition: opacity var(--t) var(--ease),
background-color var(--t) var(--ease),
box-shadow var(--t) var(--ease);
}
.fig-topico__zoom svg { flex: none; opacity: 0.9; }
.fig-topico:hover .fig-topico__zoom { opacity: 1; }
.fig-topico__zoom:hover,
.fig-topico__zoom:focus-visible {
opacity: 1;
background: rgba(20, 16, 34, 0.94);
box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.68);
}
/* A figura inteira e clicavel (o JS trata), entao o cursor tem de dizer isso */
.fig-topico__quadro { cursor: zoom-in; }
/* --- legenda ---
Mesma medida do corpo do texto: o ritmo de leitura nao muda ao entrar e sair
de uma figura. */
.fig-topico__cap {
margin: 9px 0 0;
font-size: var(--fs-micro);
line-height: 1.55;
color: var(--text-dim);
max-width: 703px;
}
@media (max-width: 900px) {
/* menos altura no tablet: a tela e menor e a rolagem custa mais */
.fig-topico { --fig-h: 300px; }
}
@media (max-width: 560px) {
.fig-topico {
--fig-h: 230px;
margin: 16px 0 20px;
}
/* padding zero: o quadro tem a proporcao exata da imagem (aspect-ratio), e 7px de padding lateral deixavam a imagem 14px mais estreita que o quadro — o vao onde o botao Ampliar caia. */
.fig-topico__quadro { padding: 0; }
/* no celular o botao encosta menos na borda e encolhe o rotulo */
/* Figura baixa no celular: lines-por-peca fica com 79px de altura, e um botao
de 34px com 10px de topo estourava por baixo. Encolhe e encosta mais, e o
rotulo sai — o icone de lupa sozinho ja diz o que faz, e o aria-label cobre
o leitor de tela. A figura inteira continua clicavel. */
.fig-topico__zoom {
top: 6px;
right: 6px;
min-height: 26px;
padding: 0 6px;
font-size: 0.66rem;
gap: 0;
}
.fig-topico__zoom span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (prefers-reduced-motion: reduce) {
.fig-topico__zoom { transition: none; }
}
/* ==========================================================================
[T1] LIGHTBOX DE IMAGENS DO GUIA
--------------------------------------------------------------------------
As imagens explicativas nao ficam abertas no corpo do texto: o guia tem 12
capitulos e 42 topicos, e a prioridade declarada para esta pagina e leitura.
Um botao discreto abre a imagem em modal, e a imagem so e baixada no primeiro
clique.
========================================================================== */
/* --- o botao --- */
/* Fantasma de proposito: e recurso auxiliar dentro de texto corrido, nao acao
principal. Superficie roxa cheia competiria com o CTA do Discord. */
.ver-img__linha {
margin: -4px 0 18px;
}
.ver-img {
display: inline-flex;
align-items: center;
gap: 8px;
/* 44px de altura minima: alvo de toque do projeto */
min-height: 44px;
padding: 0 15px;
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text-soft);
background: rgba(139, 92, 246, 0.07);
border: 1px solid rgba(139, 92, 246, 0.26);
border-radius: 10px;
cursor: pointer;
transition: background-color var(--t) var(--ease),
border-color var(--t) var(--ease),
color var(--t) var(--ease);
}
.ver-img svg { flex: none; opacity: 0.8; }
.ver-img:hover,
.ver-img:focus-visible {
color: var(--text);
background: rgba(139, 92, 246, 0.15);
border-color: rgba(139, 92, 246, 0.5);
}
.ver-img:hover svg,
.ver-img:focus-visible svg { opacity: 1; }
/* --- o modal --- */
.lb {
position: fixed;
inset: 0;
/* acima do header (100) e do drawer (90) */
z-index: 200;
display: grid;
place-items: center;
padding: 18px;
}
.lb[hidden] { display: none; }
.lb__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
transition: opacity 0.2s var(--ease);
/* sem isto, rolar dentro do modal arrasta a pagina por tras no celular */
overscroll-behavior: contain;
}
.lb.is-open .lb__overlay { opacity: 1; }
.lb__caixa {
position: relative;
z-index: 1;
width: min(1100px, 100%);
max-height: calc(100vh - 36px);
display: flex;
flex-direction: column;
background: var(--surface, #12101a);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 14px;
overflow: hidden;
/* 0.96 e nao 0: escala vinda do zero e assinatura de template e distorce o
conteudo — mesma decisao do data-anim="scale" do projeto */
opacity: 0;
transform: scale(0.96);
transition: opacity 0.22s var(--ease),
transform 0.26s var(--ease-quart, cubic-bezier(0.25, 1, 0.5, 1));
}
.lb.is-open .lb__caixa { opacity: 1; transform: none; }
.lb__topo {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 12px 12px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
flex: none;
}
.lb__titulo {
margin: 0;
flex: 1 1 auto;
min-width: 0;
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
color: var(--text);
/* titulo longo nao pode empurrar o X fora da caixa */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lb__x {
flex: none;
width: 44px;
height: 44px;
display: grid;
place-items: center;
color: var(--text-soft);
background: rgba(255, 255, 255, 0.06);
border: 0;
border-radius: 10px;
cursor: pointer;
transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.lb__x:hover,
.lb__x:focus-visible { color: var(--text); background: rgba(255, 255, 255, 0.14); }
.lb__fig {
margin: 0;
padding: 16px;
overflow: auto;
overscroll-behavior: contain;
}
.lb__img {
display: block;
width: 100%;
height: auto;
/* teto de altura: sem ele uma captura em retrato estoura a viewport no
celular e o botao de fechar sai da tela */
max-height: 78vh;
object-fit: contain;
border-radius: 8px;
background: rgba(0, 0, 0, 0.35);
}
.lb__cap {
margin: 12px 0 0;
font-size: 0.9rem;
line-height: 1.5;
color: var(--text-soft);
text-align: center;
}
.lb__cap[hidden] { display: none; }
@media (max-width: 560px) {
.lb { padding: 10px; }
.lb__caixa { max-height: calc(100vh - 20px); border-radius: 12px; }
.lb__topo { padding: 10px 10px 10px 14px; }
.lb__titulo { font-size: 0.94rem; }
.lb__fig { padding: 12px; }
.lb__img { max-height: 70vh; }
/* no celular o botao ocupa a largura toda, como os outros botoes do projeto */
.ver-img { width: 100%; justify-content: center; min-height: 48px; }
}
/* Sem movimento para quem pediu menos movimento: troca de estado direta. */
@media (prefers-reduced-motion: reduce) {
.lb__overlay,
.lb__caixa { transition: none; }
.lb__caixa { transform: none; }
}
/* A navegacao da galeria (.lb__nav, .lb__seta, .lb__contador) foi removida:
cada topico tem UMA imagem agora, emendada das fatias do documento, entao
nao existe "proxima imagem" para navegar. O historico esta no PROJETO.md. */
/* ==========================================================================
LINHA DE PRIORIDADE EM TABELA (Pantheon Stats)
--------------------------------------------------------------------------
O documento do cliente destaca em amarelo 4 dos 10 Pantheon Stats, com a
nota "highest value due to the underlined stat": o stat vale mais por causa
de UM dos dois efeitos, que aparece sublinhado.
Aqui o destaque nao e amarelo. Amarelo sobre fundo grafite briga com o roxo
da marca e o briefing pede "roxo so em destaque" — e este E um destaque.
Uso a cor da marca com fundo baixo, mais uma barra na borda esquerda: a cor
sozinha nao pode carregar a informacao (WCAG 1.4.1), entao a barra da o
sinal redundante para quem nao distingue a matiz.
========================================================================== */
tbody tr.is-prio {
background: rgba(139, 92, 246, 0.09);
}
/* barra na primeira celula: sinal que nao depende de cor */
tbody tr.is-prio td:first-child {
position: relative;
padding-left: 16px;
font-weight: 600;
color: var(--text);
}
tbody tr.is-prio td:first-child::before {
content: "";
position: absolute;
left: 0;
top: 20%;
bottom: 20%;
width: 3px;
border-radius: 2px;
background: linear-gradient(to bottom, var(--violet), var(--lilac));
}
/* O efeito responsavel pelo destaque. tem semantica de relevancia,
entao leitor de tela anuncia — melhor que um com cor. */
tbody mark,
.tabela-nota mark {
background: rgba(139, 92, 246, 0.22);
color: var(--text);
padding: 1px 5px;
border-radius: 4px;
font-weight: 600;
}
.tabela-nota {
margin: 10px 0 0;
font-size: 0.92rem;
color: var(--text-soft);
max-width: 72ch;
}
.ver-img {
display: inline-flex;
align-items: center;
gap: 8px;
/* 44px: alvo de toque minimo do projeto */
min-height: 44px;
padding: 9px 16px;
border-radius: var(--radius-sm);
border: 0;
font-family: var(--font-display);
font-size: var(--fs-ui);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-soft);
background: rgba(139, 92, 246, 0.08);
box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.3);
cursor: pointer;
transition: background-color var(--t) var(--ease),
box-shadow var(--t) var(--ease),
color var(--t) var(--ease);
}
.ver-img svg { flex: none; opacity: 0.8; }
.ver-img:hover,
.ver-img:focus-visible {
color: var(--text);
background: rgba(139, 92, 246, 0.16);
box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.55);
}
.ver-img:hover svg,
.ver-img:focus-visible svg { opacity: 1; }
/* --- o modal --- */
.lb {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
}
.lb[hidden] { display: none; }
.lb__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.85);
opacity: 0;
transition: opacity var(--t-slow) var(--ease);
overscroll-behavior: contain;
}
.lb.is-open .lb__overlay { opacity: 1; }
/* A caixa se ajusta ao conteudo, com teto na viewport. A imagem composta em
grade tem proporcao proxima de tela, entao cabe sem rolagem na maioria dos
casos — o que era impossivel com as tiras de 1200x5428 da versao anterior. */
.lb__caixa {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: fit-content;
max-width: min(1320px, 100%);
max-height: 100%;
border-radius: var(--radius);
background: var(--surface);
box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.95);
opacity: 0;
transform: scale(0.97);
transition: opacity var(--t-slow) var(--ease),
transform 0.26s var(--ease-quart, cubic-bezier(0.25, 1, 0.5, 1));
}
.lb.is-open .lb__caixa { opacity: 1; transform: none; }
.lb__topo {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 12px 12px 18px;
flex: none;
}
.lb__titulo {
margin: 0;
flex: 1 1 auto;
min-width: 0;
font-family: var(--font-display);
font-size: var(--fs-ui);
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lb__x {
flex: none;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 10px;
background: rgba(255, 255, 255, 0.07);
color: var(--text-soft);
cursor: pointer;
transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.lb__x:hover,
.lb__x:focus-visible { color: var(--text); background: rgba(255, 255, 255, 0.14); }
.lb__fig {
margin: 0;
padding: 0 16px 16px;
min-height: 0;
display: flex;
flex-direction: column;
overflow: auto;
overscroll-behavior: contain;
}
/* CABER, nao rolar.
`max-height` com `width: auto` faz a imagem encolher pela altura quando ela
e mais alta que larga, mantendo a proporcao. O calc desconta o cabecalho do
modal (68px), a legenda (~52px) e o padding.
Com as imagens em grade (proporcao de 0,75 a 2,3) isso resolve todas. */
.lb__img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: calc(100vh - 200px);
margin-inline: auto;
border-radius: var(--radius-sm);
/* casa com o fundo #101018 da imagem composta: sem moldura de cor diferente */
background: #101018;
}
.lb__cap {
margin: 12px auto 0;
max-width: 72ch;
font-size: 0.9rem;
color: var(--text-dim);
text-align: center;
}
.lb__cap[hidden] { display: none; }
/* Enquanto a imagem nao chegou: a caixa nao pode nascer colapsada, ou o modal
pisca de tamanho quando a imagem entra. */
.lb.is-carregando .lb__img {
min-width: min(560px, 80vw);
min-height: 220px;
background: linear-gradient(110deg,
rgba(139, 92, 246, 0.06) 0%,
rgba(139, 92, 246, 0.12) 50%,
rgba(139, 92, 246, 0.06) 100%);
}
/* Falhou o download: o alt aparece no lugar, com superficie para nao parecer
que o modal abriu vazio. */
.lb--erro .lb__img {
min-height: 140px;
padding: 20px;
color: var(--text-soft);
font-size: 0.92rem;
background: rgba(139, 92, 246, 0.08);
}
@media (max-width: 560px) {
/* no celular o botao ocupa a largura toda, como os outros botoes do projeto */
.ver-img {
width: 100%;
justify-content: center;
min-height: 48px;
}
.lb { padding: 10px; }
.lb__caixa { width: 100%; max-height: calc(100vh - 20px); border-radius: 12px; }
.lb__topo { padding: 10px 10px 10px 14px; }
.lb__titulo { font-size: 0.94rem; white-space: normal; }
.lb__fig { padding: 0 10px 12px; }
/* menos cabecalho e legenda na conta: sobra mais altura para a imagem */
.lb__img { max-height: calc(100vh - 170px); }
.lb.is-carregando .lb__img { min-width: 0; width: 100%; }
}
/* Paisagem em celular: a altura e o recurso escasso. */
@media (max-height: 520px) {
.lb__img { max-height: calc(100vh - 120px); }
.lb__cap { display: none; }
}
/* Sem movimento para quem pediu menos movimento: troca de estado direta. */
@media (prefers-reduced-motion: reduce) {
.lb__overlay,
.lb__caixa { transition: none; }
.lb__caixa { transform: none; }
.ver-img, .lb__x { transition: none; }
}
/* ==========================================================================
ESCALA DA IMAGEM NO MODAL
--------------------------------------------------------------------------
"diminua um pouco o tamanho da imagem"
MEDIDO em producao, quanto da altura util a imagem ocupava:
desktop 1440x900 700px de 791px (88%)
tablet 768x1024 824px de 915px (90%)
celular 390x844 464px de 739px (63%)
No desktop e no tablet ela tomava praticamente a tela inteira. Baixo o
teto de altura e acrescento um teto de LARGURA: as imagens tem 1280px
nativos, e servi-las nesse tamanho num monitor grande faz o modal virar a
pagina toda.
O LIMITE: sao capturas de interface com texto de ~11px na tela do jogo. O
modal existe para DAR tamanho ao print — encolher demais o tornaria
inutil. Por isso paro em ~78% do disponivel, nao menos.
========================================================================== */
.lb__img {
/* 1000px em vez dos 1280px nativos: a imagem continua legivel e o modal
deixa de ocupar a largura inteira de um monitor grande. */
max-width: min(1000px, 100%);
max-height: 66vh;
/* contain preserva a proporcao dentro dos dois tetos */
object-fit: contain;
margin-inline: auto;
}
@media (max-width: 900px) {
/* no tablet a largura da tela ja e o teto; cede altura */
.lb__img { max-height: 62vh; }
}
@media (max-width: 560px) {
/* no celular a imagem ja usava 63% da altura: mantenho, porque abaixo
disso o texto da interface do jogo deixa de ser legivel. */
.lb__img { max-height: 60vh; }
}
/* Tela baixa em paisagem: o gargalo e a altura, e vh acompanha. Sem isto a
imagem empurra a legenda para fora da caixa. */
/* panoramica-no-celular-piso-de-altura
No celular a panoramica encolhia a 146px de altura para caber em 346px de
largura — 9 capturas de interface ilegiveis. Aqui ela ganha um piso de
altura e rola na horizontal. So para imagem mais larga que 1.6:1: as
demais cabem sem rolagem, e forcar rolagem onde nao e preciso e pior.
O seletor usa o atributo que o lightbox.js escreve na abertura. */
@media (max-width: 560px) {
.lb[data-panoramica="sim"] .lb__img {
/* 300px: altura em que o texto da interface do jogo volta a ser legivel */
min-height: 300px;
width: auto;
max-width: none;
}
/* o figure passa a rolar nos dois eixos */
.lb[data-panoramica="sim"] .lb__fig {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/* aviso de que ha mais imagem para o lado, senao o corte parece defeito */
.lb[data-panoramica="sim"] .lb__cap::after {
content: " \2194 arraste para ver a imagem inteira";
color: var(--lilac);
}
}
/* paisagem-baixa-largura-manda
Tela baixa em paisagem: a altura e escassa a ponto de "caber inteira" e
"ser legivel" se excluirem. Encolher pela altura dava 139px de largura num
espaco de 708px. Aqui a largura manda e o modal rola na vertical. */
@media (max-height: 520px) {
.lb__img {
/* sem teto de altura: quem limita e a largura da caixa */
max-height: none;
/* 92% para nao encostar no padding do figure */
max-width: min(1000px, 92%);
}
/* a legenda ja sai de cena nesse tamanho; o figure e quem rola */
.lb__fig { overflow-y: auto; }
}
/* reset-do-botao-sobre-a-figura
O botao Ampliar carrega a classe .ver-img para reusar o handler do lightbox, e
herdava com ela as regras da forma anterior — inclusive width: 100% e
min-height: 48px no celular, feitas para um botao solto ocupando a coluna.
Sobre a figura isso o esticava para 346px de largura e 48px de altura,
estourando figuras de 79px. Aqui ele volta a ser um controle compacto no canto.
Especificidade dupla (.fig-topico .fig-topico__zoom) para vencer o @media que
define .ver-img sem depender da ordem no arquivo. */
.fig-topico .fig-topico__zoom {
width: auto;
justify-content: center;
}
@media (max-width: 560px) {
.fig-topico .fig-topico__zoom {
width: auto;
min-height: 26px;
padding: 0 6px;
font-size: 0.66rem;
}
}
/* area-de-toque-de-44px
O botao Ampliar e desenhado com 26-36px porque fica SOBRE a captura: 44px
cobririam metade de uma figura de 79px de altura. Mas 26px e um alvo ruim
para quem mira o botao, e a WCAG 2.5.8 fala do alvo, nao do entorno.
O ::after estende a AREA de toque para 44x44 mantendo o desenho pequeno —
a tecnica que a propria norma descreve para controles densos. Invisivel, e
centrado no botao para crescer nas quatro direcoes por igual. */
.fig-topico__zoom::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: max(100%, 44px);
height: max(100%, 44px);
/* nao pinta nada: so recebe o toque */
background: transparent;
}
/* ==========================================================================
TETO DE ALTURA POR FORMATO
--------------------------------------------------------------------------
Um teto unico tratava igual coisas opostas. Medido no desktop, coluna 720px,
com --fig-h de 340px para todas:
lines-por-peca 2400x545 (4.4) -> 720x163 tira baixa
power-shards 2400x1598 (1.5) -> 511x340 0,21x do nativo, ilegivel
arcana-cards 1500x1480 (1.0) -> 345x340 minuscula
A altura util depende do FORMATO: a panoramica ja e larga e nao precisa de
altura; a quadrada so ganha largura se ganhar altura. Os valores abaixo
mantem todas dentro de uma tela e evitam os dois extremos.
O formato vem de data-formato, escrito no HTML a partir da proporcao — nao
existe media query de proporcao de elemento em CSS.
========================================================================== */
.fig-topico[data-formato="panoramica"] { --fig-h: 260px; }
.fig-topico[data-formato="paisagem"] { --fig-h: 360px; }
.fig-topico[data-formato="quadrada"] { --fig-h: 420px; }
.fig-topico[data-formato="retrato"] { --fig-h: 460px; }
@media (max-width: 900px) {
.fig-topico[data-formato="panoramica"] { --fig-h: 220px; }
.fig-topico[data-formato="paisagem"] { --fig-h: 300px; }
.fig-topico[data-formato="quadrada"] { --fig-h: 360px; }
.fig-topico[data-formato="retrato"] { --fig-h: 400px; }
}
@media (max-width: 560px) {
/* No celular a largura da coluna (346px) manda em quase tudo, entao o teto
de altura quase nao entra na conta. Os valores servem para a panoramica,
que sem eles viraria uma tira de 79px. */
.fig-topico[data-formato="panoramica"] { --fig-h: 170px; }
.fig-topico[data-formato="paisagem"] { --fig-h: 240px; }
.fig-topico[data-formato="quadrada"] { --fig-h: 300px; }
.fig-topico[data-formato="retrato"] { --fig-h: 340px; }
}/* A figura do modal e a janela do zoom: recorta o que passa da borda. */
.lb__fig {
/* pinca e arraste nao devem rolar a pagina por tras */
touch-action: none;
}
.lb__fig.is-zoom {
overflow: hidden;
cursor: grab;
}
.lb__fig.is-zoom:active { cursor: grabbing; }
.lb__img {
/* o ponto de origem tem de ser o centro para a conta do pan fechar */
transform-origin: center center;
will-change: transform;
}
/* Em escala 1 o duplo clique amplia: o cursor precisa dizer isso. */
.lb__fig:not(.is-zoom) .lb__img { cursor: zoom-in; }
@media (max-width: 560px) {
/* o titulo cede espaco para os controles caberem na mesma linha */
.lb__titulo { font-size: 0.86rem; }}
@media (prefers-reduced-motion: reduce) {}
/* ==========================================================================
zoom-por-gesto
--------------------------------------------------------------------------
Os botoes -/100%/+ sairam: "nao quero botao pra dar zoom, quero conseguir
fazer tudo com o mouse, scroll e etc, touch".
O palco recorta e a imagem dentro dele recebe transform. transform roda na
GPU: nao dispara layout a cada evento de scroll, que com dezenas de eventos
por segundo seria perceptivel.
========================================================================== */
.lb__palco {
position: relative;
overflow: hidden;
display: grid;
place-items: center;
width: 100%;
min-height: 0;
border-radius: var(--radius-sm);
background: #101018;
/* o navegador nao pode rolar a pagina nem dar zoom proprio: os gestos sao
tratados no JS. Sem isto, no celular a pinca faz zoom na PAGINA. */
touch-action: none;
cursor: zoom-in;
}
.lb--ampliado .lb__palco { cursor: grab; }
.lb--ampliado .lb__palco:active { cursor: grabbing; }
.lb__palco .lb__img {
/* a origem do transform tem de casar com a conta do JS, que ancora no
centro do palco */
transform-origin: center center;
will-change: transform;
/* arrastar a imagem nao pode iniciar drag-and-drop do navegador */
user-select: none;
-webkit-user-drag: none;
}
/* O figure deixa de rolar: quem move a imagem agora e o gesto. Rolagem E
arraste ao mesmo tempo brigavam pelo mesmo movimento. */
.lb__fig {
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 0;
}
/* Ampliada, a imagem usa a altura toda disponivel do palco */
.lb--ampliado .lb__img { max-height: none; }
/* dica de gesto: aparece 3s ao abrir e sai. Sem ela ninguem descobre que da
zoom; como overlay fixo, tapava conteudo — foi a reclamacao do botao. */
.lb__palco::after {
content: "scroll para zoom · arraste para mover · duplo clique amplia";
position: absolute;
left: 50%;
bottom: 12px;
transform: translateX(-50%);
padding: 6px 12px;
font-family: var(--font-body);
font-size: 0.72rem;
color: var(--text-soft);
background: rgba(8, 8, 14, 0.86);
border-radius: 8px;
pointer-events: none;
opacity: 0;
animation: lb-dica 4s ease forwards;
}
.lb--ampliado .lb__palco::after { display: none; }
@keyframes lb-dica {
0% { opacity: 0; }
12% { opacity: 1; }
72% { opacity: 1; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.lb__palco::after { animation: none; opacity: 0.85; }
.lb__palco .lb__img { will-change: auto; }
}
@media (max-width: 560px) {
.lb__palco::after { content: "pinca para zoom · arraste para mover"; font-size: 0.68rem; }
}
/* ==========================================================================
O botao "Ampliar" sai da figura
--------------------------------------------------------------------------
O cliente mostrou em print que ele TAPA conteudo da captura. A figura toda
ja abre o modal (lightbox.js), entao o botao era redundante como alvo — o
que ele fazia era sinalizar que ha zoom. Isso passa a ser feito por uma
dica que aparece so no hover, e no canto, sem cobrir nada em repouso.
O botao continua no DOM, invisivel, porque e o alvo focavel por teclado que
a nao seria.
========================================================================== */
.fig-topico__zoom {
opacity: 0;
pointer-events: none;
}
/* volta a aparecer no hover e no foco por teclado */
.fig-topico:hover .fig-topico__zoom,
.fig-topico__zoom:focus-visible {
opacity: 1;
pointer-events: auto;
}
.fig-topico__zoom:focus-visible {
outline: 2px solid var(--lilac);
outline-offset: 2px;
}
/* ==========================================================================
preview-mostra-a-imagem-inteira
--------------------------------------------------------------------------
`object-fit: cover` cortava a captura: o cliente via cinco linhas de stat
onde a imagem tem duas telas e tres tooltips. Quanto mais conteudo, mais o
preview escondia.
Aqui a imagem aparece INTEIRA. O quadro perde o aspect-ratio e passa a ser
medido pela propria imagem — sem duas fontes de proporcao, nao existe
divergencia que force corte.
========================================================================== */
.fig-topico__quadro {
/* sem proporcao propria: quem define a forma e a imagem */
aspect-ratio: auto;
width: fit-content;
max-width: 100%;
display: block;
line-height: 0;
}
.fig-topico__img {
/* INTEIRA, sempre. O corte era o defeito. */
object-fit: contain;
width: auto;
height: auto;
max-width: 100%;
max-height: var(--fig-h);
}
/* --- selo com a contagem de telas ---
Reduzida a 340px de altura, a captura tem texto ilegivel de qualquer forma.
O que o leitor precisa saber e que ha conteudo ali e que vale ampliar. O
numero de telas vem de data-telas, escrito no HTML. */
.fig-topico__selo {
position: absolute;
left: 10px;
bottom: 10px;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 11px;
font-family: var(--font-body);
font-size: 0.76rem;
font-weight: 600;
line-height: 1.2;
color: var(--text);
background: rgba(10, 10, 18, 0.88);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 8px;
box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.4);
pointer-events: none;
}
.fig-topico__selo svg { flex: none; color: var(--lilac); }
/* a contagem so aparece quando ha mais de uma tela */
.fig-topico__selo[hidden] { display: none; }
@media (max-width: 560px) {
.fig-topico__selo {
left: 7px;
bottom: 7px;
padding: 5px 9px;
font-size: 0.7rem;
}
}
/* O quadro agora tem a largura da imagem, entao o botao Ampliar volta a cair
sobre ela. Deixo visivel sempre no celular, onde nao existe hover. */
@media (hover: none) {
.fig-topico__zoom { opacity: 1; pointer-events: auto; }
}
/* ==========================================================================
preview-usa-a-coluna
--------------------------------------------------------------------------
`lines-por-peca` (904x808) renderizava com 265px numa coluna de 650px: a
imagem parava no teto de altura de 340px e o quadro, em fit-content,
encolhia junto. Metade da coluna vazia, e dois rotulos tapando a imagem
pequena.
Agora a figura OCUPA A COLUNA. O teto de altura varia com a proporcao:
imagem alta pode usar mais altura, porque nela a altura e o gargalo;
panoramica continua limitada, porque ali quem manda e a largura.
========================================================================== */
.fig-topico {
/* a figura usa a largura disponivel; o quadro se ajusta por dentro */
width: min(920px, 100%);
}
.fig-topico__quadro {
/* nao encolhe abaixo da coluna: era o que deixava 40% de vazio ao lado */
width: 100%;
display: grid;
place-items: center;
padding: 0;
}
.fig-topico__img {
/* preenche a largura do quadro, e a altura acompanha a proporcao. Como o
quadro nao tem proporcao propria, contain nunca corta. */
width: 100%;
height: auto;
max-height: var(--fig-h);
object-fit: contain;
}
/* Imagem ALTA (mais de 0,7 de altura sobre largura) pode usar mais altura: nela
o gargalo e a altura, e limitar em 340px a reduzia a um terco da coluna.
O seletor usa --ar, que o HTML escreve por figura. */
@supports (height: calc(1px * 1)) {
.fig-topico { --fig-h: 340px; }
/* quase quadrada ou em retrato: 480px */
.fig-topico[style*="--ar:0."],
.fig-topico[style*="--ar:1.0"],
.fig-topico[style*="--ar:1.1"],
.fig-topico[style*="--ar:1.2"] { --fig-h: 480px; }
}
/* --- um rotulo, nao dois ---
"AMPLIAR" e "Clique para ver em tamanho real" diziam a mesma coisa e juntos
tapavam metade da figura. O selo fica, porque informa QUANTAS telas ha; o
botao vira icone, e o texto dele sai. */
.fig-topico__zoom span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.fig-topico__zoom {
min-height: 34px;
padding: 0;
width: 34px;
justify-content: center;
top: 8px;
right: 8px;
}
/* no touch o selo ja convida ao clique; o botao seria mais um obstaculo sobre
a imagem, e a figura inteira ja e clicavel */
@media (hover: none) {
.fig-topico__zoom { opacity: 0; pointer-events: none; }
}
/* o selo nao pode competir com a imagem: menor e mais discreto */
.fig-topico__selo {
left: 8px;
bottom: 8px;
padding: 5px 9px;
font-size: 0.72rem;
font-weight: 500;
color: var(--text-soft);
background: rgba(8, 8, 14, 0.8);
box-shadow: none;
}
.fig-topico:hover .fig-topico__selo { color: var(--text); }
/* ==========================================================================
largura-derivada-da-altura
--------------------------------------------------------------------------
`width: 100%` com `max-height` se contradizem em imagem alta: o navegador
achata para respeitar as duas, e a escala horizontal deixa de bater com a
vertical — 20 das 28 figuras acusaram corte.
Aqui existe UMA conta: a largura maxima e a que decorre do teto de altura,
`--fig-h * --ar`. A imagem cresce ate a coluna permitir, para na altura-teto,
e nunca achata. Uma fonte de verdade so.
========================================================================== */
.fig-topico__img {
width: auto;
height: auto;
/* o menor entre: o que a coluna permite e o que o teto de altura permite */
max-width: min(100%, calc(var(--fig-h) * var(--ar, 1.6)));
max-height: var(--fig-h);
object-fit: contain;
}
.fig-topico__quadro {
/* o quadro acompanha a imagem, sem impor largura nem proporcao */
width: fit-content;
max-width: 100%;
display: grid;
place-items: center;
aspect-ratio: auto;
}
/* Teto de altura por FORMATO, para a figura usar a coluna em vez de encolher:
panoramica (ar > 2) 340px — ali a largura e o gargalo
media (1.2 a 2) 420px
quase quadrada (< 1.2) 520px — ali a altura e o gargalo, e limitar demais
reduzia a imagem a um terco da coluna */
.fig-topico { --fig-h: 420px; }
.fig-topico[style*="--ar:2."],
.fig-topico[style*="--ar:3."],
.fig-topico[style*="--ar:4."],
.fig-topico[style*="--ar:5."] { --fig-h: 340px; }
.fig-topico[style*="--ar:0."],
.fig-topico[style*="--ar:1.0"],
.fig-topico[style*="--ar:1.1"] { --fig-h: 520px; }
@media (max-width: 900px) {
.fig-topico { --fig-h: 340px; }
.fig-topico[style*="--ar:0."],
.fig-topico[style*="--ar:1.0"],
.fig-topico[style*="--ar:1.1"] { --fig-h: 420px; }
}
@media (max-width: 560px) {
.fig-topico { --fig-h: 260px; }
.fig-topico[style*="--ar:0."],
.fig-topico[style*="--ar:1.0"],
.fig-topico[style*="--ar:1.1"] { --fig-h: 330px; }
}
/* ==========================================================================
altura-calibrada-por-formato
--------------------------------------------------------------------------
O print do cliente mostrava `lines-por-peca` com 380px numa coluna de 720px:
a imagem tem 904x808 nativos e parava no teto de 340px de altura. Sobrava
metade da coluna, e os rotulos tapavam a figura pequena.
O teto agora vem do FORMATO. Em imagem quase quadrada a altura e o gargalo,
e limitar em 340px a reduzia a metade; em panoramica a largura e o gargalo, e
altura sobrando nao ajuda. Os valores saem da conta coluna/proporcao.
Captura pequena de origem (skills-passivas 418x218, valor-stats 461x247) fica
no tamanho nativo: esticar so embaça, o navegador nao inventa pixel.
========================================================================== */
/* quase quadrada e retrato: aqui a altura e o gargalo */
.fig-topico[style*="--ar:0."],
.fig-topico[style*="--ar:1.0"],
.fig-topico[style*="--ar:1.1"],
.fig-topico[style*="--ar:1.2"] {
--fig-h: 640px;
}
/* formato medio */
.fig-topico[style*="--ar:1.3"],
.fig-topico[style*="--ar:1.4"],
.fig-topico[style*="--ar:1.5"],
.fig-topico[style*="--ar:1.6"] {
--fig-h: 470px;
}
/* larga */
.fig-topico[style*="--ar:1.7"],
.fig-topico[style*="--ar:1.8"],
.fig-topico[style*="--ar:1.9"],
.fig-topico[style*="--ar:2.0"],
.fig-topico[style*="--ar:2.1"] {
--fig-h: 380px;
}
/* panoramica: a largura manda, altura sobrando nao ajuda */
.fig-topico[style*="--ar:2.2"],
.fig-topico[style*="--ar:2.3"],
.fig-topico[style*="--ar:2.4"],
.fig-topico[style*="--ar:2.5"],
.fig-topico[style*="--ar:2.6"],
.fig-topico[style*="--ar:2.7"],
.fig-topico[style*="--ar:2.8"],
.fig-topico[style*="--ar:2.9"],
.fig-topico[style*="--ar:3."],
.fig-topico[style*="--ar:4."],
.fig-topico[style*="--ar:5."] {
--fig-h: 330px;
}
@media (max-width: 900px) {
.fig-topico[style*="--ar:0."],
.fig-topico[style*="--ar:1.0"],
.fig-topico[style*="--ar:1.1"],
.fig-topico[style*="--ar:1.2"] { --fig-h: 460px; }
.fig-topico[style*="--ar:1.3"],
.fig-topico[style*="--ar:1.4"],
.fig-topico[style*="--ar:1.5"],
.fig-topico[style*="--ar:1.6"] { --fig-h: 380px; }
.fig-topico[style*="--ar:1.7"],
.fig-topico[style*="--ar:1.8"],
.fig-topico[style*="--ar:1.9"],
.fig-topico[style*="--ar:2.0"],
.fig-topico[style*="--ar:2.1"] { --fig-h: 320px; }
.fig-topico[style*="--ar:2.2"],
.fig-topico[style*="--ar:2.3"],
.fig-topico[style*="--ar:2.4"],
.fig-topico[style*="--ar:2.5"],
.fig-topico[style*="--ar:2.6"],
.fig-topico[style*="--ar:2.7"],
.fig-topico[style*="--ar:2.8"],
.fig-topico[style*="--ar:2.9"],
.fig-topico[style*="--ar:3."],
.fig-topico[style*="--ar:4."],
.fig-topico[style*="--ar:5."] { --fig-h: 280px; }
}
@media (max-width: 560px) {
.fig-topico[style*="--ar:0."],
.fig-topico[style*="--ar:1.0"],
.fig-topico[style*="--ar:1.1"],
.fig-topico[style*="--ar:1.2"] { --fig-h: 380px; }
.fig-topico[style*="--ar:1.3"],
.fig-topico[style*="--ar:1.4"],
.fig-topico[style*="--ar:1.5"],
.fig-topico[style*="--ar:1.6"] { --fig-h: 300px; }
.fig-topico[style*="--ar:1.7"],
.fig-topico[style*="--ar:1.8"],
.fig-topico[style*="--ar:1.9"],
.fig-topico[style*="--ar:2.0"],
.fig-topico[style*="--ar:2.1"] { --fig-h: 250px; }
.fig-topico[style*="--ar:2.2"],
.fig-topico[style*="--ar:2.3"],
.fig-topico[style*="--ar:2.4"],
.fig-topico[style*="--ar:2.5"],
.fig-topico[style*="--ar:2.6"],
.fig-topico[style*="--ar:2.7"],
.fig-topico[style*="--ar:2.8"],
.fig-topico[style*="--ar:2.9"],
.fig-topico[style*="--ar:3."],
.fig-topico[style*="--ar:4."],
.fig-topico[style*="--ar:5."] { --fig-h: 220px; }
}
/* Captura pequena: nao estica alem do nativo. --nat-w ja esta no HTML. */
.fig-topico__img {
max-width: min(100%, calc(var(--fig-h) * var(--ar, 1.6)), var(--nat-w, 9999px));
}
/* ==========================================================================
captura-pequena-centralizada
--------------------------------------------------------------------------
beginner-note (316px), skills-passivas (418px) e valor-stats (461px) tem
poucos pixels nativos e aparecem em tamanho real — esticar embaça, o
navegador nao inventa pixel. Sem tratamento elas ficavam encostadas a
esquerda numa coluna de 720px, parecendo desalinhadas.
O quadro passa a ocupar a coluna e centraliza a imagem, com a superficie
grafite fazendo a moldura. A figura fica alinhada com as outras.
========================================================================== */
.fig-topico__quadro {
width: 100%;
display: grid;
place-items: center;
padding: 10px;
}
@media (max-width: 560px) { .fig-topico__quadro { padding: 6px; } }
/* ==========================================================================
quadro-acompanha-a-imagem
--------------------------------------------------------------------------
Eu fazia o quadro ocupar a coluna inteira para as capturas pequenas nao
ficarem encostadas a esquerda. O resultado foi pior: um bloco grafite de
720px com uma imagem de 316px no meio e o selo flutuando no vazio.
Agora o quadro tem o tamanho da imagem e a FIGURA se centraliza na coluna.
Sem superficie sobrando, e a imagem pequena nao anuncia um espaco que nao
preenche.
========================================================================== */
.fig-topico__quadro {
width: fit-content;
max-width: 100%;
margin-inline: auto;
padding: 0;
display: block;
line-height: 0;
}
/* Selo: em imagem estreita o texto longo nao cabe. Abaixo de 420px de
largura, so o icone — o cursor zoom-in e a propria figura clicavel dizem o
resto, e um rotulo cobrindo metade de uma captura pequena e pior que
nenhum. */
.fig-topico[style*="--nat-w:3"] .fig-topico__selo,
.fig-topico[style*="--nat-w:41"] .fig-topico__selo,
.fig-topico[style*="--nat-w:46"] .fig-topico__selo {
font-size: 0;
gap: 0;
padding: 5px;
}
/* ==========================================================================
icone-no-titulo
--------------------------------------------------------------------------
O CH 2 tem um icone do jogo por subsecao (~70px). No documento eles ficam ao
lado do titulo; no site vao no "espaco da direita" que o h3 deixa livre.
Nao sao figuras: 70px nao tem o que ampliar, entao ficam fora do lightbox e
sem quadro, selo ou teto de altura. aria-hidden porque sao decorativos — o
titulo ja diz do que se trata, e um leitor de tela anunciando "imagem" duas
vezes por secao seria ruido.
========================================================================== */
.chapter h3:has(.h3-icones) {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.h3-texto { min-width: 0; }
.h3-icones {
flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.h3-icone {
/* 40px: presente sem competir com o titulo, e legivel como icone de item */
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 7px;
/* o icone vem com fundo escuro do jogo; a superficie casa com o guia */
background: #101018;
}
/* Sem :has (navegador antigo): o flex nao se aplica e os icones ficam em linha
depois do texto. Aceitavel — nao quebra nada. */
@media (max-width: 560px) {
.h3-icone { width: 32px; height: 32px; }
.chapter h3:has(.h3-icones) { gap: 10px; }
}
/* ==========================================================================
preview-compacto-de-verdade
--------------------------------------------------------------------------
O teto de 640px vinha de uma tentativa de resolver figura pequena, cuja causa
real era o --ar defasado. Corrigida a causa, o teto alto so fez cada figura
ocupar uma tela inteira — o guia virou galeria.
Preview e previa: 300px bastam para ver que ha captura e decidir ampliar.
========================================================================== */
.fig-topico {
--fig-h: 300px;
/* menos respiro: a figura nao pode criar buraco no meio da leitura */
margin: 14px auto 18px;
}
/* retrato e quase quadrada: um pouco mais de altura, porque a largura ja e
limitada pela propria proporcao */
.fig-topico[style*="--ar:0."],
.fig-topico[style*="--ar:1.0"],
.fig-topico[style*="--ar:1.1"],
.fig-topico[style*="--ar:1.2"] {
--fig-h: 330px;
}
/* panoramica: baixa por natureza, teto menor evita faixa gigante */
.fig-topico[style*="--ar:2."],
.fig-topico[style*="--ar:3."],
.fig-topico[style*="--ar:4."],
.fig-topico[style*="--ar:5."] {
--fig-h: 260px;
}
@media (max-width: 900px) {
.fig-topico { --fig-h: 240px; }
.fig-topico[style*="--ar:0."],
.fig-topico[style*="--ar:1.0"],
.fig-topico[style*="--ar:1.1"],
.fig-topico[style*="--ar:1.2"] { --fig-h: 270px; }
.fig-topico[style*="--ar:2."],
.fig-topico[style*="--ar:3."],
.fig-topico[style*="--ar:4."],
.fig-topico[style*="--ar:5."] { --fig-h: 210px; }
}
@media (max-width: 560px) {
.fig-topico { --fig-h: 190px; }
.fig-topico[style*="--ar:0."],
.fig-topico[style*="--ar:1.0"],
.fig-topico[style*="--ar:1.1"],
.fig-topico[style*="--ar:1.2"] { --fig-h: 220px; }
.fig-topico[style*="--ar:2."],
.fig-topico[style*="--ar:3."],
.fig-topico[style*="--ar:4."],
.fig-topico[style*="--ar:5."] { --fig-h: 165px; }
}
/* ==========================================================================
TRANSFER (CH 05, secao E) — capturas do cliente em tamanho util
--------------------------------------------------------------------------
O teto de altura por proporcao reduzia `transfer` de 662px nativos para
370px: 51% da coluna, com os numeros da interface ilegiveis. Aqui o teto de
altura passa a ser a altura que a figura TEM quando a largura chega ao
nativo (transfer) ou a coluna de leitura (transfer-2 e transfer-3):
transfer 662x590 (1.12) -> 590px = nativo, 1:1
transfer-2 1587x650 (2.44) -> 288px = coluna cheia
transfer-3 1151x649 (1.77) -> 396px = coluna cheia
Sem media query de proposito: com o teto alto, quem limita passa a ser o
`100%` da coluna, que ja encolhe sozinho no tablet e no celular. Um teto
menor ali so voltaria a criar a figura micro.
========================================================================== */
.fig-topico[data-fig="transfer"] { --fig-h: 590px; }
.fig-topico[data-fig="transfer-2"] { --fig-h: 288px; }
.fig-topico[data-fig="transfer-3"] { --fig-h: 396px; }
/* ==========================================================================
MANASTONE / SOULSTONE (CH 05, secao B) — captura do cliente em 1:1
--------------------------------------------------------------------------
775x768 (1.01) caia na faixa "quase quadrada", onde a altura e o gargalo: a
figura era exibida a 333px, 46% da coluna, com as linhas de stat ilegiveis.
O teto passa a ser a altura nativa, entao a largura para no `--nat-w` de
775px e a captura fica 1:1. No celular quem limita e o `100%` da coluna.
========================================================================== */
.fig-topico[data-fig="manastones"] { --fig-h: 768px; }
/* ==========================================================================
DAEVANION BOARDS (CH 07) — recorte pequeno e tira de titulo
--------------------------------------------------------------------------
`board-attack` tem 165x113: e um recorte de tile, fica em tamanho nativo
porque esticar embaca. Nesse tamanho o selo cobriria metade da imagem, e um
rotulo tapando a captura e pior que nenhum — mesma decisao ja tomada para
as capturas de 3xx e 4xx px.
`board-4main` tem 746x47 (15.87:1): tira de titulo. O teto padrao de
proporcao alta nao chega perto de limitar aqui, mas fixar o valor evita que
uma mudanca futura nas faixas de --ar a estique.
========================================================================== */
.fig-topico[data-fig="board-attack"] .fig-topico__selo {
padding: 0;
font-size: 0;
gap: 0;
}
.fig-topico[data-fig="board-4main"] { --fig-h: 47px; }
/* ==========================================================================
PET GENUS (CH 08) e boards coloridos (CH 07)
--------------------------------------------------------------------------
`pet` tem 603x616 (0.98): quase quadrada, onde a altura e o gargalo. Era
exibida a 323px, 45% da coluna. Teto = altura nativa, entao a largura para
no --nat-w de 603px: captura 1:1.
`board-4col` tem 730x42 (17.38:1): tira de titulo, mesmo tratamento dado a
`board-4main`.
========================================================================== */
.fig-topico[data-fig="pet"] { --fig-h: 616px; }
.fig-topico[data-fig="board-4col"] { --fig-h: 42px; }
/* ==========================================================================
reset-da-imagem-gatilho
--------------------------------------------------------------------------
`.ver-img` nasceu como classe de BOTAO: inline-flex, padding, borda, e no
celular `width: 100%` com `min-height: 48px`. O handler do lightbox procura
por essa classe, entao a passou a carrega-la quando virou o gatilho —
e herdou o estilo de botao junto. O efeito medido: quadro encolhendo de
720px para 492px e a proporcao da imagem rompendo em 21 das 40 figuras,
porque o padding e o inline-flex entravam na conta da largura.
Mesma armadilha ja registrada acima para `.fig-topico__zoom`. A diferenca e
que ali o alvo era um botao de verdade; aqui e a propria captura, entao o
reset tem de ser completo.
Especificidade dupla (.fig-topico .fig-topico__img) para vencer o @media de
560px que define `.ver-img` sem depender da ordem no arquivo.
========================================================================== */
.fig-topico .fig-topico__img.ver-img {
display: block;
align-items: initial;
justify-content: initial;
gap: 0;
padding: 0;
border: 0;
border-radius: inherit;
background: none;
box-shadow: none;
min-height: 0;
font-size: inherit;
line-height: 0;
cursor: zoom-in;
}
/* hover e foco: nada de superficie roxa sobre a captura. O foco fica visivel
por um anel FORA da imagem, entao nao cobre conteudo — o