/* ==========================================================================
   BIGHEADSITES · COMPONENTES COMPARTILHADOS
   Peças usadas por mais de uma seção. Estilos de uma seção só ficam em
   css/sections/<seção>.css.
   ========================================================================== */

/* Wordmark BIGHEADSITES (header e footer) -------------------------------- */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: var(--wordmark-size, 1.375rem);
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wordmark__big {
  font-weight: 900;
}

.wordmark__sites {
  font-weight: 500;
  letter-spacing: -0.015em;
}

.wordmark__bar {
  display: inline-block;
  width: 0.85em;
  height: 0.15em;
  margin-left: 0.16em;
  background: var(--c-acid);
  transition: width var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .wordmark:hover .wordmark__bar {
    width: 1.4em;
  }
}

.wordmark:focus-visible .wordmark__bar {
  width: 1.4em;
}

/* Rótulo de seção: [ MANIFESTO ] ----------------------------------------- */
.kicker {
  font-family: var(--font-mono);
  font-size: clamp(0.8125rem, 0.7rem + 0.35vw, 1.125rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Palavra destacada em verde dentro de um texto corrido ------------------ */
.hl {
  padding: 0 0.18em;
  font-weight: 700;
  background-image: linear-gradient(var(--c-acid), var(--c-acid));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 92%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Seta que sai e volta (CTAs) -------------------------------------------- */
/* Duas cópias do ícone: a primeira sai na direção da seta, a segunda entra
   pelo lado oposto. Direção padrão: nordeste. --east para seta horizontal. */
.arrow-swap {
  --arrow-dx: 115%;
  --arrow-dy: -115%;
  position: relative;
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  overflow: hidden;
}

.arrow-swap--east {
  --arrow-dy: 0%;
}

.arrow-swap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform var(--dur-base) var(--ease-out);
}

.arrow-swap svg + svg {
  transform: translate(calc(var(--arrow-dx) * -1), calc(var(--arrow-dy) * -1));
}

@media (hover: hover) {
  :is(a, button):hover > .arrow-swap svg:first-child {
    transform: translate(var(--arrow-dx), var(--arrow-dy));
  }

  :is(a, button):hover > .arrow-swap svg + svg {
    transform: none;
  }
}

:is(a, button):focus-visible > .arrow-swap svg:first-child {
  transform: translate(var(--arrow-dx), var(--arrow-dy));
}

:is(a, button):focus-visible > .arrow-swap svg + svg {
  transform: none;
}

/* Botão entre colchetes, verde ácido: [ CONTATO ↗ ] ---------------------- */
.btn-bracket {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.85em 1.05em;
  background: var(--c-acid);
  color: var(--c-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 0 var(--c-ink);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .btn-bracket:hover {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--c-ink);
  }
}

.btn-bracket:active {
  transform: none;
  box-shadow: 0 0 0 var(--c-ink);
}

/* Botão pílula preto com sombra verde: VAMOS CONVERSAR ↗ ----------------- */
.btn-pill {
  --pill-shadow: var(--c-acid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  min-height: 3.5rem;
  padding: 1.05em 1.75em;
  border-radius: var(--radius-pill);
  background: var(--c-ink);
  color: var(--c-paper);
  font-family: var(--font-mono);
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: -3px 6px 0 var(--pill-shadow);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.btn-pill .arrow-swap {
  width: 1.05em;
  height: 1.05em;
}

@media (hover: hover) {
  .btn-pill:hover {
    transform: translateY(-2px) scale(1.035);
    box-shadow: -4px 9px 0 var(--pill-shadow);
  }
}

.btn-pill:active {
  transform: translateY(3px) scale(0.99);
  box-shadow: -1px 2px 0 var(--pill-shadow);
}

.btn-pill:focus-visible {
  outline-offset: 6px;
}

/* Rasgo de papel (borda inferior de seções) ------------------------------ */
/* <svg class="tear"><use class="tear__rim" href="#g-tear-rim"/><use class="tear__ink" href="#g-tear-ink"/></svg> */
.tear {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tear__rim {
  fill: var(--tear-rim, var(--c-white));
}

.tear__ink {
  fill: var(--tear-color, var(--c-ink));
}

/* Fita verde rasgada atrás de palavras de um título ---------------------- */
/* <span class="taped"><span class="tape" aria-hidden="true"></span>palavras</span>
   Dentro de data-reveal="lines", a fita entra em corte antes das palavras. */
.taped {
  position: relative;
  isolation: isolate;
  display: inline-block;
}

.tape {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.tape::before {
  content: "";
  position: absolute;
  inset: 0 -0.08em;
  background-color: var(--c-acid);
  background-image: var(--tex-paper);
  rotate: var(--tape-rotate, -1.5deg);
  clip-path: polygon(
    0.5% 12%, 3% 2%, 24% 5%, 51% 0, 78% 4%, 97% 0, 99.5% 14%, 98% 36%,
    100% 58%, 98.5% 80%, 100% 96%, 76% 100%, 49% 96%, 22% 100%, 2% 97%,
    0 78%, 1.5% 56%, 0 34%
  );
}

/* Borda de papel rasgado no topo de uma seção ---------------------------- */
/* Cobre parte da faixa escura da seção anterior: <svg class="paper-edge"><use href="#g-sheet-edge"/></svg> */
.paper-edge {
  position: absolute;
  top: calc(var(--tear-h) * -0.42);
  right: 0;
  left: 0;
  width: 100%;
  height: calc(var(--tear-h) * 0.62);
  fill: var(--c-paper);
  pointer-events: none;
}

/* Canto de papel verde rasgado: <div class="paper-corner"><span></span></div> */
/* A seção define posição, tamanho e rotação. */
.paper-corner {
  position: absolute;
  filter: drop-shadow(0 2px 2px rgb(17 17 17 / 0.14));
}

.paper-corner > span {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--c-acid);
  background-image: var(--tex-paper);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 97.3% 99.2%, 94.7% 98.2%, 91.9% 98%, 88.7% 100%, 86.9% 96.1%, 84.2% 95.8%, 80.8% 97.7%, 78.2% 96.9%, 75.7% 95.8%, 74.5% 91.5%, 70.3% 94.3%, 68.6% 91.5%, 65.5% 91.5%, 64.7% 87.2%, 60.7% 88.4%, 59% 85.9%, 55.8% 85.5%, 54.7% 82.1%, 53% 79.6%, 48.1% 80.9%, 46.1% 78.6%, 46.1% 74.2%, 42.5% 73.5%, 41.9% 69.8%, 38.1% 69%, 39.1% 64%, 32.9% 64.9%, 34.8% 59.2%, 30% 58.7%, 25.4% 57.8%, 29.2% 51%, 26.1% 48.9%, 22% 47.3%, 20.8% 43.8%, 17.3% 41.5%, 18.1% 36.8%, 13.4% 35%, 11.8% 31.4%, 12% 26.9%, 9.2% 23.8%, 8.3% 19.7%, 3.8% 17.2%, 3.4% 12.7%, 3.1% 8.2%, 3.6% 3.4%, 0% 0%);
}

/* Recortes de papel rasgado (bordas de cima e de baixo) ------------------ */
/* A classe define --cut; o elemento que recorta usa clip-path: var(--cut). */
.cut-1 {
  --cut: polygon(0% 0.6%, 5.2% 1%, 10.6% 1.6%, 13.9% 0%, 20.2% 0.7%, 24.1% 2.6%, 29% 2.2%, 33.9% 1.7%, 37.5% 1.7%, 44% 1.4%, 50% 1.7%, 53.2% 2%, 58.6% 0.8%, 61.7% 2.3%, 66.6% 1.9%, 73.1% 1.9%, 79.8% 1%, 86% 1.2%, 92.7% 2.3%, 96.1% 0.4%, 100% 2.5%, 99.7% 8%, 99.8% 29.5%, 99.7% 49.6%, 99.5% 67.8%, 99.3% 88.8%, 100% 97.6%, 93.6% 97.4%, 87.9% 99.6%, 81.4% 97.5%, 74.8% 98.5%, 69% 99.5%, 62.6% 98.5%, 58.5% 99.8%, 52.1% 97.4%, 48.7% 97.9%, 44.1% 99.6%, 39.9% 98%, 33.4% 99.9%, 28% 99.9%, 22.1% 99.1%, 15.6% 97.5%, 10.6% 97.4%, 6.3% 99.8%, 0.9% 99.9%, 0% 98.9%, 0.5% 92%, 0% 76.1%, 0.3% 51.7%, 0.7% 26.2%);
}

.cut-2 {
  --cut: polygon(0% 0.6%, 6.8% 0.3%, 12.7% 0.2%, 16.7% 2.6%, 20.5% 1.7%, 25.3% 1.2%, 30.3% 0.5%, 36.6% 0.2%, 40.6% 0.1%, 44.6% 1.1%, 51.2% 1%, 54.7% 0.7%, 61.7% 0.2%, 67.1% 1%, 72.8% 0.9%, 78.6% 1.3%, 84.2% 2.3%, 89.5% 0.4%, 92.7% 2.5%, 97.7% 0.5%, 100% 1.5%, 99.4% 8%, 99.8% 32.6%, 99.3% 50.9%, 99.4% 66.5%, 99.4% 81.6%, 100% 97.5%, 93.6% 98.7%, 89.8% 99.6%, 84.7% 98.7%, 81.4% 97.7%, 76.4% 98.2%, 72.5% 99.4%, 69.5% 99.1%, 65.4% 98.9%, 60.9% 97.8%, 54.3% 99.5%, 49.8% 99.6%, 44.1% 97.5%, 40.3% 98%, 36.1% 100%, 30% 99.1%, 26.4% 98.9%, 22.4% 98.9%, 17.6% 98.9%, 12.3% 99.2%, 8.9% 99.8%, 5.5% 98.6%, 1% 97.9%, 0% 98.2%, 0.8% 92%, 0% 77.2%, 0.3% 61.6%, 0.6% 40.7%, 0.8% 22.5%, 0.7% 8.4%);
}

.cut-3 {
  --cut: polygon(0% 2.5%, 3% 1.9%, 6.7% 2.6%, 9.7% 2.3%, 15.5% 2.2%, 22.5% 0.6%, 26.8% 1.8%, 30.9% 0.7%, 34.9% 2.2%, 41.4% 2.1%, 45.3% 2.4%, 50.3% 0.6%, 55.1% 1.1%, 58.4% 1.5%, 62.9% 1.5%, 69.6% 1.7%, 74.2% 2.2%, 81.2% 1.3%, 88% 0%, 91.5% 0.4%, 98.3% 1.8%, 100% 0.7%, 99.6% 8%, 99.9% 32.6%, 100% 48%, 99.3% 67.7%, 99.7% 88.3%, 100% 99.5%, 93.2% 99.1%, 89.3% 99.2%, 83% 99.2%, 76.3% 99.1%, 71.6% 99.8%, 65% 97.9%, 60.1% 99.7%, 55.1% 99%, 48.7% 97.6%, 42.8% 99.3%, 39.6% 97.7%, 32.8% 99.6%, 27.8% 98.7%, 20.9% 99.9%, 17.7% 97.8%, 12.4% 98.8%, 6.3% 98.5%, 0.5% 99.3%, 0% 100%, 0.3% 92%, 0.3% 70.2%, 0.5% 52.1%, 0.5% 29.6%, 0.7% 11.8%);
}

.cut-4 {
  --cut: polygon(0% 0.4%, 5.8% 1.7%, 10.7% 0.6%, 16.8% 2.1%, 21.9% 1.3%, 25.8% 0%, 30.3% 1.5%, 33.6% 2.1%, 37.5% 0.6%, 40.7% 2.6%, 46.7% 2.3%, 52.1% 0.1%, 56.4% 1.3%, 59.9% 2.5%, 64.4% 0.4%, 70.6% 0.3%, 77.4% 1.2%, 82.6% 0.9%, 87.5% 0.5%, 90.6% 2.3%, 94.6% 2%, 98.4% 2.5%, 100% 2%, 99.4% 8%, 99.4% 29%, 99.6% 44.4%, 99.8% 68.4%, 100% 97.7%, 95.4% 99.1%, 90.6% 99%, 83.6% 99%, 80.5% 99.8%, 74.6% 97.4%, 69.6% 98.7%, 64.4% 98.1%, 60.5% 98.4%, 55.3% 98.4%, 51.6% 99.6%, 47.2% 97.6%, 42.8% 98.4%, 38.6% 99.7%, 35.3% 97.9%, 29.2% 99%, 23.5% 98.2%, 16.9% 97.5%, 12.2% 97.4%, 5.4% 98.5%, 0% 98.7%, 0.3% 92%, 0.7% 75%, 0.1% 59.1%, 0.6% 35.4%, 0.7% 15.6%);
}

/* Faixa listrada (assinatura gráfica) ------------------------------------ */
.stripes {
  display: block;
  width: var(--stripes-w, 4.5rem);
  height: var(--stripes-h, 1.5rem);
  background: repeating-linear-gradient(
    -55deg,
    var(--stripes-color, var(--c-ink)) 0 6px,
    transparent 6px 13px
  );
}