/* Movimento de entrada de um site clonado — ver kb-motion.js.
 *
 * O estado escondido só existe quando o JS está vivo (`html[data-kb-motion]`).
 * Sem JS não há regra nenhuma a aplicar e o conteúdo aparece — que é como tem
 * de ser: 1211 elementos deste clone estiveram invisíveis por se ter feito o
 * contrário, com o estado inicial gravado no HTML.
 */
html[data-kb-motion] [data-kb-anim]:not([data-kb-anim-on]) {
  opacity: 0;
}
html[data-kb-motion] [data-kb-anim="fade-up"]:not([data-kb-anim-on]) {
  transform: translateY(var(--kb-anim-y, 40px));
}
html[data-kb-motion] [data-kb-anim="fade-down"]:not([data-kb-anim-on]) {
  transform: translateY(calc(var(--kb-anim-y, 40px) * -1));
}
html[data-kb-motion] [data-kb-anim="fade-left"]:not([data-kb-anim-on]) {
  transform: translateX(var(--kb-anim-x, 40px));
}
html[data-kb-motion] [data-kb-anim="fade-right"]:not([data-kb-anim-on]) {
  transform: translateX(calc(var(--kb-anim-x, 40px) * -1));
}

/* A física: a curva e a duração do Framer, que é de onde vêm estes clones —
 * 0,6s com uma saída suave, sem o ressalto que dá ar de brinquedo.
 *
 * O ATRASO (`--kb-anim-d`) é o que transforma peças soltas numa ESCADA: o
 * sobretítulo, depois o título, depois o parágrafo, depois os botões. Medido
 * contra a origem, é esta a diferença entre uma secção que «aparece» e uma
 * secção que entra. O valor é escrito pelo kb-motion.js a partir do
 * `data-kb-anim-d` que o marcador pôs no HTML. */
html[data-kb-motion] [data-kb-anim] {
  transition:
    opacity 0.6s cubic-bezier(0.44, 0, 0.22, 1),
    transform 0.6s cubic-bezier(0.44, 0, 0.22, 1);
  transition-delay: var(--kb-anim-d, 0ms);
}
/* O INSTANTE EM QUE SE ESCONDE não é uma animação: enquanto o kb-motion.js põe
 * as peças no estado inicial, as transições estão desligadas. Sem isto via-se
 * a página inteira a apagar-se durante 0,6 s antes de começar a entrar — o
 * contrário do que se quer. */
html[data-kb-motion-preparar] [data-kb-anim] {
  transition: none !important;
}
/* `will-change` só enquanto está por entrar: mantê-lo depois é uma camada de
 * composição por elemento que fica lá para sempre — com 150 peças marcadas
 * isso é memória de vídeo gasta a olhar para conteúdo já parado. */
html[data-kb-motion] [data-kb-anim]:not([data-kb-anim-on]) {
  will-change: opacity, transform;
}
html[data-kb-motion] [data-kb-anim][data-kb-anim-on] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html[data-kb-motion] [data-kb-anim] {
    transition: none;
    transition-delay: 0ms;
    opacity: 1;
    transform: none;
  }
}

/* ─── FAIXAS ROLANTES ───────────────────────────────────────────────────────
 * O carril (<ul>) anda de forma contínua e o invólucro corta o que sai fora.
 *
 * O passo é a largura de UMA cópia do conteúdo, incluindo o espaço que a
 * separa da seguinte — é a única distância que faz a volta ser invisível; com
 * qualquer outra vê-se um salto a cada ciclo. A largura é medida no navegador
 * (kb-motion.js) e entra aqui por variável, porque depende da língua: «Indústria
 * Transformadora» não mede o mesmo que «Manufacturing».
 *
 * Só anda depois de medida (`data-kb-faixa-on`) e só enquanto está no ecrã
 * (`data-kb-faixa-vis`): uma faixa a animar fora de vista é bateria a arder
 * num telemóvel para não se ver nada. */
/* O `!important` aqui não é preguiça: o CSS do clone viaja em `<style>` DENTRO
 * do corpo, ou seja DEPOIS deste ficheiro, e à mesma especificidade ganha o
 * último a ser lido. Medido: sem isto, o carril recebia `data-kb-faixa-on`,
 * as variáveis certas e o `overflow: hidden` — e continuava parado, porque a
 * folha do construtor repunha `animation: none` e `overflow: visible`. */
[data-kb-faixa-caixa] {
  overflow: hidden !important;
}
[data-kb-faixa] {
  width: max-content !important;
  max-width: none !important;
  /* sem isto o carril dobra as cópias para a linha de baixo em vez de as pôr
     em fila, e a faixa cresce em altura em vez de andar */
  flex-wrap: nowrap !important;
}
[data-kb-faixa] > * {
  flex: 0 0 auto !important;
}
/* propriedades separadas e não o atalho `animation:` — um atalho com `var()`
 * lá dentro é frágil de mais para uma coisa que tem de andar sempre */
[data-kb-faixa][data-kb-faixa-on] {
  animation-name: kb-faixa !important;
  animation-duration: var(--kb-faixa-dur, 30s) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-play-state: paused !important;
  will-change: transform;
}
[data-kb-faixa][data-kb-faixa-on][data-kb-faixa-vis] {
  animation-play-state: running !important;
}
/* o sentido contrário é a MESMA animação ao contrário: duas faixas irmãs a
 * andar em sentidos opostos é o que a origem faz na fila de sectores */
[data-kb-faixa="dir"][data-kb-faixa-on] {
  animation-direction: reverse !important;
}
@keyframes kb-faixa {
  from { transform: translateX(0); }
  to { transform: translateX(var(--kb-faixa-passo, -50%)); }
}

@media (prefers-reduced-motion: reduce) {
  [data-kb-faixa][data-kb-faixa-on] {
    animation: none;
  }
}

/* ─── WIDGET DO VENDEDOR DO TEMPLATE (2026-09-03) ──────────────────────────
   Os templates Framer à venda trazem um cartão promocional fixo — «New
   Template!», «Buy Template» — que o próprio vendedor nomeia «… - DELETE ME».
   Num clone para um cliente é publicidade de terceiros no domínio dele; a casa
   já o excluía por regra nos temas clonados (o appear @1.8/@1.9 do vendedor),
   e aqui apanha-se pelo nome. Apanhado ao vivo no art-x. */
[data-framer-name$="DELETE ME"],
[name$="DELETE ME"],
[data-framer-name^="Buy Template"],
[data-framer-name^="Buy for $"] { display: none !important; }