/* ============================================================
   page.css — estilo do DOCUMENTO (a folha). Vai para o PDF.
   Só usa tokens de ds/tokens. Nenhuma regra de interface aqui.
   ============================================================ */

/* ---------- Folha ---------- */
.sheet {
  --margin: 10mm;
  --pw: 210mm;
  --ph: 297mm;
  --ink: var(--c-chumbo);
  --ink-soft: var(--c-chumbo-60);
  --title: var(--c-rust);
  --line: var(--c-chumbo-20);
  --line-strong: var(--c-chumbo);
  --chip-bg: var(--c-chumbo-10);
  --card-bg: var(--c-branco);
  --link: var(--c-chumbo);

  position: relative;
  box-sizing: border-box;
  width: var(--pw);
  height: var(--ph);
  padding: var(--margin);
  background: var(--c-offwhite);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 10pt;
  line-height: var(--lh-body);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  -webkit-font-smoothing: antialiased;
}
.sheet * { box-sizing: border-box; }
.sheet p, .sheet h1, .sheet h2, .sheet h3, .sheet ul, .sheet ol { margin: 0; }
.sheet ul, .sheet ol { padding: 0; list-style: none; }
.sheet a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.sheet img { display: block; max-width: 100%; }
.sheet [data-e] { outline: none; min-height: 1em; }
.sheet [data-e]:empty::before { content: "\00a0"; }

/* ---------- Tom automático (claro/escuro) ---------- */
[data-tone="claro"] {
  --ink: var(--c-offwhite);
  --ink-soft: var(--c-offwhite-60);
  --title: var(--c-offwhite);
  --line: var(--c-offwhite-35);
  --line-strong: var(--c-offwhite);
  --chip-bg: var(--c-offwhite-20);
  --card-bg: transparent;
  --link: var(--c-offwhite);
  color: var(--ink);
}
[data-tone="escuro"] {
  --ink: var(--c-chumbo);
  --ink-soft: var(--c-chumbo-60);
  --title: var(--c-rust);
  --line: var(--c-chumbo-20);
  --line-strong: var(--c-chumbo);
  --chip-bg: var(--c-chumbo-10);
  --card-bg: var(--c-branco);
  --link: var(--c-chumbo);
  color: var(--ink);
}
/* Em fundo rust, títulos ficam off-white (rust sobre rust não existe) */
[data-bgc="rust"] { --title: var(--c-offwhite); }

/* ---------- Cores de fundo (chaves da paleta) ---------- */
[data-bgc="rust"]     { background-color: var(--c-rust); }
[data-bgc="chumbo"]   { background-color: var(--c-chumbo); }
[data-bgc="offwhite"] { background-color: var(--c-offwhite); }
[data-bgc="azul"]     { background-color: var(--c-azul); }
[data-bgc="verde"]    { background-color: var(--c-verde); }
[data-bgc="branco"]   { background-color: var(--c-branco); }
[data-bgc="preto"]    { background-color: var(--c-preto); }

/* Cor de texto (trecho ou campo) */
[data-color="rust"]     { color: var(--c-rust); }
[data-color="chumbo"]   { color: var(--c-chumbo); }
[data-color="offwhite"] { color: var(--c-offwhite); }
[data-color="azul"]     { color: var(--c-azul); }
[data-color="verde"]    { color: var(--c-verde); }
[data-color="branco"]   { color: var(--c-branco); }
[data-color="preto"]    { color: var(--c-preto); }

/* Fonte por campo */
[data-font="syne"]  { font-family: var(--f-title); }
[data-font="times"] { font-family: var(--f-body); }

/* ---------- Bordas (seções e blocos) ---------- */
[data-bw="fina"]   { border-width: 1px; border-style: solid; }
[data-bw="media"]  { border-width: 2px; border-style: solid; }
[data-bw="grossa"] { border-width: 4px; border-style: solid; }
[data-bw] { border-color: var(--line-strong); }
[data-bc="rust"]     { border-color: var(--c-rust); }
[data-bc="chumbo"]   { border-color: var(--c-chumbo); }
[data-bc="offwhite"] { border-color: var(--c-offwhite); }
[data-bc="azul"]     { border-color: var(--c-azul); }
[data-bc="verde"]    { border-color: var(--c-verde); }
[data-bc="branco"]   { border-color: var(--c-branco); }
[data-bc="preto"]    { border-color: var(--c-preto); }

