/* =============================================
   UTILIDADES — Cores, bordas, sizing
   ============================================= */

/* -- Cores de texto -- */
.text-white { color: #ffffff; }
.text-black { color: #000000; }
.text-primary-pure { color: var(--color-primary-pure); }
.text-primary-100 { color: var(--color-primary-100); }
.text-neutral-100 { color: var(--color-neutral-100); }
.text-neutral-70 { color: var(--color-neutral-70); }
.text-neutral-60 { color: var(--color-neutral-60); }
.text-neutral-40 { color: var(--color-neutral-40); }
.text-white-80 { color: var(--color-white-80); }
.text-brand-01 { color: var(--color-brand-01); }
.text-brand-02 { color: var(--color-brand-02); }
.text-brand-03 { color: var(--color-brand-03); }
.text-neutral-borda { color: var(--color-neutral-borda); }
.text-white\/90 { color: rgba(255, 255, 255, 0.9); }
.text-black\/70 { color: rgba(0, 0, 0, 0.7); }

/* -- Cores de fundo -- */
.bg-white { background-color: #ffffff; }
.bg-primary-pure { background-color: var(--color-primary-pure); }
.bg-primary-10 { background-color: var(--color-primary-10); }
.bg-neutral-10 { background-color: var(--color-neutral-10); }
.bg-neutral-bg { background-color: var(--color-neutral-bg); }
.bg-neutral-borda { background-color: var(--color-neutral-borda); }
.bg-brand-01 { background-color: var(--color-brand-01); }

/* -- Bordas -- */
.border { border: 1px solid; }
.border-t { border-top: 1px solid; }
.border-b { border-bottom: 1px solid; }
.border-r { border-right: 1px solid; }
.border-neutral-20 { border-color: var(--color-neutral-20); }
.border-neutral-borda { border-color: var(--color-neutral-borda); }
.border-white { border-color: #ffffff; }
.border-primary-pure\/10 { border-color: rgba(255, 83, 0, 0.1); }

/* -- Transition -- */
.transition-colors {
  transition-property: color, background-color, border-color;
  transition-duration: 200ms;
  transition-timing-function: ease;
}

/* -- Hover estados de texto -- */
.hover\:text-primary-pure:hover { color: var(--color-primary-pure); }
.hover\:underline:hover { text-decoration: underline; }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
.hover\:bg-white\/90:hover { background-color: rgba(255, 255, 255, 0.9); }

/* -- Texto gradiente (SectionNumeros) -- */
.text-gradient-neutral {
  background: linear-gradient(to bottom right, var(--color-neutral-100), #8a7575, var(--color-neutral-100));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* -- Texto transparente -- */
.text-transparent {
  color: transparent;
}

/* -- Energy Line — fio decorativo de energia -- */
.energy-line {
    background-color: var(--color-neutral-borda);
    pointer-events: none;
}
.energy-line--h { height: 2px; }
.energy-line--v { width: 2px; }

/* -- Energy Node — losango decorativo (quadrado girado 45°) --
   Marca os cantos/nós da malha estrutural (onde os fios se cruzam).

   Uso básico — solte um <span> dentro de qualquer container position:relative:
     <span class="energy-node energy-node--tl"></span>

   Variantes: --sm (5px) / --lg (10px) ; --primary / --white
   Ajuste fino (sem perder a centralização do canto):
     style="--node-tx:-5px; --node-ty:75px"
   Posição livre (fora dos cantos): defina top/left/bottom/right inline ou
   numa regra da seção; o losango gira no próprio eixo respeitando tx/ty. */
.energy-node {
    --node-size: 8px;
    --node-color: var(--color-neutral-borda);
    --node-edge: -1px; /* cavalga o centro da linha da borda (≈ metade dos 2px). Use 0 em caixas sem borda. */
    --node-tx: 0px;   /* ajuste fino horizontal */
    --node-ty: 0px;   /* ajuste fino vertical   */

    position: absolute;
    width: var(--node-size);
    height: var(--node-size);
    background-color: var(--node-color);
    transform: translate(var(--node-tx), var(--node-ty)) rotate(45deg);
    z-index: 3;
    pointer-events: none;
}

/* Cantos — centralizado sobre a intersecção (cavalga a linha da borda) */
.energy-node--tl { top: var(--node-edge);    left: var(--node-edge);
    transform: translate(calc(-50% + var(--node-tx)), calc(-50% + var(--node-ty))) rotate(45deg); }
.energy-node--tr { top: var(--node-edge);    right: var(--node-edge);
    transform: translate(calc(50%  + var(--node-tx)), calc(-50% + var(--node-ty))) rotate(45deg); }
.energy-node--bl { bottom: var(--node-edge); left: var(--node-edge);
    transform: translate(calc(-50% + var(--node-tx)), calc(50%  + var(--node-ty))) rotate(45deg); }
.energy-node--br { bottom: var(--node-edge); right: var(--node-edge);
    transform: translate(calc(50%  + var(--node-tx)), calc(50%  + var(--node-ty))) rotate(45deg); }

/* Tamanhos */
.energy-node--sm { --node-size: 5px; }
.energy-node--lg { --node-size: 10px; }

/* Cores */
.energy-node--primary { --node-color: var(--color-primary-pure); }
.energy-node--white   { --node-color: #ffffff; }

/* Host: qualquer .orc-section__main que contenha um losango precisa ancorar
   (relative), não cortar (overflow visible) e ficar ACIMA do conteúdo vizinho
   (z-index: imagens/vídeos do tema usam z-index até 12) para o nó que cavalga
   a borda não ser coberto. Evita sobrescrever o overflow:hidden base caso a caso. */
.orc-section__main:has(> .energy-node) {
    position: relative;
    overflow: visible;
    z-index: 13;
}

/* -- Loading -- */
.loading-lazy { content-visibility: auto; }

/* -- Scrollbar hide -- */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* -- Visibility por breakpoint -- */
.mobile-only { display: none; }
.desktop-only { display: initial; }
@media (max-width: 1024px) {
  .mobile-only { display: initial; }
  .desktop-only { display: none; }
}