/* Página de identidade visual. Sem header/menu/footer do site: cabeçalho e rodapé são próprios. */

.id-pagina{max-width:1240px;margin:0 auto;padding:40px 16px 80px}

/* Caixas geradas por JS (símbolo e setas): só embrulham o svg, sem alterar o fluxo. */
[data-simbolo],[data-icone]{display:inline-flex}

/* ============ Cabeçalho ============ */
.id-topo{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.id-marca{display:flex;align-items:center;gap:12px}
.id-marca-nome{font-size:20px;font-weight:600;letter-spacing:0.14em}
.id-versao{font-size:13px;color:var(--ink-2)}

/* ============ Abertura ============ */
.id-h1{margin:56px 0 0;font-size:clamp(40px,11vw,92px);font-weight:500;line-height:1.05;letter-spacing:-0.03em;max-width:15em}
.id-intro{margin:20px 0 0;max-width:34em;font-size:clamp(15px,3.6vw,18px);line-height:1.55;color:var(--ink-2);text-wrap:pretty}

/* ============ Esqueleto das seções ============ */
.id-filete{height:1px;background:var(--line);margin:56px 0 0}
.id-secao{margin-top:56px}
.id-num{margin:0;font-size:13px;color:var(--ink-2)}
.id-h2{margin:12px 0 0;font-size:clamp(28px,6.5vw,52px);font-weight:500;letter-spacing:-0.02em}
.id-txt{margin:16px 0 0;max-width:36em;font-size:clamp(15px,3.6vw,18px);line-height:1.55;color:var(--ink-2)}
.id-rotulo{font-size:13px;color:var(--ink-2)}
.id-rotulo--dark{color:var(--on-dark-2)}
.id-hr{height:1px;background:var(--line)}
.id-cards{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.id-cards--16{margin-top:16px}

/* ============ 01 · Símbolo e wordmark ============ */
.id-assinatura{flex:1 1 320px;background:var(--surface);border-radius:var(--r-card);padding:24px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.id-assinatura--dark{background:var(--ink)}
.id-lockup{display:flex;align-items:center;gap:14px}
.id-lockup [data-simbolo]{flex:none}
.id-lockup-nome{font-size:clamp(26px,6vw,34px);font-weight:600;letter-spacing:0.14em}
.id-assinatura--dark .id-lockup{color:var(--bg)}

.id-card{background:var(--surface);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column}
.id-card--200{flex:1 1 200px;gap:20px}
.id-card--260{flex:1 1 260px;gap:20px}
.id-card--260-12{flex:1 1 260px;gap:12px}
.id-escalas{display:flex;align-items:flex-end;gap:20px}
.id-protecao{border:1px dashed var(--line);border-radius:12px;padding:12px;display:inline-flex;align-self:flex-start}
.id-wordmark-txt{font-size:15px;line-height:1.55;color:var(--ink-2)}
.id-wordmark-txt strong{color:var(--ink);font-weight:500}

/* ============ 02 · Paleta (o hex vem dos tokens, lido em runtime) ============ */
.id-paleta{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));gap:12px;margin-top:32px}
.id-cor{background:var(--surface);border-radius:var(--r-tile);padding:16px;display:flex;flex-direction:column;gap:12px}
.id-cor-amostra{height:88px;border-radius:12px}
.id-cor-amostra--borda{border:1px solid var(--line)}
.id-cor-nome{font-size:15px;font-weight:500}
.id-cor-hex{font-size:14px;color:var(--ink-2)}
.id-nota{margin:20px 0 0;max-width:40em;font-size:15px;line-height:1.55;color:var(--ink-2)}

/* ============ 03 · Tipografia ============ */
.id-peso{flex:1 1 280px;background:var(--surface);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:8px}
.id-peso-amostra{font-size:32px;letter-spacing:-0.02em}
.id-peso-amostra--400{font-weight:400}
.id-peso-amostra--500{font-weight:500}
.id-peso-amostra--600{font-weight:600;letter-spacing:0.14em}

.id-escala{margin-top:16px;background:var(--surface);border-radius:var(--r-card);padding:clamp(20px,4vw,40px);display:flex;flex-direction:column;gap:28px}
.id-escala-item{display:flex;flex-direction:column;gap:8px}
.id-am-display{font-size:clamp(40px,10vw,88px);font-weight:500;line-height:1.05;letter-spacing:-0.03em}
.id-am-secao{font-size:clamp(28px,6.5vw,52px);font-weight:500;letter-spacing:-0.02em}
.id-am-corpo{font-size:clamp(15px,3.6vw,18px);font-weight:400;line-height:1.55;color:var(--ink-2);max-width:44em}
.id-am-label{font-size:14px;color:var(--ink-2)}
.id-spec{display:flex;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px dotted var(--dot)}
.id-spec-k{font-size:15px}
.id-spec-v{font-size:15px;font-weight:500}

/* ============ 04 · Aplicações ============ */
.id-app{flex:1 1 240px;background:var(--surface);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:20px}
.id-app--claro{flex:1 1 300px;background:var(--bg);border:1px solid var(--line);gap:16px}
.id-app-linha{display:flex;align-items:center;gap:16px}
.id-tile{background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center}
.id-tile--64{width:64px;height:64px;border-radius:14px}
.id-tile--32{width:32px;height:32px;border-radius:8px}
.id-tile--72{width:72px;height:72px;border-radius:999px}
.id-tile--56{width:56px;height:56px;border-radius:999px;background:var(--sand);color:var(--ink)}
.id-tile--52{width:52px;height:52px;border-radius:999px;flex:none}

.id-etiqueta{border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--surface)}
.id-etiqueta-topo{display:flex;align-items:center;justify-content:space-between;gap:12px}
.id-etiqueta-marca{display:flex;align-items:center;gap:8px}
.id-etiqueta-nome{font-size:13px;font-weight:600;letter-spacing:0.14em}
.id-etiqueta-cod{font-size:12px;color:var(--ink-2)}
.id-etiqueta-specs{--pb:6px;--fs:13px;gap:12px}