/* ---------- Seções ---------- */
.sec {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 6mm;
}
.sec[data-kind="main"] { flex: 1 1 auto; min-height: 0; }
.sec[data-bgc], .sec[data-bw]:not([data-bw="none"]) { padding: var(--sp-3); border-radius: var(--r-8); }
.sec > .grid { flex: 1 1 auto; }
.sec[data-valign="middle"] > .grid { align-content: center; }
.sec[data-valign="bottom"] > .grid { align-content: end; }

/* ---------- Grade de 6 colunas e blocos ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-3);
  align-items: start;
  align-content: start;
}
.blk {
  position: relative;
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  min-height: 4mm;
  align-self: stretch;
}
.blk[data-w="1"] { grid-column: span 1; }
.blk[data-w="2"] { grid-column: span 2; }
.blk[data-w="3"] { grid-column: span 3; }
.blk[data-w="4"] { grid-column: span 4; }
.blk[data-w="5"] { grid-column: span 5; }
.blk[data-w="6"] { grid-column: span 6; }
.blk[data-valign="middle"] { justify-content: center; }
.blk[data-valign="bottom"] { justify-content: flex-end; }
.blk[data-align="center"] { text-align: center; align-items: center; }
.blk[data-align="right"]  { text-align: right; align-items: flex-end; }
/* Respiro interno só com fundo ou borda (decisão 5) */
.blk[data-bgc], .blk[data-bw]:not([data-bw="none"]) { padding: var(--sp-3); border-radius: var(--r-8); }
/* Imagem ao lado: bloco vira linha */
.blk:has(> figure.fig[data-pos="left"]), .blk:has(> figure.fig[data-pos="right"]) { flex-direction: row; align-items: flex-start; }
.blk:has(> figure.fig[data-pos="right"]) { flex-direction: row-reverse; }
.blk > figure.fig[data-pos="left"], .blk > figure.fig[data-pos="right"] { flex: 0 0 auto; }
.blk > .bc { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }

/* ---------- Tipografia do documento ---------- */
.ov {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-title);
  font-weight: var(--fw-medium);
  font-size: 7pt;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.ov > [data-e] { flex: 0 0 auto; min-width: 0; white-space: normal; }
.ov::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line-strong); min-width: 8mm; }
.ov[data-line="none"]::after { display: none; }

.h1 {
  font-family: var(--f-title);
  font-weight: var(--fw-bold);
  font-size: 17pt;
  line-height: var(--lh-title);
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  color: var(--title);
}
.h2 {
  font-family: var(--f-title);
  font-weight: var(--fw-bold);
  font-size: 12pt;
  line-height: var(--lh-title);
  text-transform: uppercase;
  color: var(--ink);
}
.h3 {
  font-family: var(--f-title);
  font-weight: var(--fw-bold);
  font-size: 9.5pt;
  line-height: var(--lh-title);
  text-transform: uppercase;
  color: var(--ink);
}
.lab {
  font-family: var(--f-title);
  font-weight: var(--fw-medium);
  font-size: 6.5pt;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
}
.lab-soft { color: var(--ink-soft); }
.p { font-family: var(--f-body); font-size: 10pt; line-height: var(--lh-body); color: var(--ink); }
.p-sm { font-size: 8.5pt; }
.quote { font-family: var(--f-body); font-style: italic; font-size: 11pt; line-height: var(--lh-body); color: var(--ink); }
.quote-attr { margin-top: var(--sp-1); }
.note { font-family: var(--f-body); font-style: italic; font-size: 8.5pt; color: var(--ink); }
.titulo-ital { font-family: var(--f-body); font-style: italic; font-size: 13pt; color: var(--ink); }

