/* ==========================================================================
   CLEVEN · VOLTAR PARA A HOLDING
   Faixa fixa no topo com o link "← Cleven". Vai nos sites das frentes
   (network, growth) — não na home, que já é a própria holding.

   Uso:  <link rel="stylesheet" href="../shared/back-to-holding.css">  (head)
         <script src="../shared/back-to-holding.js" defer></script>    (body)

   O site reserva a altura da faixa lendo --cleven-back-band, para o link
   nunca cobrir o logo do header. Ver back-to-holding.html: é lá que está
   o markup, em HTML legível.
   ========================================================================== */

:root {
  /* altura da faixa reservada no topo — o site desloca o header por ela */
  --cleven-back-band: 40px;
}

.cleven-back-band {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  height: var(--cleven-back-band);
  display: flex;
  align-items: center;
  padding-inline: clamp(16px, 4vw, 32px);
  background: var(--cleven-bg, #060606);
  border-bottom: 1px solid var(--cleven-border, rgba(245, 245, 245, 0.12));
}

.cleven-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--cleven-muted, #8a8a8a);
  font-family: var(--cleven-font, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 200ms var(--cleven-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.cleven-back:hover,
.cleven-back:focus-visible {
  color: var(--cleven-ink, #f5f5f5);
}

.cleven-back__arrow {
  display: inline-block;
  transition: transform 200ms var(--cleven-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.cleven-back:hover .cleven-back__arrow {
  transform: translateX(-3px);
}

/* sobre fundo claro (Cleven Growth) a faixa escura não serve */
body.tone-cream .cleven-back-band {
  background: var(--cleven-cream, #f3f1ec);
  border-bottom-color: rgba(14, 14, 13, 0.12);
}

body.tone-cream .cleven-back {
  color: var(--cleven-silver-dark, #6e6c66);
}

body.tone-cream .cleven-back:hover,
body.tone-cream .cleven-back:focus-visible {
  color: var(--cleven-ink-dark, #0e0e0d);
}

@media (max-width: 640px) {
  :root {
    --cleven-back-band: 34px;
  }
  .cleven-back {
    font-size: 11px;
  }
}