/* ==========================================================================
   COMPONENTES — blocos reutilizáveis do manual
   Cada bloco aqui é independente: pode ser copiado para uma nova seção
   sem arrastar contexto.
   ========================================================================== */

/* ---------- card genérico ---------- */
.card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:4px;
  padding:22px 24px;
}
.card h4{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  margin-bottom:10px;
  color:var(--text);
}
.card p{ font-size:14.5px; color:var(--text-muted); margin-bottom:0; }

/* ---------- tags de vocabulário ---------- */
.tag{
  display:inline-block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-dim);
  border:1px solid var(--line);
  border-radius:20px;
  padding:3px 10px;
  margin:3px 6px 3px 0;
}
.tag.yes{ color:var(--gold); border-color:var(--gold-dim); }
.tag.no{ color:#a06b5c; border-color:#3a2a24; }

/* Duas colunas rotuladas. A cor sozinha não diz o que é permitido e o que
   não é: o rótulo e o sinal de cada coluna é que carregam a regra. */
.vocab{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:20px;
}
@media (max-width: 700px){ .vocab{ grid-template-columns:1fr; } }

.vocab-col{
  border:1px solid var(--line);
  border-radius:8px;
  padding:20px;
  background:var(--bg-card);
}
.vocab-col.usar{ border-color:var(--gold-dim); }
.vocab-col.evitar{ border-color:#3a2a24; }

.vc-cab{
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-brand-label);
  font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
  margin-bottom:8px;
}
.vocab-col.usar .vc-cab{ color:var(--gold); }
.vocab-col.evitar .vc-cab{ color:var(--rombo); }
.vc-sinal{
  display:flex; align-items:center; justify-content:center;
  width:18px; height:18px;
  border-radius:50%;
  border:1px solid currentColor;
  font-size:10px;
  line-height:1;
}

.vc-nota{
  font-size:12.5px;
  line-height:1.5;
  color:var(--text-dim);
  margin:0 0 14px;
  max-width:none;
}
.vc-tags{ display:flex; flex-wrap:wrap; }


/* ---------- método SCALE™ (lista numerada em etapas) ---------- */
.method-list{ margin-top:24px; max-width:640px; }
.method-step{
  display:flex; gap:24px;
  padding:22px 0;
  border-top:1px solid var(--line);
}
.method-step:last-child{ border-bottom:1px solid var(--line); }
.method-step .mn{
  font-family:var(--font-display);
  color:var(--gold);
  font-size:13px;
  letter-spacing:.04em;
  flex-shrink:0;
  padding-top:3px;
  width:56px;
}
.method-step h4{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  margin-bottom:6px;
}
.method-step p{ font-size:14.5px; color:var(--text-muted); margin-bottom:0; }

/* ---------- regras "não fazer" ---------- */
.donts-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 24px;
  margin-top:18px;
  max-width:640px;
}
@media (max-width: 700px){ .donts-grid{ grid-template-columns:1fr; } }
.dont{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13.5px;
  color:var(--text-muted);
  line-height:1.4;
  padding:10px 0;
  border-top:1px solid var(--line);
}
/* Vermelho Rombo, o mesmo do número dos cards de uso indevido. Cinza, o X
   lia como marcador de lista em vez de sinal de proibição. */
.dont .x{
  color:var(--rombo);
  font-size:13px;
  flex-shrink:0;
  line-height:1.4;
}

/* Texto só para leitor de tela */
.sr{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* Barra de proporção de uso da paleta */
.ratio-bar{
  display:flex;
  height:40px;
  border-radius:4px;
  overflow:hidden;
  margin-top:24px;
  max-width:640px;
  border:1px solid var(--line);
}

/* Olho de bloco: referência fotográfica, exemplo de peça */
.kicker{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-dim);
  margin-bottom:14px;
}

/* ==========================================================================
   ESPÉCIME TIPOGRÁFICO
   Renderiza nas fontes REAIS da marca (--font-brand-*), não nas fontes do
   documento. Cada linha da escala mostra a amostra no corpo verdadeiro e,
   abaixo, as specs que a definem.
   Os tamanhos usam min(px, vw) para não estourar em tela pequena — o valor
   em px na spec é sempre o oficial.
   ========================================================================== */

/* ---------- faixa de espécime (AaBbCc…) ---------- */
.specimen-strip{ margin-top:36px; border-top:1px solid var(--line); }
.specimen-line{
  font-family:var(--font-brand-display);
  font-weight:600;
  color:var(--text);
  line-height:1.15;
  letter-spacing:-.02em;
  padding:38px 0;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
  overflow:hidden;
}
/* Uma linha por família, em vez de três tamanhos da mesma */
.specimen-line.xl{ font-size:min(76px, 10.5vw); }
.specimen-line.md{ font-size:min(38px, 6vw); letter-spacing:-.01em; }
.specimen-line.sm{ font-size:min(19px, 4vw); letter-spacing:0; }
.specimen-line.texto{ font-family:var(--font-brand-texto); font-weight:500; }
.specimen-line.rotulo{
  font-family:var(--font-brand-label);
  font-weight:500;
  letter-spacing:.14em;
  font-size:min(17px, 3.6vw);
}

/* ---------- escala (títulos e parágrafos) ---------- */
.type-scale{ margin-top:40px; border-top:1px solid var(--line); }