/* Lockup tipográfico LAB / STEWARD OWNERSHIP (não é logo oficial) */
.lock { display: flex; flex-direction: column; gap: 0; }
.lock-lab { font-family: var(--f-body); font-style: italic; font-size: 46pt; line-height: .9; color: var(--ink); }
.lock-so { font-family: var(--f-title); font-weight: var(--fw-bold); font-size: 31pt; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }

/* ---------- Listas ---------- */
.lista { display: flex; flex-direction: column; gap: var(--sp-1); }
.lista > li { position: relative; padding-left: 4mm; font-family: var(--f-body); font-size: 10pt; }
.lista > li::before { content: "·"; position: absolute; left: 0.8mm; top: 0; font-weight: 700; }
.lista-num { display: flex; flex-direction: column; gap: var(--sp-2); counter-reset: item; }
.lista-num > li { position: relative; display: grid; grid-template-columns: 7mm 1fr; gap: var(--sp-2); counter-increment: item; }
.lista-num > li::before {
  content: counter(item, decimal-leading-zero);
  font-family: var(--f-title); font-weight: var(--fw-bold); font-size: 13pt; line-height: 1; color: var(--title);
}
.lista-num > li .h3 { margin-bottom: 1mm; }
.lista-obs { display: flex; flex-direction: column; gap: 0.6mm; }
.lista-obs > li { position: relative; padding-left: 3mm; font-family: var(--f-body); font-style: italic; font-size: 9pt; }
.lista-obs > li::before { content: "·"; position: absolute; left: 0; top: 0; }

/* ---------- Chips e pílulas de status ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-width: 26mm; padding: 2.2mm 4mm;
  background: var(--chip-bg); color: var(--ink);
  font-family: var(--f-title); font-weight: var(--fw-medium); font-size: 7pt; letter-spacing: var(--track-label); text-transform: uppercase;
  border-radius: var(--r-0); line-height: 1.3;
}
.chip[data-bgc] { color: var(--ink); }
.chip.chip-pill { border-radius: var(--r-pill); }
.pill {
  display: inline-flex; align-items: center; gap: 1.5mm;
  padding: 1mm 3mm; border-radius: var(--r-pill);
  font-family: var(--f-title); font-weight: var(--fw-medium); font-size: 6.5pt; letter-spacing: var(--track-label); text-transform: uppercase;
  background: var(--c-chumbo-20); color: var(--c-chumbo);
}
.pill[data-status="sucesso"] { background: var(--c-verde); color: var(--c-offwhite); }
.pill[data-status="atencao"] { background: var(--c-rust); color: var(--c-offwhite); }
.pill[data-status="erro"]    { background: var(--c-chumbo); color: var(--c-offwhite); }
.pill[data-status="neutro"]  { background: var(--c-chumbo-20); color: var(--c-chumbo); }

/* ---------- Valor em destaque ---------- */
.valor { font-family: var(--f-title); font-weight: var(--fw-bold); font-size: 22pt; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); }
.valor-sm { font-size: 16pt; }

/* ---------- Fases com status ---------- */
.fases { display: flex; flex-direction: column; gap: var(--sp-2); }
.fases > li { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); align-items: start; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
.fases > li:last-child { border-bottom: 0; }

/* ---------- Card (imagem 16:9 + título + parágrafo) ---------- */
.card { display: flex; flex-direction: column; gap: var(--sp-2); background: var(--card-bg); border: var(--fio); border-radius: var(--r-8); padding: var(--sp-3); }
[data-tone="claro"] .card { border-color: var(--line); }

/* Card com cabeçalho chumbo (informação / sensibilização / experimentação) */
.cardh { display: flex; flex-direction: column; border: var(--fio); border-radius: var(--r-0); background: var(--card-bg); }
.cardh-head { background: var(--c-chumbo); color: var(--c-offwhite); text-align: center; padding: 2mm 3mm; font-family: var(--f-title); font-weight: var(--fw-medium); font-size: 7pt; letter-spacing: var(--track-kicker); text-transform: uppercase; }
.cardh-body { padding: 3mm; }
.cardh-body .p { color: var(--c-chumbo); }

