/* =========================================================
   /identidade — pecas que so existem no manual.
   Todos os valores vem dos tokens de styles.css. Nenhuma cor
   ou tamanho novo e declarado aqui.
   ========================================================= */

.manual-intro{max-width:66ch;}
.ficha{
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);
  margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--fio);
}
.ficha div{display:flex;flex-direction:column;gap:2px;}
.ficha dt{
  font-family:var(--display);font-size:12px;letter-spacing:.18em;
  color:var(--txt-low);text-transform:lowercase;
}
.ficha dd{margin:0;font-size:15px;color:var(--txt-hi);}

/* palco do logotipo */
.palco{
  background:var(--ink);border:1px solid var(--fio);border-radius:var(--r-card);
  display:grid;place-items:center;padding:clamp(40px,7vw,84px) var(--s3);
  margin-top:var(--s6);
}
.marca-grande{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,6vw,62px);letter-spacing:.28em;
  text-transform:uppercase;color:var(--txt-hi);text-indent:.28em;
}

.tracking-demo{display:grid;gap:var(--s2);margin-top:var(--s2);}
@media(min-width:800px){ .tracking-demo{grid-template-columns:repeat(3,1fr);} }
.tracking-demo figure{
  margin:0;background:var(--ink-3);border:1px solid var(--fio);
  border-radius:var(--r-card);padding:var(--s4) var(--s3);
  display:flex;flex-direction:column;gap:var(--s3);align-items:center;text-align:center;
}
.tracking-demo .amostra{
  font-family:var(--display);font-weight:700;font-size:22px;
  text-transform:uppercase;color:var(--txt-hi);
}
.tracking-demo figcaption{font-size:var(--t-rotulo);color:var(--txt-low);line-height:1.5;}
.tracking-demo .certo{border-color:var(--azul-500);}
.tracking-demo .certo figcaption{color:var(--azul-300);}

/* paleta */
.cores{display:grid;gap:var(--s2);margin-top:var(--s6);}
@media(min-width:640px){ .cores{grid-template-columns:repeat(2,1fr);} }
@media(min-width:960px){ .cores{grid-template-columns:repeat(3,1fr);} }
.cor{border:1px solid var(--fio);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;}
.cor .chapa{height:96px;display:flex;align-items:flex-end;padding:var(--s2);}
.cor .chapa span{font-family:var(--display);font-size:12px;letter-spacing:.14em;}
.cor .dados{padding:var(--s3);background:var(--ink-3);display:flex;flex-direction:column;gap:6px;flex:1;}
.cor .nome{
  font-family:var(--display);font-weight:500;font-size:15px;
  color:var(--txt-hi);text-transform:uppercase;letter-spacing:.02em;
}
.cor .hex{
  font-family:var(--display);font-size:14px;letter-spacing:.10em;color:var(--azul-300);
  font-variant-numeric:tabular-nums;background:none;border:0;padding:0;
  cursor:pointer;text-align:left;min-height:auto;transition:color .16s ease;
}
.cor .hex:hover{color:var(--txt-hi);}
.cor .uso{font-size:var(--t-rotulo);color:var(--txt-low);line-height:1.55;margin:0;}
.cor .razao{
  font-family:var(--display);font-size:12px;letter-spacing:.10em;color:var(--txt-low);
  font-variant-numeric:tabular-nums;padding-top:6px;
  border-top:1px solid var(--fio);margin-top:auto;
}
.cor .razao b{color:var(--txt-hi);font-weight:500;}