.type-item{
  padding:64px 0;
  border-bottom:1px solid var(--line);
}
.type-item .specimen{
  /* sem font-family aqui: cada degrau declara a sua, senão esta regra
     ganha por especificidade e todos renderizam na mesma família */
  color:var(--text);
  margin-bottom:44px;
  max-width:100%;
}

/* Degraus de display pedem mais ar: a amostra é grande, o respiro acompanha */
.type-item:has(.t-h0),
.type-item:has(.t-h1){ padding:88px 0; }
.type-item:has(.t-h0) .specimen,
.type-item:has(.t-h1) .specimen{ margin-bottom:64px; }

/* Amostras de parágrafo são densas — não precisam do mesmo intervalo */
.type-item:has(.t-pl),
.type-item:has(.t-p),
.type-item:has(.t-ps){ padding:52px 0; }

@media (max-width: 700px){
  .type-item{ padding:44px 0; }
  .type-item .specimen{ margin-bottom:32px; }
  .type-item:has(.t-h0),
  .type-item:has(.t-h1){ padding:52px 0; }
  .type-item:has(.t-h0) .specimen,
  .type-item:has(.t-h1) .specimen{ margin-bottom:36px; }
  .specimen-line{ padding:26px 0; }
}

/* Linha de specs abaixo da amostra */
.type-specs{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:16px 40px;
}
.type-specs .token{
  font-family:var(--font-display);
  font-size:12px;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.08em;
  width:78px;
  flex-shrink:0;
  padding-top:1px;
}
.type-specs .spec{ font-size:11px; }
.type-specs .spec .k{
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:3px;
}
.type-specs .spec .v{
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}

/* ---- degraus de título — razão 1.5 entre passos consecutivos ---- */
.t-h0,.t-h1,.t-h2,.t-h3,.t-h4,.t-h5{ font-family:var(--font-brand-display); font-weight:500; }
.t-h0{ font-size:min(120px, 13vw); line-height:1.05; letter-spacing:-.02em; }
.t-h1{ font-size:min(80px, 9.5vw);  line-height:1.05; letter-spacing:-.02em; }
.t-h2{ font-size:min(54px, 7vw);    line-height:1.05; letter-spacing:-.02em; }
.t-h3{ font-size:min(36px, 5.5vw);  line-height:1.15; letter-spacing:-.01em; }
.t-h4{ font-size:24px;              line-height:1.15; letter-spacing:-.01em; }
.t-h5{ font-size:16px;              line-height:1.3;  letter-spacing:0; }

/* ---- degraus de parágrafo ---- */
.t-pl,.t-p,.t-ps{
  font-family:var(--font-brand-texto);
  font-weight:400;
  line-height:1.6;
  letter-spacing:0;
  color:var(--text-muted);
  max-width:640px;
}
.t-pl{ font-size:19px; color:var(--text); }
.t-p{  font-size:16px; }
.t-ps{ font-size:14px; }

/* ---- rótulos: Plus Jakarta Sans, caixa alta, tracking aberto ---- */
.t-label,.t-caption{
  font-family:var(--font-brand-label);
  font-weight:500;
  text-transform:uppercase;
  line-height:1.3;
}
.t-label{   font-size:12px; letter-spacing:.14em; color:var(--gold); }
.t-caption{ font-size:11px; letter-spacing:.1em;  color:var(--text-muted); }

/* ---------- referência fotográfica ---------- */
.photo-ref{
  margin-top:28px;
  border:1px solid var(--line);
  border-radius:4px;
  padding:26px;
  background:linear-gradient(180deg, #15140f, #0e0d0a);
}
.photo-ref .keywords{ margin-top:14px; }

/* ---------- lista de regras numeradas ---------- */
ol.steps{ list-style:none; counter-reset:step; margin-top:24px; max-width:560px; }
/* O marcador é absoluto, não item de flex: com flex, qualquer <em> ou
   <strong> no meio da frase virava item próprio e quebrava a linha. */
ol.steps li{
  counter-increment:step;
  position:relative;
  padding:14px 0 14px 34px;
  border-top:1px solid var(--line);
  font-size:14.5px;
  line-height:1.55;
  color:var(--text-muted);
}
ol.steps li:last-child{ border-bottom:1px solid var(--line); }
ol.steps li::before{
  content:counter(step, decimal-leading-zero);
  position:absolute;
  left:0; top:16px;
  font-family:var(--font-display);
  color:var(--gold);
  font-size:12px;
}

/* ---------- utilitários de espaçamento pontual ---------- */
.mt-s{ margin-top:14px; }
.mt-m{ margin-top:40px; }
.mt-l{ margin-top:72px; }
.mb-0{ margin-bottom:0; }

/* ==========================================================================
   BLOCO DE ATIVO — painel com seletor de variantes (padrão REF-1)
   O seletor troca o arquivo mostrado, o fundo do palco e o link de download.
   ========================================================================== */

.asset-block{ margin-top:80px; }
.asset-block:first-of-type{ margin-top:32px; }

/* Um bloco pode ter mais de um palco (reduzido: h + v; ícone: redondo + quadrado) */
.asset-item{ margin-top:40px; }
.asset-item:first-of-type{ margin-top:0; }

.ab-title{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:600;
  color:var(--text);
  margin-bottom:10px;
}
.ab-desc{
  font-size:14px;
  color:var(--text-muted);
  line-height:1.5;
  max-width:420px;
  margin-bottom:28px;
}
.ab-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-dim);
  margin-bottom:12px;
}