.id-email{display:flex;gap:16px;align-items:flex-start}
.id-email-txt{display:flex;flex-direction:column;gap:2px}
.id-email-nome{font-size:16px;font-weight:500}
.id-email-linha{font-size:14px;color:var(--ink-2)}
.id-email-nota{font-size:13px;color:var(--ink-2);margin-top:6px}

/* ============ 05 · Tom de voz ============ */
.id-voz{flex:1 1 320px;background:var(--surface);border-radius:var(--r-card);padding:clamp(20px,4vw,32px);display:flex;flex-direction:column;gap:20px}
.id-voz--nao{background:var(--bg);border:1px solid var(--line)}
.id-voz-rot{font-size:14px;color:var(--ink-2)}
.id-voz-lista{display:flex;flex-direction:column;gap:16px}
.id-frase{font-size:clamp(17px,4vw,21px);line-height:1.4;letter-spacing:-0.01em}
.id-frase--riscada{color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--dash)}

/* ============ 06 · Componentes-assinatura ============ */
.id-comp{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px;align-items:flex-start}
.id-comp-card{background:var(--surface);border-radius:var(--r-card);padding:24px;display:flex;flex-wrap:wrap;align-items:center}
.id-comp-card--botoes{gap:16px;flex:1 1 320px}
.id-comp-card--pilulas{gap:12px;flex:1 1 280px}
.id-circ{border-radius:999px;display:inline-flex;align-items:center;justify-content:center}
.id-circ--56{width:56px;height:56px;background:var(--bg);border:1px solid var(--line)}
.id-circ--56-ink{width:56px;height:56px;background:var(--ink);color:var(--bg)}
.id-circ--48{width:48px;height:48px;background:var(--bg);border:1px solid var(--line)}
.id-pilula{height:40px;padding:0 18px;border-radius:999px;background:var(--bg);border:1px solid var(--line);display:inline-flex;align-items:center;font-size:15px}
.id-pilula--on{background:var(--ink);color:var(--bg);border:0}
.id-sw{width:32px;height:32px;border-radius:999px;border:1px solid var(--line)}
.id-sw--branco{background:var(--bg);box-shadow:var(--ring)}
.id-sw--preto{background:var(--swatch-preto)}
.id-sw--areia{background:var(--sand)}

/* ============ Rodapé ============ */
.id-rodape{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.id-rodape-txt{font-size:14px;color:var(--ink-2)}
.id-cta{height:52px;padding:0 8px 0 24px;border-radius:999px;background:var(--ink);color:var(--bg);display:inline-flex;align-items:center;gap:16px;font-size:16px;font-weight:500}
.id-cta:hover{color:var(--bg)}
.id-cta-seta{width:36px;height:36px;border-radius:999px;background:var(--bg);color:var(--ink);display:inline-flex;align-items:center;justify-content:center}