/* escala tipografica */
.escala{display:flex;flex-direction:column;margin-top:var(--s6);}
.degrau{
  display:grid;grid-template-columns:160px 1fr;gap:var(--s3);
  align-items:baseline;padding-block:var(--s4);border-bottom:1px solid var(--fio);
}
.degrau:first-child{border-top:1px solid var(--fio);}
@media(max-width:720px){ .degrau{grid-template-columns:1fr;gap:var(--s1);} }
.degrau .meta{display:flex;flex-direction:column;gap:2px;}
.degrau .token{font-family:var(--display);font-size:var(--t-rotulo);letter-spacing:.14em;color:var(--azul-300);}
.degrau .onde{font-size:var(--t-rotulo);color:var(--txt-low);line-height:1.45;}
.degrau .amostra{color:var(--txt-hi);overflow:hidden;}
.a-xl{font-family:var(--display);font-weight:400;font-size:var(--t-xl);line-height:.96;letter-spacing:-.03em;text-transform:uppercase;}
.a-l{font-family:var(--display);font-weight:600;font-size:var(--t-l);line-height:1.06;letter-spacing:-.02em;text-transform:uppercase;}
.a-num{font-family:var(--display);font-weight:700;font-size:var(--t-num);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.a-m{font-family:var(--display);font-weight:500;font-size:var(--t-m);line-height:1.16;text-transform:uppercase;}
.a-corpo{font-family:var(--body);font-weight:300;font-size:var(--t-corpo);line-height:1.6;color:var(--txt-mid);}
.a-btn{font-family:var(--display);font-weight:500;font-size:var(--t-btn);letter-spacing:.12em;text-transform:uppercase;}
.a-rotulo{font-family:var(--display);font-weight:500;font-size:var(--t-rotulo);letter-spacing:.18em;text-transform:lowercase;color:var(--azul-300);}

/* vitrine de botoes */
.vitrine{
  display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;
  background:var(--ink-3);border:1px solid var(--fio);
  border-radius:var(--r-card);padding:var(--s5) var(--s4);margin-top:var(--s6);
}
@media(max-width:480px){ .vitrine .btn{width:auto;} }

/* sim / nao */
.par{display:grid;gap:var(--s2);margin-top:var(--s6);}
@media(min-width:800px){ .par{grid-template-columns:1fr 1fr;} }
.lado{
  border:1px solid var(--fio);border-radius:var(--r-card);
  padding:var(--s4);background:var(--ink-3);
  display:flex;flex-direction:column;gap:var(--s2);
}
.lado.sim{border-color:rgba(126,154,194,.45);}
.lado.nao{border-color:var(--fio-forte);}
.selo{font-family:var(--display);font-weight:500;font-size:var(--t-rotulo);letter-spacing:.18em;text-transform:lowercase;}
.sim .selo{color:var(--azul-300);}
.nao .selo{color:var(--txt-low);}
.lado .frase{color:var(--txt-hi);font-size:var(--t-corpo);line-height:1.5;margin:0;}
.lado .porque{font-size:var(--t-rotulo);color:var(--txt-low);line-height:1.55;margin:0;}

/* regras que quebram */
.regras{list-style:none;margin:var(--s6) 0 0;padding:0;border-top:1px solid var(--fio);}
.regras li{
  display:grid;grid-template-columns:44px 1fr;gap:var(--s3);
  padding-block:var(--s4);border-bottom:1px solid var(--fio);align-items:start;
}
@media(max-width:560px){ .regras li{grid-template-columns:1fr;gap:var(--s1);} }
.regras .marca-x{font-family:var(--display);font-size:20px;line-height:1.2;color:var(--txt-low);}
.regras .txt strong{
  display:block;color:var(--txt-hi);font-family:var(--display);font-weight:500;
  font-size:var(--t-corpo);text-transform:uppercase;letter-spacing:.01em;margin-bottom:4px;
}
.regras .txt p{font-size:var(--t-corpo);color:var(--txt-mid);margin:0;}

/* tabela */
.rolagem{overflow-x:auto;border:1px solid var(--fio);border-radius:var(--r-card);margin-top:var(--s6);}
.rolagem table{border-collapse:collapse;width:100%;min-width:520px;}
.rolagem th,.rolagem td{text-align:left;padding:14px var(--s3);border-bottom:1px solid var(--fio);font-size:var(--t-rotulo);}
.rolagem th{
  font-family:var(--display);font-weight:500;letter-spacing:.18em;
  text-transform:lowercase;color:var(--azul-300);background:var(--ink-3);
}
.rolagem td{color:var(--txt-mid);}
.rolagem td:first-child{color:var(--txt-hi);font-family:var(--display);letter-spacing:.04em;}
.rolagem tr:last-child td{border-bottom:0;}

/* aviso de copia */
.aviso-copia{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(12px);
  background:var(--ink-4);border:1px solid var(--fio-forte);border-radius:var(--r-pill);
  color:var(--txt-hi);font-family:var(--display);font-size:var(--t-rotulo);
  letter-spacing:.10em;text-transform:lowercase;padding:10px 20px;
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:40;
}
.aviso-copia.ver{opacity:1;transform:translateX(-50%) translateY(0);}