.ab-stage{
  position:relative;
  /* Borda em vez de clarear o fundo: o palco mostra a cor real de
     aplicação da variante, inclusive quando ela é o preto da página. */
  border:1px solid var(--line);
  border-radius:8px;
  min-height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:56px 40px;
  background:var(--bg-card);
  transition:background .2s ease;
}
@media (max-width: 700px){ .ab-stage{ min-height:200px; padding:36px 24px; } }

.ab-stage img{
  width:300px;
  max-width:74%;
  height:auto;
  display:block;
}
.ab-stage[data-familia="completo"] img{ width:340px; max-width:78%; }
.ab-stage[data-familia="vertical"] img{ width:170px; max-width:46%; }
.ab-stage[data-familia="simbolo"] img{ width:78px;  max-width:24%; }
.ab-stage[data-familia="icone"] img{   width:118px; max-width:32%; }

/* Botão de download, canto inferior direito */
.ab-dl{
  position:absolute;
  right:20px; bottom:20px;
  width:44px; height:44px;
  border:none;
  border-radius:8px;
  background:var(--later-atrito);
  color:var(--later-lastro);
  display:flex; align-items:center; justify-content:center;
  padding:0;
  cursor:pointer;
  text-decoration:none; border-bottom:none;
  transition:opacity .15s ease, transform .15s ease;
}
.ab-dl:hover{ opacity:.85; transform:translateY(-1px); }
.ab-dl .icon{ width:20px; height:20px; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* Sobre fundo claro o botão inverte: Atrito sobre Éter/Tênue é proibido */
.ab-stage.claro .ab-dl{ background:var(--later-lastro); color:var(--later-eter); }

/* Régua de formatos — abre no lugar do botão, ancorada no mesmo canto.
   SVG sai do repositório; PNG e JPG são gerados na hora. */
.ab-formatos{
  position:absolute;
  right:20px; bottom:20px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:20px;
  background:var(--later-atrito);
  color:var(--later-lastro);
  border-radius:10px;
  padding:11px 18px;
}
.ab-formatos[hidden]{ display:none; }
.ab-stage.claro .ab-formatos{ background:var(--later-lastro); color:var(--later-eter); }

.ab-fmt{
  font-family:var(--font-brand-display);
  font-size:15px;
  font-weight:500;
  letter-spacing:.01em;
  color:inherit;
  background:none;
  border:none;
  padding:0 0 2px;
  border-bottom:1.5px solid currentColor;
  cursor:pointer;
  transition:opacity .15s ease;
}
.ab-fmt:hover{ opacity:.6; }
.ab-fmt:disabled{ opacity:.5; cursor:default; }

.ab-fechar{
  display:flex; align-items:center; justify-content:center;
  width:18px; height:18px;
  padding:0;
  background:none; border:none;
  color:inherit;
  cursor:pointer;
  transition:opacity .15s ease;
}
.ab-fechar:hover{ opacity:.6; }
.ab-fechar .icon{ width:15px; height:15px; stroke-width:1.8; stroke-linecap:round; }

/* Seletor de variantes */
.ab-switch{
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  padding-top:16px;
}
.ab-opt{
  font-family:inherit;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--text-dim);
  background:none;
  border:none;
  padding:4px 0;
  cursor:pointer;
  transition:color .15s ease;
}
.ab-opt:hover{ color:var(--text-muted); }
.ab-opt[aria-pressed="true"]{ color:var(--text); font-weight:600; }

/* ==========================================================================
   TESTADOR DE FONTE
   ========================================================================== */

.tt-dica{
  font-family:var(--font-brand-label);
  font-size:9.5px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--text-dim);
  margin-bottom:10px;
}
.tt-baixar{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display);
  font-size:11px;
  font-weight:600;
  text-decoration:none; border-bottom:none;
  background:var(--later-atrito);
  color:var(--later-lastro);
  border-radius:18px;
  padding:6px 13px;
  transition:opacity .15s ease;
}
.tt-baixar:hover{ opacity:.85; color:var(--later-lastro); }
.tt-baixar .icon{ width:13px; height:13px; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.type-tester{
  margin-top:24px;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:var(--bg-card);
}
.tt-controls{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}
.tt-controls .tt-baixar{ margin-left:auto; }
.tt-ctrl{ display:flex; align-items:center; gap:10px; }
.tt-ctrl label{
  font-family:var(--font-brand-label);
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--text-dim);
}
.tt-ctrl output{
  font-size:11px;
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
  min-width:44px;
}
.tt-ctrl input[type="range"]{ width:110px; accent-color:var(--gold); }
.tt-ctrl select{
  font-family:inherit;
  font-size:11.5px;
  color:var(--text);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:4px;
  padding:5px 8px;
}
.tt-field{
  font-family:var(--font-brand-display);
  font-size:44px;
  font-weight:600;
  line-height:1.15;
  color:var(--text);
  padding:32px 20px 40px;
  outline:none;
  word-break:break-word;
}
.tt-field:focus{ background:rgba(255,225,72,.03); }

/* Bloco do disclaimer obrigatório — o texto exato, pronto para copiar.
   Fica junto da estrutura da carta porque é o passo final dela, não uma
   observação de estilo. */
