/* ============================================================
   MARCA — ponto único de troca do símbolo.
   Rota em uso: C3 "ensō aberto" (provisória).
   Para trocar: mude o valor de data-mark no <span class="zf-mark"> do HTML
   (c1 | c2 | c3 | c5 | c6) — todas as rotas estão implementadas abaixo.
   Atenção: c1, c2, c5 pedem 3-4 <i></i> filhos; c6 pede um <i>Z</i>; c3 nenhum.
   Ver: /Zenfila Logo.dc.html e readme.md §Marca.
   ============================================================ */

.zf-logo { display: inline-flex; align-items: center; gap: .42em; text-decoration: none; }
.zf-logo__word {
  font-family: var(--zf-font-display);
  font-size: var(--zf-logo-size, 26px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--zf-logo-ink, var(--zf-primary-deep));
  white-space: nowrap;
}
.zf-logo__word b { font-weight: 600; }
.zf-logo__word i { font-weight: 200; font-style: normal; }

.zf-mark {
  position: relative;
  display: block;
  width: calc(var(--zf-logo-size, 26px) * 1.15);
  height: calc(var(--zf-logo-size, 26px) * 1.15);
  flex: 0 0 auto;
  --zf-mark-ink: var(--zf-logo-mark, var(--zf-primary));
  --zf-mark-hot: var(--zf-accent);
}

/* ---- C3 · ensō aberto (EM USO) ---- */
.zf-mark[data-mark="c3"]::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: calc(var(--zf-logo-size, 26px) * .13) solid var(--zf-mark-ink);
  border-right-color: transparent; transform: rotate(-45deg);
}
.zf-mark[data-mark="c3"]::after {
  content: ""; position: absolute; top: 6%; right: 6%;
  width: 24%; height: 24%; border-radius: 50%; background: var(--zf-mark-hot);
}

/* ---- C1 · a vez (pontos crescentes) ---- */
.zf-mark[data-mark="c1"] {
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--zf-logo-size, 26px) * .08); width: auto;
}
.zf-mark[data-mark="c1"] i {
  display: block; border-radius: 50%; background: var(--zf-mark-ink);
  width: calc(var(--zf-logo-size, 26px) * .18); height: calc(var(--zf-logo-size, 26px) * .18);
}
.zf-mark[data-mark="c1"] i:nth-child(1) { opacity: .35; width: calc(var(--zf-logo-size,26px) * .18); height: calc(var(--zf-logo-size,26px) * .18) }
.zf-mark[data-mark="c1"] i:nth-child(2) { opacity: .6; width: calc(var(--zf-logo-size,26px) * .26); height: calc(var(--zf-logo-size,26px) * .26) }
.zf-mark[data-mark="c1"] i:nth-child(3) { width: calc(var(--zf-logo-size,26px) * .34); height: calc(var(--zf-logo-size,26px) * .34) }
.zf-mark[data-mark="c1"] i:nth-child(4) { background: var(--zf-mark-hot); width: calc(var(--zf-logo-size,26px) * .44); height: calc(var(--zf-logo-size,26px) * .44) }

/* ---- C2 · Z de fila (monograma) ---- */
.zf-mark[data-mark="c2"] i {
  position: absolute; left: 8%; height: 15%; width: 84%;
  border-radius: var(--zf-radius-pill); background: var(--zf-mark-ink); display: block;
}
.zf-mark[data-mark="c2"] i:nth-child(1) { top: 13%; background: var(--zf-mark-hot) }
.zf-mark[data-mark="c2"] i:nth-child(2) { top: 43%; left: 13%; width: 74%; transform: rotate(-38deg) }
.zf-mark[data-mark="c2"] i:nth-child(3) { bottom: 13%; }

/* ---- C5 · a fila que encolhe ---- */
.zf-mark[data-mark="c5"] {
  display: flex; flex-direction: column; justify-content: center;
  gap: calc(var(--zf-logo-size, 26px) * .1);
}
.zf-mark[data-mark="c5"] i { display: block; height: 15%; border-radius: var(--zf-radius-pill); background: var(--zf-mark-ink) }
.zf-mark[data-mark="c5"] i:nth-child(1) { width: 100% }
.zf-mark[data-mark="c5"] i:nth-child(2) { width: 70%; opacity: .8 }
.zf-mark[data-mark="c5"] i:nth-child(3) { width: 42%; opacity: .55 }
.zf-mark[data-mark="c5"] i:nth-child(4) { width: 15%; background: var(--zf-mark-hot); opacity: 1 }

/* ---- C6 · ficha (tile de senha com recortes laterais + Z) ---- */
.zf-mark[data-mark="c6"] {
  width: calc(var(--zf-logo-size, 26px) * 1.55);
  height: calc(var(--zf-logo-size, 26px) * 1.15);
  border-radius: calc(var(--zf-logo-size, 26px) * .22);
  background: var(--zf-mark-ink);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.zf-mark[data-mark="c6"]::before,
.zf-mark[data-mark="c6"]::after {
  content: ""; position: absolute; top: 50%;
  width: 26%; height: 35%; border-radius: 50%;
  background: var(--zf-mark-notch, var(--zf-surface));
  transform: translateY(-50%);
}
.zf-mark[data-mark="c6"]::before { left: -13%; }
.zf-mark[data-mark="c6"]::after { right: -13%; }
.zf-mark[data-mark="c6"] i {
  font-family: var(--zf-font-display); font-weight: 500; font-style: normal;
  font-size: calc(var(--zf-logo-size, 26px) * .72); line-height: 1;
  letter-spacing: -.04em; color: #FFFFFF;
}

/* tom sobre fundo escuro */
.zf-logo--on-dark { --zf-logo-ink: #FFFFFF; --zf-logo-mark: #FFFFFF; }
/* C6 é um tile cheio: o recorte só lê como recorte se a cor for EXATAMENTE a do
   fundo em que o logo está. Por isso o valor vem do contexto, via --zf-mark-notch:
     rodapé (fundo --zf-ink) ......... --zf-mark-notch: var(--zf-ink)
     painel de TV (fundo teal) ....... --zf-mark-notch: var(--zf-primary-deep)
   O padrão on-dark abaixo assume o rodapé, que é onde ele aparece nesta página. */
.zf-logo--on-dark .zf-mark[data-mark="c6"] { --zf-mark-notch: var(--zf-ink); }
.zf-logo--on-dark .zf-mark[data-mark="c6"] i { color: var(--zf-mark-notch); }