/* ---------- Card de fase (modelo) ---------- */
.cf { display: flex; flex-direction: column; border: var(--fio); border-radius: var(--r-0); background: var(--card-bg); color: var(--c-chumbo); }
.cf-head { background: var(--c-chumbo-60); color: var(--c-offwhite); padding: 2.5mm 3.5mm; display: flex; flex-direction: column; gap: 1mm; --ink: var(--c-offwhite); }
.cf-head-row { display: flex; justify-content: space-between; gap: var(--sp-2); font-family: var(--f-title); font-weight: var(--fw-medium); font-size: 6.5pt; letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--c-offwhite); }
.cf-head .h2 { color: var(--c-offwhite); font-size: 11pt; }
.cf-body { padding: 3mm 3.5mm; display: flex; flex-direction: column; gap: 2mm; --ink: var(--c-chumbo); --ink-soft: var(--c-chumbo-60); --line: var(--c-chumbo-20); }
.atvs { display: flex; flex-direction: column; }
.atv { display: flex; flex-direction: column; gap: 1mm; padding: 2mm 0 2.5mm; border-bottom: 1px solid var(--c-chumbo-20); }
.atv:last-child { border-bottom: 0; }
.atv .lab { color: var(--c-chumbo-60); }
.atv .h3 { color: var(--c-chumbo); }
.atv .p { color: var(--c-chumbo); font-size: 9pt; }
.atv-ent { display: flex; gap: 2mm; align-items: baseline; white-space: nowrap; font-family: var(--f-title); font-weight: var(--fw-medium); font-size: 6.5pt; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-chumbo-60); }
.atv-ent > em { white-space: normal; font-family: var(--f-body); font-style: italic; font-size: 8.5pt; letter-spacing: 0; text-transform: none; color: var(--c-chumbo); }
.cf-note { font-family: var(--f-body); font-style: italic; font-size: 8.5pt; color: var(--c-chumbo); padding-top: 1mm; }

/* ---------- Card de líder ---------- */
.lider { display: flex; flex-direction: column; gap: var(--sp-2); }
.lider-top { display: flex; gap: var(--sp-2); align-items: flex-start; }
.lider-top > figure.fig { flex: 0 0 auto; }
.lider-nome { font-family: var(--f-title); font-weight: var(--fw-bold); font-size: 11.5pt; line-height: 1.1; color: var(--ink); }
.lider-cargo { font-family: var(--f-title); font-weight: var(--fw-medium); font-size: 6.5pt; letter-spacing: .04em; color: var(--c-rust); margin-top: 1.5mm; }
[data-tone="claro"] .lider-cargo { color: var(--ink); }
.lider .p { font-size: 9pt; }

/* ---------- Contact card ---------- */
.contato { display: flex; gap: var(--sp-3); align-items: center; background: var(--card-bg); border: var(--fio); border-radius: var(--r-8); padding: var(--sp-3) var(--sp-4); }
[data-tone="claro"] .contato { border-color: var(--line); }
.contato > figure.fig { flex: 0 0 auto; border-radius: 50%; overflow: hidden; }
.contato-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1.5mm; }
.contato-nome { font-family: var(--f-title); font-weight: var(--fw-bold); font-size: 13pt; text-transform: uppercase; color: var(--ink); line-height: 1.1; }
.contato-cargo { display: flex; gap: 2mm; }
.contato-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm var(--sp-4); margin-top: 1.5mm; font-family: var(--f-body); font-size: 9.5pt; }
.contato [data-off] { display: none !important; }
.contato-row a { text-decoration: none; }