.aviso-box{
  margin-top:24px;
  border:1px solid var(--gold-dim);
  border-radius:8px;
  background:var(--bg-card);
  overflow:hidden;
}
.av-topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:12px 18px;
  border-bottom:1px solid var(--line);
}
.av-r{
  font-family:var(--font-brand-label);
  font-size:10.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--gold);
}
.av-texto{
  font-family:var(--font-brand-texto);
  font-size:15px;
  line-height:1.7;
  color:var(--text);
  padding:20px 18px 0;
  margin:0;
  max-width:none;
}
.av-nota{
  font-size:12.5px;
  line-height:1.55;
  color:var(--text-dim);
  padding:14px 18px 18px;
  margin:0;
  max-width:none;
}

/* ==========================================================================
   CARTAS — grade das capas
   ========================================================================== */

/* row-gap:0 de propósito. O subgrid herda o gap do pai, e com 28px entre
   linhas o número, o título e a descrição ficavam soltos um do outro como
   se fossem blocos distintos. O respiro entre um card e o de baixo vem do
   .lc-desc, e o negativo no fim cancela a sobra do último par. */
.letter-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:auto auto auto auto;
  column-gap:28px;
  row-gap:0;
  margin-top:24px;
  margin-bottom:-56px;
}
@media (max-width: 700px){ .letter-grid{ grid-template-columns:1fr; } }

.letter-card{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 4;
  text-decoration:none;
  border-bottom:none;
}
.lc-cover{
  aspect-ratio:3/2;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  background:var(--bg-card);
}
.lc-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.letter-card:hover .lc-cover{ border-color:var(--gold-dim); }

.lc-num{
  font-family:var(--font-brand-label);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-dim);
  margin:16px 0 6px;
}
.lc-title{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  color:var(--text);
  line-height:1.25;
  margin-bottom:6px;
}
.letter-card:hover .lc-title{ color:var(--gold); }
.lc-desc{
  font-size:13px;
  color:var(--text-muted);
  line-height:1.45;
  padding-bottom:56px;
}

/* ==========================================================================
   ACESSOS — cards de atalho
   ========================================================================== */

.access-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  /* ícone · vão elástico · nome · descrição · link */
  grid-template-rows:auto 1fr auto auto auto;
  gap:20px;
  margin-top:24px;
}
@media (max-width: 700px){ .access-grid{ grid-template-columns:1fr; } }

.access-card{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 5;
  min-height:180px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg-card);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:border-color .15s ease, background .15s ease;
}
.access-card:hover{ border-color:var(--gold-dim); background:#141312; }
.ac-icon{
  width:34px; height:34px;
  color:var(--gold);
  grid-row:1;
}
.ac-icon .icon{ width:100%; height:100%; stroke-width:1.4; }
.ac-name{
  grid-row:3;
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  color:var(--text);
  margin:0 0 5px;
}
.ac-desc{
  grid-row:4;
  font-size:13px;
  color:var(--text-muted);
  line-height:1.45;
  margin-bottom:14px;
}
.ac-url{
  grid-row:5;
  align-self:end;
  justify-self:start;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--gold);
}
.access-card.pendente .ac-url{
  color:var(--text-dim);
  border:1px dashed var(--line);
  border-radius:20px;
  padding:3px 10px;
  align-self:flex-start;
}
.access-card.pendente:hover{ border-color:var(--line); background:var(--bg-card); }

/* ==========================================================================
   CAPA — abertura sangrada, 900px
   Sai do recuo do main com margem negativa: é a única peça que encosta na
   borda da janela, e é isso que a separa de todo o resto do documento.
   ========================================================================== */

.capa{
  position:relative;
  height:900px;
  margin:0 -112px 0;
  overflow:hidden;
  isolation:isolate;
  display:flex;
}
@media (max-width: 1180px){ .capa{ margin:0 -64px; } }
@media (max-width: 900px){ .capa{ margin:0 -24px; height:640px; } }

/* A imagem já vem com a luz, as faixas e o grão. O degradê em CSS que
   estava aqui era aproximação enquanto o arquivo não existia. */
.capa-fundo{
  position:absolute;
  inset:0;
  background:var(--later-lastro) url("../img/capa-abertura.jpg") right bottom/cover no-repeat;
}

.capa-corpo{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:0 112px 72px;
  padding-top:clamp(280px, 42%, 420px);
}
@media (max-width: 1180px){ .capa-corpo{ padding-left:64px; padding-right:64px; } }
@media (max-width: 900px){ .capa-corpo{ padding:200px 24px 40px; } }

/* A frase de abertura, com o marcador no mesmo registro dos ( 01 ) do método */
.capa-frase{
  display:flex;
  gap:34px;
  max-width:720px;
}
@media (max-width: 700px){ .capa-frase{ flex-direction:column; gap:14px; } }
.capa-marcador{
  font-family:var(--font-brand-label);
  font-size:13px;
  color:var(--text);
  white-space:nowrap;
  padding-top:2px;
}
.capa-frase p{
  font-family:var(--font-brand-texto);
  font-size:17px;
  line-height:1.55;
  color:var(--text);
  margin:0;
  max-width:none;
}

.capa-rodape{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
  margin-top:64px;
}

.capa-titulo{
  font-family:var(--font-brand-display);
  font-size:clamp(52px, 8.6vw, 104px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.025em;
  color:var(--text);
  margin:0;
}
.capa-titulo .dim{ color:var(--text-dim-capa); }

.capa-acao{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-brand-label);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text);
  text-decoration:none;
  border-bottom:none;
  padding-bottom:14px;
  transition:color .15s ease;
}
.capa-acao:hover{ color:var(--gold); }
.capa-acao .icon{ width:18px; height:18px; stroke-width:1.4; }

