/* ACR SCHOOL · pages/marca.css
   Exclusivo da página da marca, em :where(), especificidade zero.
   Aqui vive só o que existe por causa desta página: os cartões de
   assinatura, as fichas de cor, os espécimes de tipografia e os blocos de
   download. O resto é componente do tema. */

/* índice fixo: documento longo precisa de atalho por tema */
/* Índice em linha única, com rolagem lateral quando não couber. Onze temas
   quebrando em duas fileiras deixam um item órfão e parecem erro. Rolar de
   lado é o comportamento esperado de uma barra de atalhos. */
:where(.marca-indice){display:flex;flex-wrap:nowrap;gap:var(--acr-s2);
  padding:var(--acr-s4) 0;border-block:var(--acr-rule) solid var(--acr-line-3);
  overflow-x:auto;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
:where(.marca-indice) .acr-chip{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;
  padding:8px 13px;font-size:13px}
/* a barra de rolagem some quando tudo cabe, e fica discreta quando aparece */
:where(.marca-indice)::-webkit-scrollbar{height:4px}
:where(.marca-indice)::-webkit-scrollbar-thumb{background:var(--acr-line-3)}

/* ---------- assinaturas ---------- */
:where(.marca-logos){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--acr-gap)}
/* As duas amostras ocupam faixas iguais, com altura ditada pela arte e não
   por um mínimo chutado. Antes a faixa era alta demais para um lockup
   baixo, e sobrava vazio embaixo do desenho. */
:where(.marca-logo){display:grid;grid-template-rows:1fr 1fr auto;
  border:var(--acr-rule) solid var(--acr-line-3)}
:where(.marca-logo__art){display:grid;place-items:center;
  padding:clamp(20px,2.6vw,36px);min-height:132px;background:var(--acr-produto-bg)}
:where(.marca-logo__art)[data-fundo="escuro"]{background:var(--acr-azul)}
:where(.marca-logo__art) img{max-height:68px;width:auto;max-width:100%}
/* brasão isolado e lockups empilhados são mais altos que largos: ganham
   folga própria para não ficarem minúsculos ao lado dos horizontais */
:where(.marca-logo)[data-formato="alto"] .marca-logo__art img{max-height:104px}
:where(.marca-logo__pe){display:grid;gap:10px;padding:var(--acr-s3);
  border-top:var(--acr-rule) solid var(--acr-line-3);margin-top:auto}
:where(.marca-logo__n){font-family:var(--acr-font-display);font-weight:800;font-size:13px;
  letter-spacing:var(--acr-tracking-label);color:var(--acr-accent-text)}
:where(.marca-logo__pe) h3{font-family:var(--acr-font-display);font-weight:800;font-size:19px;
  text-transform:uppercase;line-height:1.05}
:where(.marca-logo__pe) p{font-family:var(--acr-font-ui);font-size:13px;color:var(--acr-ink-3);
  line-height:1.5}
/* A fila de arquivos é ação, não continuação do texto. Dentro do cartão de
   assinatura ela segue o ritmo apertado do cartão; solta no meio de um
   bloco de texto, precisa do mesmo respiro de um grupo de botões. */
:where(.marca-arquivos){display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
:where(.split-body) .marca-arquivos,
:where(.marca-fonte__ficha) .marca-arquivos{gap:10px;margin-top:var(--acr-s4)}

/* arte solta: brasão e selo não ficam em moldura de produto.
   A moldura existe para foto de catálogo, com fundo branco encostando na
   peça. Aqui a arte tem fundo transparente e deve respirar sobre o papel
   da própria seção, no tamanho em que o desenho se lê bem. */
:where(.marca-art){display:grid;place-items:center;padding:var(--acr-s5) 0}
:where(.marca-art) img{width:auto;max-width:100%;max-height:clamp(180px,24vw,280px)}
:where(.marca-art)[data-tamanho="selo"] img{max-height:clamp(220px,30vw,360px)}

/* aviso de rodapé de seção: régua dourada em cima, texto no respiro */
:where(.marca-nota){margin-top:var(--acr-s6);padding-top:var(--acr-s4);
  border-top:var(--acr-rule) solid var(--acr-line-3)}
:where(.marca-nota) p{max-width:72ch;margin:0;
  font-family:var(--acr-font-ui);font-size:14px;line-height:1.6;color:var(--acr-ink-2)}
:where(.marca-nota) a{color:var(--acr-ink);text-decoration:underline;
  text-decoration-color:var(--acr-accent);text-underline-offset:3px}

/* ---------- cores ---------- */
:where(.marca-cores){display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--acr-gap)}
:where(.marca-cor){border:var(--acr-rule) solid var(--acr-line-3)}
:where(.marca-cor__amostra){height:140px;border-bottom:var(--acr-rule) solid var(--acr-line-3)}
:where(.marca-cor__dados){padding:var(--acr-s3);display:grid;gap:8px}
:where(.marca-cor__dados) h3{font-family:var(--acr-font-display);font-weight:800;font-size:16px;
  text-transform:uppercase;line-height:1.1}
:where(.marca-cor__dados) dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0;
  font-family:var(--acr-font-ui);font-size:12px;color:var(--acr-ink-3)}
:where(.marca-cor__dados) dt{font-weight:600}
:where(.marca-cor__dados) dd{margin:0}
:where(.marca-cor__uso){font-family:var(--acr-font-ui);font-size:12px;color:var(--acr-ink-3);
  line-height:1.45;border-top:var(--acr-rule) solid var(--acr-line-2);padding-top:8px}