/* ---------- Linhas ---------- */
.linha { background: var(--line-strong); flex: 0 0 auto; }
.linha[data-line="h"] { width: 100%; height: 1px; }
.linha[data-line="v"] { width: 1px; min-height: 20mm; align-self: stretch; height: 100%; }
.linha[data-lw="media"][data-line="h"]  { height: 2px; }
.linha[data-lw="grossa"][data-line="h"] { height: 4px; }
.linha[data-lw="media"][data-line="v"]  { width: 2px; }
.linha[data-lw="grossa"][data-line="v"] { width: 4px; }
.linha[data-lc="rust"]     { background: var(--c-rust); }
.linha[data-lc="chumbo"]   { background: var(--c-chumbo); }
.linha[data-lc="offwhite"] { background: var(--c-offwhite); }
.linha[data-lc="azul"]     { background: var(--c-azul); }
.linha[data-lc="verde"]    { background: var(--c-verde); }
.linha[data-lc="branco"]   { background: var(--c-branco); }
.linha[data-lc="preto"]    { background: var(--c-preto); }
.blk:has(> .linha[data-line="v"]) { align-items: center; }

/* ---------- Imagens ---------- */
figure.fig {
  position: relative; margin: 0; width: 100%; max-width: 100%;
  overflow: hidden; border-radius: var(--r-0);
  background: transparent;
}
figure.fig[data-ratio="1:1"]   { aspect-ratio: 1 / 1; }
figure.fig[data-ratio="4:3"]   { aspect-ratio: 4 / 3; }
figure.fig[data-ratio="3:4"]   { aspect-ratio: 3 / 4; }
figure.fig[data-ratio="3:2"]   { aspect-ratio: 3 / 2; }
figure.fig[data-ratio="2:3"]   { aspect-ratio: 2 / 3; }
figure.fig[data-ratio="16:9"]  { aspect-ratio: 16 / 9; }
figure.fig[data-ratio="9:16"]  { aspect-ratio: 9 / 16; }
figure.fig[data-ratio="21:9"]  { aspect-ratio: 21 / 9; }
figure.fig[data-ratio="original"] { aspect-ratio: auto; }
figure.fig > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
figure.fig[data-fit="contain"] > img { object-fit: contain; }
figure.fig[data-ratio="original"] > img { height: auto; }
figure.fig[data-align="left"]   { align-self: flex-start; margin-right: auto; }
figure.fig[data-align="center"] { align-self: center; margin-left: auto; margin-right: auto; }
figure.fig[data-align="right"]  { align-self: flex-end; margin-left: auto; }
figure.fig.fig-round { border-radius: 50%; }
figure.fig.fig-r8 { border-radius: var(--r-8); }

/* ---------- Rodapé interno (modelo) ---------- */
.foot { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line-strong); }
.foot-c { text-align: center; }
.foot-r { text-align: right; }
.foot .lab a { text-decoration: none; }
.foot-legal { text-align: center; font-family: var(--f-title); font-weight: var(--fw-medium); font-size: 5.5pt; letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--ink); padding-top: var(--sp-2); border-top: 1px solid var(--line); }

/* ---------- Cascata: atributos de estado vencem as classes de componente ---------- */
[data-bgc="rust"][data-bgc]     { background-color: var(--c-rust); }
[data-bgc="chumbo"][data-bgc]   { background-color: var(--c-chumbo); }
[data-bgc="offwhite"][data-bgc] { background-color: var(--c-offwhite); }
[data-bgc="azul"][data-bgc]     { background-color: var(--c-azul); }
[data-bgc="verde"][data-bgc]    { background-color: var(--c-verde); }
[data-bgc="branco"][data-bgc]   { background-color: var(--c-branco); }
[data-bgc="preto"][data-bgc]    { background-color: var(--c-preto); }
[data-color="rust"][data-color]     { color: var(--c-rust); }
[data-color="chumbo"][data-color]   { color: var(--c-chumbo); }
[data-color="offwhite"][data-color] { color: var(--c-offwhite); }
[data-color="azul"][data-color]     { color: var(--c-azul); }
[data-color="verde"][data-color]    { color: var(--c-verde); }
[data-color="branco"][data-color]   { color: var(--c-branco); }
[data-color="preto"][data-color]    { color: var(--c-preto); }
[data-font="syne"][data-font]   { font-family: var(--f-title); }
[data-font="times"][data-font]  { font-family: var(--f-body); }
[data-tone="claro"][data-bgc] { color: var(--c-offwhite); }
[data-tone="escuro"][data-bgc] { color: var(--c-chumbo); }