/* ==========================================================================
   ATALHOS (abertura) — entradas rápidas para dentro do manual
   ========================================================================== */

.shortcut-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
}
@media (max-width: 700px){ .shortcut-grid{ grid-template-columns:1fr; } }

.shortcut{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:22px 20px 24px;
  background:var(--bg);
  text-decoration:none;
  border-bottom:none;
  transition:background .15s ease;
}
.shortcut:hover{ background:var(--bg-card); }
/* Ícone no lugar do número da seção: o número repetia o índice sem dizer
   o que o atalho faz, e três dos seis atalhos caíam na mesma seção 05. */
.sc-icon{
  display:flex;
  width:22px; height:22px;
  color:var(--gold);
  margin-bottom:12px;
}
.sc-icon .icon{ width:100%; height:100%; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.shortcut:hover .sc-icon{ color:var(--gold); }
.sc-t{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  color:var(--text);
  margin-bottom:5px;
}
.shortcut:hover .sc-t{ color:var(--gold); }
.sc-d{
  font-size:12.5px;
  color:var(--text-muted);
  line-height:1.45;
}

/* ==========================================================================
   MÉTODO SCALE™ — cards no layout do site altherscale.com
   Régua fina à esquerda, número no topo, texto embaixo. No hover entra um
   brilho quente recortado pelo card. O card NÃO ganha fundo próprio: fora
   da luz ele continua sendo o preto da página.
   ========================================================================== */

.scale-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  /* número · vão elástico · título · descrição — as quatro linhas valem
     para todos os cards, então os três textos alinham entre colunas */
  grid-template-rows:auto 1fr auto auto;
  min-height:360px;
  margin-top:32px;
}
@media (max-width: 900px){ .scale-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width: 620px){ .scale-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 420px){ .scale-grid{ grid-template-columns:1fr; } }

.scale-card{
  position:relative;
  overflow:clip;                 /* o brilho não vaza para o card vizinho */
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 4;
  padding:22px 14px 24px 16px;
  background:transparent;        /* o fundo é o da página, em repouso e no hover */
  border-left:1px solid rgba(242,239,233,.2);
}

/* A luz entra pelo canto superior direito e desce pelo card.
   O recorte duro na borda é o overflow do .scale-card. */
.sc-glow{
  position:absolute;
  inset:-22% -28% -12% -18%;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s ease;
  --luz: radial-gradient(58% 44% at 88% 30%,
    #FFFFFF 0%,
    rgba(255,255,255,.72) 26%,
    rgba(255,255,255,.34) 48%,
    rgba(255,255,255,.10) 66%,
    transparent 80%);
  background:radial-gradient(58% 44% at 88% 30%,
    var(--later-atrito) 0%,
    rgba(255,225,72,.72) 26%,
    rgba(214,186,62,.34) 48%,
    rgba(140,122,42,.10) 66%,
    transparent 80%);
  filter:blur(26px);
}
/* Granulado só dentro da luz. Sem a máscara, o overlay pinta o card
   inteiro e o hover vira um retângulo cinza sobre o preto da página. */
.sc-glow::after{
  content:"";
  position:absolute;
  inset:0;
  mix-blend-mode:overlay;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image:var(--luz);
  mask-image:var(--luz);
}
.scale-card:hover .sc-glow{ opacity:.85; }

/* Conteúdo acima do brilho */
.sc-num,
.sc-titulo,
.sc-desc{ position:relative; z-index:1; }
.sc-num{ grid-row:1; }
.sc-titulo{ grid-row:3; }
.sc-desc{ grid-row:4; }

.sc-num{
  font-family:var(--font-brand-display);
  font-size:clamp(22px, 2.6vw, 30px);
  font-weight:400;
  line-height:1;
  letter-spacing:.02em;
  color:rgba(242,239,233,.5);
  transition:color .35s ease;
}
.scale-card:hover .sc-num{ color:var(--later-atrito); }

.sc-titulo{
  font-family:var(--font-brand-display);
  font-size:18px;
  font-weight:400;
  line-height:1.2;
  color:var(--text);
  margin-bottom:16px;
}
.sc-desc{
  font-family:var(--font-brand-texto);
  font-size:13.5px;
  line-height:1.5;
  color:var(--text-muted);
  margin-bottom:0;
  max-width:none;
}
.scale-card:hover .sc-desc{ color:var(--text); }

/* ==========================================================================
   FORMAS DERIVADAS — ampulheta, X, diamante, triângulo
   Vetores da apresentação de marca. Preenchidas, não traçadas; a altura é
   fixa para as quatro terem o mesmo peso visual apesar dos viewBox diferentes.
   ========================================================================== */

.card.com-forma{ padding-top:26px; }

.cf-forma{
  display:flex;
  align-items:center;
  justify-content:center;
  height:46px;
  margin-bottom:22px;
}
.forma{
  height:100%;
  width:auto;
  fill:var(--text-muted);
  stroke:none;
}
/* O ponto central do X é o encontro das forças: destaca do resto da forma */
.forma .ponto{ fill:var(--later-eter); }

/* Bloco de licença de fonte — regra jurídica, não estilística */
.card.licenca{ margin-top:22px; max-width:640px; }
.card.licenca h4{ font-size:16px; margin-bottom:12px; }
.card.licenca p{ font-size:14px; line-height:1.55; }

