/* Alameda Marketing · páginas /marca (brandbook) e /design-system.
   Este arquivo só arruma a DOCUMENTAÇÃO (grades, molduras, rótulos). Os exemplos usam as classes do próprio site
   (v2.css e v2-paginas.css), sem cópia: se o site mudar, o exemplo muda junto. Só é carregado nestas duas páginas. */
.guia-secao{scroll-margin-top:calc(var(--topo-h) + 16px)}
.guia-secao>.interno>*+*{margin-top:clamp(28px,3.4vw,48px)}
.guia-secao .titulo-secao{max-width:22ch}
.guia-bloco{scroll-margin-top:calc(var(--topo-h) + 16px)}
.guia-bloco>*+*{margin-top:18px}
.guia-titulo{font-family:var(--titulo);font-weight:400;font-size:clamp(24px,2.3vw,34px);line-height:1.12;letter-spacing:-.016em;font-variation-settings:'opsz' 72}
.guia-texto{max-width:72ch;color:var(--texto-2)}
.guia-texto strong{color:var(--texto);font-weight:700}
.guia-texto>*+*{margin-top:16px}
.guia-texto>h3{margin-top:34px;color:var(--texto)}
.guia-texto .tabela-rolagem{color:var(--texto)}
.guia-regras.guia-regras--num{list-style:decimal}
.guia-regras .guia-regras{margin-top:8px}
.guia-regras{display:grid;gap:8px;max-width:76ch;padding-left:1.2em;list-style:disc;color:var(--texto-2)}
.guia-regras li::marker{color:var(--realce)}
.guia-regras strong{color:var(--texto)}
.guia-codigo{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;padding:.12em .42em;border-radius:6px;background:rgba(20,27,24,.08);overflow-wrap:anywhere}
.tema-escuro .guia-codigo,.tema-verde .guia-codigo{background:rgba(239,234,224,.12)}

/* Tabelas da documentação: no celular rolam de lado (dentro de .tabela-rolagem) em vez de espremer as colunas. */
.guia-secao .tabela{min-width:700px}
.guia-secao .guia-texto .tabela{min-width:520px}
.guia-secao .tabela-rolagem--estreita .tabela{min-width:460px}
.tabela .guia-codigo{white-space:nowrap;overflow-wrap:normal}

/* Índice da página: usa .outros-servicos do site */
.guia-indice{margin-top:0}

/* Amostras de cor */
.guia-cores{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.guia-cor{display:grid;border-radius:var(--raio-p);overflow:hidden;border:1px solid var(--divisa);background:var(--cartao)}
.guia-cor__chapa{position:relative;height:96px}
.guia-cor__chapa i{position:absolute;inset:0}
.guia-cor__dados{display:grid;gap:2px;padding:12px 14px;font-size:14px}
.guia-cor__dados strong{font-size:15px}
.guia-cor__dados span{color:var(--texto-2);overflow-wrap:anywhere}

/* Palco de exemplo: moldura com o fundo do tema, para mostrar o componente como ele aparece no site */
.guia-palco{display:grid;gap:22px;justify-items:start;align-items:start;padding:clamp(20px,2.6vw,36px);border-radius:var(--raio);border:1px solid var(--divisa);background:var(--fundo);color:var(--texto);min-width:0}
.guia-palco--cheio{justify-items:stretch}
.guia-palco--linha{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.guia-palco>*{min-width:0;max-width:100%}
/* Peças do brandbook: moldura com o fundo do tema da peça (escuro ou claro) e a legenda embaixo.
   logo = altura contida, centralizada, com respiro; desenho e foto = ocupam a largura da moldura. */
.guia-figura{display:grid;grid-template-rows:1fr auto;margin:0;min-width:0;border-radius:var(--raio);overflow:hidden;border:1px solid var(--divisa);background:var(--fundo);color:var(--texto)}
.guia-figura__quadro{display:grid;place-items:center;min-width:0}
.guia-figura img{display:block;width:100%;height:auto}
.guia-figura--logo .guia-figura__quadro{padding:clamp(28px,4vw,56px) clamp(20px,3vw,40px)}
.guia-figura--logo img{width:auto;max-width:100%;height:clamp(84px,11vw,140px)}
.guia-figura figcaption{padding:12px 16px;border-top:1px solid var(--divisa);font-size:14px;line-height:1.4;color:var(--texto-2)}
/* O desenho do tamanho mínimo mostra os tamanhos reais com 1040 px de largura: a moldura não passa disso. */
.guia-real{max-width:1042px}
.guia-rotulo{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-2)}
.guia-dupla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.guia-tripla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}

/* Amostras de tipografia */
.guia-tipos{display:grid}
.guia-tipo{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:14px 40px;align-items:end;padding:26px 0;border-top:1px solid var(--divisa)}
.guia-tipo:last-child{border-bottom:1px solid var(--divisa)}
.guia-tipo__amostra{min-width:0;overflow:hidden}
.guia-tipo__amostra>*{max-width:none;margin:0}
.guia-tipo__dados{display:grid;gap:3px;font-size:13px;color:var(--texto-2)}
.guia-tipo__dados strong{font-size:15px;color:var(--texto)}

/* Amostras de raio, espaço e movimento */
.guia-formas{display:flex;flex-wrap:wrap;gap:18px}
.guia-forma{display:grid;gap:10px;justify-items:start;font-size:13px;color:var(--texto-2)}
.guia-forma i{display:block;width:120px;height:84px;background:var(--cartao);border:1px solid var(--texto-2)}
.guia-regua{display:grid;gap:10px;font-size:13px;color:var(--texto-2)}
.guia-regua i{display:block;height:14px;border-radius:4px;background:var(--realce)}

/* Espaço reservado (brandbook): conteúdo que ainda vem do Designer */
.guia-vaga{display:grid;place-items:center;align-content:center;gap:8px;min-height:190px;padding:24px;border-radius:var(--raio);border:2px dashed var(--texto-3);color:var(--texto-2);text-align:center;font-size:15px}
.guia-vaga strong{color:var(--texto);font-size:16px}
.guia-vaga small{font-size:13px;max-width:44ch}
.guia-vaga--escuro{background:var(--carvao);color:var(--claro-2);border-color:rgba(239,234,224,.4)}
.guia-vaga--escuro strong{color:var(--claro)}
.guia-vaga--escuro .guia-codigo{background:rgba(239,234,224,.12)}
.guia-vaga--claro{background:var(--pedra);color:var(--escuro-2);border-color:rgba(20,27,24,.4)}
.guia-vaga--claro strong{color:var(--escuro)}
.guia-vaga--claro .guia-codigo{background:rgba(20,27,24,.08)}
.guia-vaga--alto{min-height:300px}
.guia-vagas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}

@media (max-width:900px){
  .guia-dupla,.guia-tripla{grid-template-columns:1fr}
  .guia-tipo{grid-template-columns:1fr;align-items:start}
}