/* botão de copiar: aparece em cor, token e frase */
:where(.marca-copiar){font-family:var(--acr-font-nav);font-weight:var(--acr-weight-nav);
  font-size:13px;text-transform:uppercase;letter-spacing:var(--acr-tracking-nav);
  padding:7px 12px;cursor:pointer;color:var(--acr-ink-2);background:transparent;
  border:var(--acr-rule) solid var(--acr-line-3);
  transition:background-color var(--acr-dur-1) var(--acr-ease),
             color var(--acr-dur-1) var(--acr-ease),border-color var(--acr-dur-1) var(--acr-ease)}
:where(.marca-copiar):hover{background:var(--acr-ink);color:var(--acr-surface);
  border-color:var(--acr-ink)}
:where(.marca-copiar)[data-copiado]{background:var(--acr-accent);color:var(--acr-on-accent);
  border-color:var(--acr-accent)}

/* ---------- tipografia ---------- */
:where(.marca-fonte){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:var(--acr-gap);align-items:start;padding-block:var(--acr-s5);
  border-top:var(--acr-rule) solid var(--acr-line-3)}
:where(.marca-fonte__ficha) h3{font-family:var(--acr-font-display);font-weight:800;
  font-size:clamp(22px,2.4vw,30px);text-transform:uppercase;line-height:1.05}
:where(.marca-fonte__ficha) p{font-family:var(--acr-font-ui);font-size:14px;color:var(--acr-ink-2);
  line-height:1.6;margin-top:10px;max-width:40ch}
:where(.marca-espec){display:grid;gap:14px}
:where(.marca-espec) .alfabeto{font-size:clamp(26px,3.4vw,42px);line-height:1.15;word-break:break-word}
:where(.marca-espec) .amostra{line-height:1.3}
:where(.espec-display){font-family:var(--acr-font-display);font-weight:800;text-transform:uppercase}
:where(.espec-serif){font-family:var(--acr-font-text)}
:where(.espec-ui){font-family:var(--acr-font-ui)}

/* ---------- animações ----------
   Vídeo em moldura, com preload desligado: dez peças carregando sozinhas
   custariam megabytes a quem só veio ler o manual. */
:where(.marca-video){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--acr-gap)}
:where(.marca-video) figure{margin:0;display:grid;gap:12px}
:where(.marca-video) video{width:100%;aspect-ratio:1/1;background:var(--acr-azul);
  border:var(--acr-rule) solid var(--acr-line-3);display:block}
:where(.marca-video) figcaption{font-family:var(--acr-font-ui);font-size:13px;
  color:var(--acr-ink-3);line-height:1.5}

/* ---------- frases ---------- */
:where(.marca-frases){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--acr-s3)}
:where(.marca-frase){display:flex;align-items:center;justify-content:space-between;gap:var(--acr-s3);
  padding:var(--acr-s3);border:var(--acr-rule) solid var(--acr-line-3)}
:where(.marca-frase) span{font-family:var(--acr-font-text);font-size:17px;line-height:1.45}

/* ---------- certo e errado ---------- */
:where(.marca-regras){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--acr-gap)}
:where(.marca-regra){padding:var(--acr-s4);border-top:var(--acr-rule-accent) solid var(--acr-accent)}
:where(.marca-regra)[data-tipo="nao"]{border-top-color:var(--acr-line-3)}
:where(.marca-regra) h3{font-family:var(--acr-font-display);font-weight:800;font-size:18px;
  text-transform:uppercase;margin-bottom:var(--acr-s2)}
:where(.marca-regra) ul{display:grid;gap:10px;font-family:var(--acr-font-ui);font-size:14px;
  line-height:1.5;color:var(--acr-ink-2)}
:where(.marca-regra) li{padding-left:22px;position:relative}
:where(.marca-regra) li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;
  border:var(--acr-rule-accent) solid var(--acr-accent)}
:where(.marca-regra)[data-tipo="nao"] li::before{border-color:var(--acr-ink-3);
  transform:rotate(45deg)}

/* ---------- downloads ---------- */
:where(.marca-pacote){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--acr-gap)}
:where(.marca-pacote) article{display:flex;flex-direction:column;gap:10px;padding:var(--acr-s4);
  border:var(--acr-rule) solid var(--acr-line-3)}
:where(.marca-pacote) h3{font-family:var(--acr-font-display);font-weight:800;font-size:19px;
  text-transform:uppercase;line-height:1.05}
:where(.marca-pacote) p{font-family:var(--acr-font-ui);font-size:13px;color:var(--acr-ink-3);
  line-height:1.5}
:where(.marca-pacote) .acr-btn{margin-top:auto;align-self:flex-start}
:where(.marca-peso){font-family:var(--acr-font-ui);font-size:12px;color:var(--acr-ink-3)}

@media (max-width:900px){
  :where(.marca-logos),:where(.marca-frases),:where(.marca-regras){grid-template-columns:minmax(0,1fr)}
  :where(.marca-cores){grid-template-columns:repeat(2,minmax(0,1fr))}
  :where(.marca-video){grid-template-columns:minmax(0,1fr)}
  :where(.marca-pacote){grid-template-columns:minmax(0,1fr)}
  :where(.marca-fonte){grid-template-columns:minmax(0,1fr);gap:var(--acr-s4)}
}
@media (max-width:560px){
  :where(.marca-cores){grid-template-columns:minmax(0,1fr)}
}