/* ==========================================================================
   USO INDEVIDO — cada erro é demonstrado no logo real, não descrito
   O defeito é aplicado por CSS sobre o arquivo aprovado; nada aqui é uma
   imagem falsa do logo. O risco usa Rombo, que é cor de apoio, não de marca.
   ========================================================================== */

.misuse-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:36px 28px;
  margin-top:28px;
}
@media (max-width: 620px){ .misuse-grid{ grid-template-columns:1fr; } }

/* subgrid: a legenda ocupa a mesma altura nos dois cards da linha, então
   os painéis começam no mesmo y mesmo com legendas de 1 ou 2 linhas */
.misuse{
  margin:0;
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 2;
  gap:12px;
}
.misuse .ms-panel{ order:1; }
.misuse .ms-cap{ order:2; }
.ms-cap{
  font-size:13px;
  color:var(--text-muted);
  line-height:1.45;
  margin:0;
  align-self:start;
}
.ms-cap b{
  font-weight:400;
  color:var(--rombo);
  font-variant-numeric:tabular-nums;
  margin-right:4px;
}

.ms-panel{
  position:relative;
  aspect-ratio:16/10;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px;
  overflow:hidden;
  background:var(--later-eter);
  border-radius:4px;
}
.ms-panel.escuro{ background:var(--later-lastro); border:1px solid var(--line); }
.ms-logo{ width:76%; max-width:280px; height:auto; display:block; }

/* Risco na diagonal, canto a canto, com espessura constante */
.ms-risco{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.ms-risco line{
  stroke:var(--rombo);
  stroke-width:1.5;
  vector-effect:non-scaling-stroke;
}

/* ---- os defeitos, aplicados ao arquivo aprovado ---- */
.ms-contorno{
  filter:drop-shadow(1.5px 0 0 var(--later-atrito)) drop-shadow(-1.5px 0 0 var(--later-atrito))
         drop-shadow(0 1.5px 0 var(--later-atrito)) drop-shadow(0 -1.5px 0 var(--later-atrito));
}
.ms-sombra{ filter:drop-shadow(7px 9px 5px rgba(0,0,0,.5)); }
.ms-inclinado{ transform:rotate(-11deg); }
.ms-distorcido{ transform:scaleX(1.55); }
.ms-cor-errada{ filter:hue-rotate(215deg) saturate(1.5); }
.ms-baixo-contraste{ /* Atrito sobre fundo claro: o erro é a combinação */ }
.ms-sobre-foto{ position:relative; z-index:1; }
.ms-panel .ms-foto{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; max-width:none; border-radius:4px;
}
/* Símbolo isolado nos cards de uso indevido: é quadrado, pede menos largura */
.ms-logo.ms-simbolo{ width:30%; max-width:130px; }

/* ==========================================================================
   USO INDEVIDO DE COR — mini-peça dentro do painel
   Erro de cor quase nunca está num elemento isolado: está na relação entre
   eles. Por isso cada card monta uma peça mínima (rótulo, título, acento)
   e quebra uma regra por vez.
   ========================================================================== */

.peca{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:20px 22px;
}
.pc-rotulo{
  font-family:var(--font-brand-label);
  font-size:9px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.pc-titulo{
  font-family:var(--font-brand-display);
  font-size:17px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.01em;
  max-width:82%;
}
.pc-rodape{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pc-acento{ width:34px; height:8px; border-radius:2px; }
.pc-legenda{
  font-family:var(--font-brand-display);
  font-size:10px;
}

/* Tira de tons alterados */
.tons{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
}
.tons div{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:12px;
  font-family:var(--font-brand-label);
  font-size:8.5px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(0,0,0,.5);
}
/* Dois acentos lado a lado, quando o erro é justamente a convivência deles */
.pc-duplo{ display:flex; gap:6px; align-items:center; }

/* ==========================================================================
   PROMPT DE CAPA — bloco editável
   A parte travada da marca é texto corrido; só os slots são editáveis.
   Quem preenche não deve conseguir mexer na direção de arte por acidente.
   ========================================================================== */

.prompt-box{
  margin-top:22px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg-card);
  overflow:hidden;
}
.pb-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
}
.pb-titulo{
  font-family:var(--font-brand-label);
  font-size:10.5px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--text-dim);
}
.pb-acoes{ display:flex; gap:8px; }
.pb-btn{
  font-family:inherit;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-muted);
  background:none;
  border:1px solid var(--line);
  border-radius:20px;
  padding:5px 12px;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.pb-btn:hover{ color:var(--gold); border-color:var(--gold-dim); }
.pb-btn.primario{
  background:var(--later-atrito);
  border-color:var(--later-atrito);
  color:var(--later-lastro);
  font-weight:600;
}
.pb-btn.primario:hover{ opacity:.85; color:var(--later-lastro); }
.pb-btn.copiado{ background:var(--later-rastro); border-color:var(--later-rastro); color:var(--later-eter); }

/* O bloco inteiro é editável: o prompt travado deixa de servir dependendo
   do assunto da carta. Só o destaque muda de cor. */
.pb-texto{
  font-family:var(--font-brand-texto);
  font-size:14.5px;
  line-height:1.85;
  color:var(--text-muted);
  padding:20px 18px;
  margin:0;
  max-width:none;
  cursor:text;
  caret-color:var(--gold);
}
/* Sem outline no clique, mas o anel de teclado da base.css continua valendo:
   por isso :focus e não :focus-visible aqui. */
.pb-texto:focus{
  outline:none;
  color:var(--text);
  background:rgba(255,225,72,.02);
}
.pb-texto:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* Destaque — o que muda a cada carta. Marcação, não trava. */
.pb-campo{
  display:inline;
  color:var(--text);
  background:rgba(255,225,72,.10);
  border-bottom:1px solid var(--gold-dim);
  border-radius:2px;
  padding:1px 6px;
  cursor:text;
}
.pb-campo:hover{ background:rgba(255,225,72,.16); }
.pb-campo:empty::before{
  content:attr(data-dica);
  color:var(--text-dim);
  font-style:italic;
}

.pb-nota{
  font-size:12.5px;
  line-height:1.55;
  color:var(--text-dim);
  padding:0 18px 18px;
  margin:0;
  max-width:none;
}

/* Critérios da direção de arte */
.criterios{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:auto auto;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  margin-top:22px;
}
@media (max-width: 620px){ .criterios{ grid-template-columns:1fr; } }
.criterio{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 2;
  gap:5px;
  background:var(--bg);
  padding:16px 18px 18px;
}
.cr-k{
  font-family:var(--font-brand-label);
  font-size:9.5px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gold);
}
.cr-v{ font-size:13px; line-height:1.5; color:var(--text-muted); }

/* ==========================================================================
   ANTES E DEPOIS — a transformação que a marca promete, lado a lado
   ========================================================================== */

.antes-depois{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  margin-top:24px;
  max-width:720px;
}
@media (max-width: 620px){ .antes-depois{ grid-template-columns:1fr; } }

.ad-col{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 2;
  gap:14px;
  background:var(--bg);
  padding:20px 22px 24px;
}
.ad-col.depois{ background:var(--bg-card); }
.ad-k{
  font-family:var(--font-brand-label);
  font-size:9.5px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--text-dim);
}
.ad-col.depois .ad-k{ color:var(--gold); }
.ad-lista{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.ad-lista li{
  font-size:13.5px;
  line-height:1.45;
  color:var(--text-muted);
  padding-left:16px;
  position:relative;
}
.ad-lista li::before{
  content:"";
  position:absolute;
  left:0; top:8px;
  width:6px; height:1px;
  background:var(--text-dim);
}
.ad-col.depois .ad-lista li{ color:var(--text); }
.ad-col.depois .ad-lista li::before{ background:var(--gold-dim); }

/* ==========================================================================
   PALETAS — banda de cor com rampa de tons, escala neutra e paleta de apoio
   ========================================================================== */

.paleta{ margin-top:64px; }
/* A banda muda de cor conforme o degrau escolhido */
.pal-banda{
  position:relative;
  transition:background .18s ease;
  height:248px;
  border-radius:6px 6px 0 0;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  padding:16px 18px;
}
.pal-aa{
  font-family:var(--font-brand-display);
  font-size:26px;
  font-weight:600;
  line-height:1;
}
/* Rampa colada na base da banda, do tom mais escuro ao mais claro */
.pal-rampa{
  position:absolute;
  left:0; right:0; bottom:0;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  height:46px;
}
.pal-degrau{
  display:block;
  border:none;
  padding:0;
  cursor:pointer;
  position:relative;
  transition:transform .12s ease;
}
.pal-degrau:hover{ transform:scaleY(1.18); z-index:1; }
.pal-degrau:focus-visible{ outline:2px solid var(--later-eter); outline-offset:-3px; z-index:2; }
/* Marca o degrau em exibição na banda */
.pal-degrau.ativo::after{
  content:"";
  position:absolute;
  left:50%; bottom:6px;
  width:5px; height:5px;
  margin-left:-2.5px;
  border-radius:50%;
  background:var(--aa);
  opacity:.7;
}

.pal-valor{ display:flex; align-items:baseline; gap:12px; }
.pal-token{
  font-family:var(--font-brand-label);
  font-size:10px;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--text-dim);
}
.pal-meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  /* 23 + 1px da régua = os 24 da cota */
  padding:23px 2px 0;
  border-top:1px solid var(--line);
}
.pal-nome{
  font-family:var(--font-display);
  font-size:14px;
  font-weight:600;
  color:var(--text);
}
.pal-conceito{
  font-size:13px;
  line-height:1.5;
  color:var(--text-muted);
  max-width:560px;
  margin:12px 0 0;
}
/* Hex clicável, sem virar pílula */
.copy-btn{
  font-family:inherit;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-muted);
  background:none;
  border:1px solid var(--line);
  border-radius:20px;
  padding:4px 10px;
  cursor:pointer;
  flex-shrink:0;
  transition:color .15s ease, border-color .15s ease;
}
.copy-btn:hover{ color:var(--gold); border-color:var(--gold-dim); }
.copy-btn.copiado{ color:var(--gold); border-color:var(--gold-dim); }

.copy-btn.simples{
  border:none;
  padding:0;
  font-size:11px;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}
.copy-btn.simples:hover{ border:none; }

/* Par de âncoras (Lastro e Éter) lado a lado */
.pal-par{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:64px;
}
@media (max-width: 620px){ .pal-par{ grid-template-columns:1fr; } }
.pal-par .pal-banda{ height:200px; border:1px solid var(--line); }
.pal-par .pal-rampa{ display:none; }

/* ---------- neutras ---------- */
.neutras-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:24px;
}
@media (max-width: 620px){ .neutras-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 420px){ .neutras-grid{ grid-template-columns:1fr; } }
.neutro-card{ }
.neutro-chip{
  height:104px;
  border:1px solid var(--line);
  border-radius:5px;
  display:flex;
  align-items:center;
  padding-left:12px;
}
.neutro-chip span{
  font-family:var(--font-brand-display);
  font-size:17px;
  font-weight:600;
}
.neutro-meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  padding-top:8px;
}
.neutro-meta .nm-k{
  font-family:var(--font-brand-label);
  font-size:10px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-muted);
}

/* ---------- paleta de apoio ---------- */
.apoio-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:auto auto auto;
  gap:34px 26px;
  margin-top:24px;
}
@media (max-width: 620px){ .apoio-grid{ grid-template-columns:1fr; } }
/* Cada cor de apoio é uma banda como as de marca, só que mais baixa */
.apoio-grid .paleta{
  margin-top:0;
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 3;
  gap:0;
}
.paleta.compacta .pal-banda{ height:150px; }
.paleta.compacta .pal-rampa{ height:38px; }
/* ==========================================================================
   DOWNLOAD DAS FONTES — card por família, com a fonte mostrando a si mesma
   ========================================================================== */

.fontes-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:auto auto auto auto;
  gap:18px;
  margin-top:26px;
}
@media (max-width: 820px){ .fontes-grid{ grid-template-columns:1fr; } }

.fonte-card{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 4;
  gap:14px;
  padding:22px 22px 24px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg-card);
  transition:border-color .15s ease;
}
.fonte-card:hover{ border-color:var(--gold-dim); }

.fc-papel{
  font-family:var(--font-brand-label);
  font-size:10px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gold);
}
.fc-nome{
  font-size:26px;
  font-weight:600;
  line-height:1.1;
  color:var(--text);
}
.fc-amostra{
  font-size:30px;
  line-height:1.15;
  color:var(--text-dim);
  overflow:hidden;
  white-space:nowrap;
}
.fc-rodape{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.fc-origem{
  font-family:var(--font-brand-label);
  font-size:9.5px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--text-dim);
}
.fc-baixar{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-size:12.5px;
  font-weight:600;
  text-decoration:none;
  border-bottom:none;
  background:var(--later-atrito);
  color:var(--later-lastro);
  border-radius:20px;
  padding:8px 16px;
  transition:opacity .15s ease;
}
.fc-baixar:hover{ opacity:.85; color:var(--later-lastro); }
.fc-baixar .icon{ width:15px; height:15px; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ==========================================================================
   TÍTULO DE BLOCO — nível entre o subtópico (.sub-title) e o rótulo de
   assunto (.register-label). Usado onde o bloco é grande o bastante para
   pedir cabeçalho próprio: paletas de cor e escalas tipográficas.
   ========================================================================== */

.bloco-titulo{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--text);
  margin-top:72px;
  margin-bottom:10px;
}
.bloco-titulo:first-of-type{ margin-top:16px; }

.bloco-intro{
  font-size:13px;
  line-height:1.6;
  color:var(--text-muted);
  max-width:460px;
  margin:0;
}

/* ==========================================================================
   ÁREA DE PROTEÇÃO E REDUÇÃO — painéis grandes, no lugar de descrição textual
   ========================================================================== */

.diag-painel{
  position:relative;
  border-radius:6px;
  background:var(--bg-card);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:56px 40px;
  min-height:280px;
  margin-top:20px;
}
@media (max-width: 700px){ .diag-painel{ min-height:200px; padding:36px 20px; } }
/* O bloco de redução mostra tamanhos reais em px, então encolher as imagens
   falsearia a demonstração. Abaixo de 700px o painel rola por dentro: as
   medidas ficam corretas e a página para de arrastar de lado. */
@media (max-width: 700px){
  .diag-painel{ overflow-x:auto; justify-content:flex-start; }
  .diag-painel > *{ flex-shrink:0; }
}
/* O diagrama vem pronto como SVG, com grade e cantos já desenhados.
   364px = 70% da largura anterior: o painel cotado ficava largo demais
   e a assinatura competia com o logo real do resto da página. */
.diag-img{
  display:block;
  width:100%;
  max-width:364px;
  height:auto;
}

.diag-legenda{
  font-size:12.5px;
  color:var(--text-dim);
  line-height:1.5;
  margin:12px 0 0;
  max-width:520px;
}


/* Escada de redução */
.reducao{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:26px;
  width:100%;
  max-width:430px;
}
.red-linha{ display:flex; align-items:center; gap:16px; }
.red-linha img{ display:block; height:auto; }
.red-medida{
  font-family:var(--font-brand-label);
  font-size:10px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--text-dim);
  white-space:nowrap;
}
.red-linha.minimo .red-medida{ color:var(--gold); }

/* ==========================================================================
   ARQUITETURA DE PRODUTOS — três blocos, com o papel de cada nome à vista
   ========================================================================== */

.prod-grupo{ margin-top:36px; }
.prod-grupo-k{
  font-family:var(--font-brand-label);
  font-size:10px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gold);
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  margin-bottom:0;
}
.prod{
  display:grid;
  grid-template-columns:230px 1fr;
  gap:6px 28px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
@media (max-width: 700px){ .prod{ grid-template-columns:1fr; } }
.prod-nome{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  color:var(--text);
}
.prod-desc{
  font-size:13.5px;
  line-height:1.5;
  color:var(--text-muted);
}
.prod-marca{
  font-family:var(--font-brand-label);
  font-size:9px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-dim);
  margin-top:3px;
}
.prod-marca.com{ color:var(--gold-dim); }