/* RETINA DISPLAY STYLES */ 
/* Aplica o cursor personalizado APENAS em dispositivos com rato/trackpad */
@media (pointer: fine) and (hover: hover) {
  
  /* Oculta o rato padrão em TODA a página e elementos */
  html, body, a, button, input, textarea, [role="button"] {
    cursor: none !important;
  }

  /* O cursor base (Quadrado 16x16px) */
  #custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background-color: #0A2EE2;
    border-radius: 0px;
    pointer-events: none;
    z-index: 999999;
    mix-blend-mode: multiply;

    /* Garante que o crescimento acontece a partir do centro exato */
    transform-origin: center center;

    /* Animação suave para a transformação (scale) e arredondamento */
    transition: 
      transform 0.25s cubic-bezier(0.25, 1, 0.5, 1),
      border-radius 0.25s cubic-bezier(0.25, 1, 0.5, 1),
      mix-blend-mode 0.2s ease;
      
    will-change: transform, border-radius;
  }

  /* Estado de Hover (Redondo) */
  #custom-cursor.is-hovered {
    border-radius: 50%;
  }
}

/* Oculta o elemento do cursor em ecrãs táteis / mobile */
@media (pointer: coarse), (hover: none) {
  #custom-cursor {
    display: none !important;
  }
}


/* ========================================================================================================
   Header antes do scroll
   ======================================================================================================== */
/* header geral */
.SK01-header {
	transition: all 2s ease;
}

/* Logo */
.SK01-h-logo {
    transition: width 2s ease;
}
/* Faz o SVG expandir até 100% da largura do contêiner */
.SK01-h-logo .breakdance-icon-atom,
.SK01-h-logo svg {
  width: 100% !important;
  height: 100% !important;
}

/* icon de menu escondido */
.SK01-header .SK01-menu-pos-scroll {
	pointer-events: none; /* Impede cliques enquanto estiver invisível */
}
.SK01-menu-pos-scroll svg {
	transform: rotate(90deg);
	transition: transform 0.3s ease;
}

/* menu visivel antes do scroll */
.SK01-header .SK01-menu-pre-scroll {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.SK01-menu {
    height: 312px;
	transition: all 2s ease;
}

/* ========================================================================================================
   Header depois do scroll
   ======================================================================================================== */
/* header geral */
.SK01-header.SK01-scrolled {
	padding: 24px !important;
	height: calc(0vh + 80px) !important;
	align-items: center;
}

/* Logo */
.SK01-header.SK01-scrolled .SK01-h-logo {
    width: calc(0px + 224px);
}

/* Estado Após o Scroll: Visível */
.SK01-header.SK01-scrolled .SK01-menu-pos-scroll {
	pointer-events: auto; /* Reativa a interatividade */
}
.SK01-header.SK01-scrolled .SK01-menu-pos-scroll svg {
	transform: rotate(0deg);
}

/* menu visivel apos o scroll */
.SK01-header.SK01-scrolled .SK01-menu-pre-scroll {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.SK01-header.SK01-scrolled .SK01-menu {
    height: 30px;
}

/* ========================================================================================================
   Header em fundos diferentes
   ======================================================================================================== */
/* Estado 1: Texto/Elementos Pretos */
.SK01-header.header-black .SK01-menu-pos-scroll svg,
.SK01-header.header-black .SK01-h-logo svg path {
  fill: #0A2EE2;
}

/* Estado 2: Texto/Elementos Brancos */
.SK01-header.header-white .SK01-menu-pos-scroll svg,
.SK01-header.header-white .SK01-h-logo svg path {
  fill: #ffffff;
}

/* ========================================================================================================
   Cor de fundo
   ======================================================================================================== */
/* 1. O Body controla a cor do fundo da página inteira */
body {
  transition: background-color 0.6s ease, color 0.6s ease;
  margin: 0;
}

body.bg-white {
  background-color: #0A2EE2;
  color: #fff;
}

body.bg-white h2,
body.bg-white h4,
body.bg-white p,
body.bg-white path {
  color: #fff;
  fill: #fff;
}

body.bg-black {
  background-color: #fff;
  color: #000;
}

/* 2. Remova backgrounds sólidos das secções para não tapar o body nem criar linhas */
[data-header-theme] {
  background-color: transparent;
}

/* ========================================================================================================
   Scroll indicator
   ======================================================================================================== */
/* Container principal */
.SK01-scroll-progress-container {
  z-index: 100;
  pointer-events: none;
	top: 50%;
  transform: translateY(-50%);
}

/* Linha superior */
.SK01-scroll-line-top {
  height: 0px; /* Será alterado pelo JavaScript */
  flex-shrink: 0;
}

/* Retângulo/Indicador (8x8px) */
.SK01-scroll-thumb {
  flex-shrink: 0;
}

/* Linha inferior */
.SK01-scroll-line-bottom {
  width: 2px;
  flex: 1; /* Preenche o espaço restante */
}

body.bg-white .SK01-scroll-line-top,
body.bg-white .SK01-scroll-thumb,
body.bg-white .SK01-scroll-line-bottom {
  background-color: #fff;
}

body.bg-black .SK01-scroll-line-top,
body.bg-black .SK01-scroll-thumb,
body.bg-black .SK01-scroll-line-bottom {
  background-color: #0A2EE2;
}


/* ========================================================================================================
   Secção de serviços (azul)
   ======================================================================================================== */
/* Estado padrão (inativo) para os títulos */
.SK01-s3-title-01,
.SK01-s3-title-02,
.SK01-s3-title-03 {
  opacity: 0.2;
  transition: all 0.4s ease;
  margin-left: -16px;
}

.SK01-s3-title-01 .bde-icon,
.SK01-s3-title-02 .bde-icon,
.SK01-s3-title-03 .bde-icon {
  opacity: 0;
  width: 0px;
  transform: rotate(90deg);
  transition: all 0.4s ease;
}

/* Estado ativo (quando o grupo de cards correspondente está visível) */
.SK01-s3-title-01.is-active,
.SK01-s3-title-02.is-active,
.SK01-s3-title-03.is-active {
  opacity: 1;
   margin-left: 0px;
}

.SK01-s3-title-01.is-active .bde-icon,
.SK01-s3-title-02.is-active .bde-icon,
.SK01-s3-title-03.is-active .bde-icon {
  opacity: 1;
  width: 24px;
  transform: rotate(0deg);
}

/* ==========================================================================
   === SECÇÃO COM SCROLL HORIZONTAL ===
   ========================================================================== */

/* Secção exterior: define a distância total do scroll vertical */
.SK01-s4 {
  height: 350vh !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Contentor fixo: cola no topo da tela (viewport) durante o scroll */
.SK01-s4-sticky-wrapper {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Pista horizontal: contém os cartões e desliza para a esquerda */
.SK01-s4-track-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0px !important; /* Espaçamento entre os cartões */
  height: 100% !important;
  width: max-content !important;
  padding: 0px !important; /* Margem interna inicial e final */
  will-change: transform;
  box-sizing: border-box !important;
}

/* Impede que os cartões encolham no layout flex */
.SK01-s4-track-wrapper > * {
  flex-shrink: 0 !important;
}

/* Indicador de scroll: fica estático e fixo no canto inferior direito */
.SK01-s4-scroll {
  position: absolute !important;
  bottom: 2rem !important;
  right: 2rem !important;
  z-index: 10 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* ========================================================================================================
   Header antes do scroll
   ======================================================================================================== */
/* header geral */
.SK01-header {
	/* Define transições específicas e com tempos mais reativos (0.4s) em vez de 2s */
	transition: background-color 0.4s ease, padding 1s ease, height 2s ease;
	background-color: transparent; /* Ponto de partida obrigatório */
}

/* Logo */
.SK01-h-logo {
	transition: width 2s ease;
}

/* Faz o SVG expandir até 100% da largura do contêiner */
.SK01-h-logo .breakdance-icon-atom,
.SK01-h-logo svg {
	width: 100% !important;
	height: 100% !important;
}

/* icon de menu escondido */
.SK01-header .SK01-menu-pos-scroll {
	pointer-events: none; /* Impede cliques enquanto estiver invisível */
}

.SK01-menu-pos-scroll svg {
	transform: rotate(90deg);
	transition: transform 0.6s ease;
}

/* menu visivel antes do scroll */
.SK01-header .SK01-menu-pre-scroll {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.SK01-header.SK01-scrolled .SK01-menu {
	transition: bottom 2s ease, right 1s ease, height 2s ease;
}

/* ========================================================================================================
   Header depois do scroll
   ======================================================================================================== */
/* header geral */
.SK01-header.header-scrolled {
	padding: 24px !important;
	height: 80px !important; /* Simplificado de calc(0vh + 80px) */
	align-items: center;
}

/* Logo */
.SK01-header.header-scrolled .SK01-h-logo {
	width: 224px; /* Simplificado de calc(0px + 224px) */
}

/* Estado Após o Scroll: Visível */
.SK01-header.header-scrolled .SK01-menu-pos-scroll {
	pointer-events: auto; /* Reativa a interatividade */
}

.SK01-header.header-scrolled .SK01-menu-pos-scroll svg {
	transform: rotate(0deg);
}

/* menu visivel apos o scroll */
.SK01-header.header-scrolled .SK01-menu-pre-scroll {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.SK01-header.header-scrolled .SK01-menu {
	bottom: calc(100vh - 53px);
	right: 24px;
	height: 34px;
}

/* cor de fundo (Ativada via classe .SK01-header-bg) */
.bg-white .SK01-header.SK01-header-bg {
	background-color: #0A2EE2;
}

.bg-black .SK01-header.SK01-header-bg {
	background-color: #fff;
}


/* ========================================================================================================
   Cores e estilos
   ======================================================================================================== */
.sk01,
body.bg-white {
	--background-palette-primary: #0A2EE2;
	--background-palette-tertiary: #002BC7;
	--border-radious: 0px;
	}

/* 1. O Body controla a cor do fundo da página inteira */
body {
  transition: background-color 0.6s ease, color 0.6s ease;
  margin: 0;
}

/* fundo da pag branco */
body.bg-black {
  background-color: var(--background-neutral-primary);
}

body.bg-black h1,
body.bg-black h2,
body.bg-black h3,
body.bg-black h4,
body.bg-black h5,
body.bg-black h6,
body.bg-black p {
  color: var(--text-primary);
}

body.bg-black path,
body.bg-black .SK01-button h5,
body.bg-black .SK01-s4-scroll h6 {
  fill: var(--background-palette-primary);
  color: var(--background-palette-primary);
}



/* fundo da pag azul */
body.bg-white {
  background-color: var(--background-palette-primary);
  color: var(--text-secondary);
}

body.bg-white h1,
body.bg-white h2,
body.bg-white h3,
body.bg-white h4,
body.bg-white h5,
body.bg-white h6,
body.bg-white p,
body.bg-white path {
  color: var(--text-secondary);
  fill: var(--text-secondary);
}


/* ==== Header em fundos diferentes ==== */
/* fundo azul */
.SK01-header.header-black .SK01-menu-pos-scroll svg,
.SK01-header.header-black .SK01-h-logo svg path {
  fill: var(--background-palette-primary);
}

/* fundo branco */
.SK01-header.header-white .SK01-menu-pos-scroll svg,
.SK01-header.header-white .SK01-h-logo svg path {
  fill: var(--background-neutral-primary);
}

/* ==== Secçao de serviços ==== */
/* textos das cards nao devem mudar a cor */
.SK01-servicos h3,
.SK01-servicos p,
.SK01-servicos path {
  color: var(--text-primary) !important;
  fill: var(--background-palette-primary) !important;
}

.SK01-icon-servicos svg  {
    width: 100% !important;
    height: 100% !important;
}



/* ==== Secçao de ctas ==== */
/* primeiro cta - fundo da pag azul */
.bg-white .SK01-s5-cta1 {
  background-color: var(--background-palette-tertiary);
}
/* primeiro cta - o texto e sempre branco */
.SK01-s5-cta1 h5,
.SK01-s5-cta1 .SK01-button h5,
.bg-white .SK01-s5-cta1 p,
.SK01-s5-cta1 .SK01-button path {
  color: var(--text-secondary) !important;
  fill: var(--text-secondary) !important;
}

/* segundo cta - o texto e sempre preto */
.SK01-s5-cta2 h5,
.SK01-s5-cta2 p {
  color: var(--text-primary) !important;
}
/* segundo cta - o botao e sempre azul */
.SK01-s5-cta2 .SK01-button h5,
.SK01-s5-cta2 .SK01-button path {
  fill: var(--background-palette-primary) !important;
  color: var(--background-palette-primary) !important;
}


/* ========================================================================================================
   Scroll indicator
   ======================================================================================================== */
/* Container principal */
.SK01-scroll-progress-container {
  z-index: 100;
  pointer-events: none;
	top: 50%;
  transform: translateY(-50%);
}

/* Linha superior */
.SK01-scroll-line-top {
  height: 0px; /* Será alterado pelo JavaScript */
  flex-shrink: 0;
}

/* Retângulo/Indicador (8x8px) */
.SK01-scroll-thumb {
  flex-shrink: 0;
}

/* Linha inferior */
.SK01-scroll-line-bottom {
  width: 2px;
  flex: 1; /* Preenche o espaço restante */
}

body.bg-white .SK01-scroll-line-top,
body.bg-white .SK01-scroll-thumb,
body.bg-white .SK01-scroll-line-bottom {
  background-color: #fff;
}

body.bg-black .SK01-scroll-line-top,
body.bg-black .SK01-scroll-thumb,
body.bg-black .SK01-scroll-line-bottom {
  background-color: #0A2EE2;
}

/* ========================================================================================================
   Secção de video
   ======================================================================================================== */
.SK01-s1 .ee-video-container {
	height: 100vh;
	width: 100px;
}

.SK01-s1 video {
	border-radius: 0px !important;
}


/* ========================================================================================================
   Secção de texto
   ======================================================================================================== */
.SK01-s2 {
  position: relative;
}


.SK01-s2-text {
  white-space: normal; /* Suporta múltiplas linhas */
}

/* Estilo para cada letra gerada */
.SK01-s2-text .char {
  opacity: 0;
  transition: opacity 0.1s ease;
}

/* Mantém os espaços com largura correta */
.SK01-s2-text .char-space {
  display: inline-block;
  width: 0.25em; 
}

/* Quando a letra fica visível */
.SK01-s2-text .char.visible {
  opacity: 1;
}

/* ========================================================================================================
   Secção de serviços (azul)
   ======================================================================================================== */
/* Estado padrão (inativo) para os títulos */
.SK01-s3-title-01,
.SK01-s3-title-02,
.SK01-s3-title-03 {
  opacity: 0.2;
  transition: all 0.4s ease;
  margin-left: -16px;
}

.SK01-s3-title-01 .bde-icon,
.SK01-s3-title-02 .bde-icon,
.SK01-s3-title-03 .bde-icon {
  opacity: 0;
  width: 0px;
  transform: rotate(90deg);
  transition: all 0.4s ease;
}

/* Estado ativo (quando o grupo de cards correspondente está visível) */
.SK01-s3-title-01.is-active,
.SK01-s3-title-02.is-active,
.SK01-s3-title-03.is-active {
  opacity: 1;
   margin-left: 0px;
}

.SK01-s3-title-01.is-active .bde-icon,
.SK01-s3-title-02.is-active .bde-icon,
.SK01-s3-title-03.is-active .bde-icon {
  opacity: 1;
  width: 24px;
  transform: rotate(0deg);
}

/* Titulos com scroll horizontal em mobile */
@media (max-width: 1023px) {
  /* Permite o scroll horizontal no container dos títulos */
  .SK01-s3-titles-conteiner {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
	  transition: all 0.4s ease;
    /* Oculta a barra de scroll */
    -ms-overflow-style: none;  /* IE/Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .SK01-s3-titles-conteiner::-webkit-scrollbar {
    display: none; /* Chrome, Safari e Opera */
  }

  /* Impede que os títulos encolham */
  .SK01-s3-titles-conteiner > div {
    flex-shrink: 0;
  }
}


/* ==========================================================================
   === SECÇÃO COM SCROLL HORIZONTAL ===
   ========================================================================== */

/* Secção exterior: define a distância total do scroll vertical */
.SK01-s4 {
  height: 350vh !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Contentor fixo: cola no topo da tela (viewport) durante o scroll */
.SK01-s4-sticky-wrapper {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Pista horizontal: contém os cartões e desliza para a esquerda */
.SK01-s4-track-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0px !important; /* Espaçamento entre os cartões */
  height: 100% !important;
  width: max-content !important;
  padding: 0px !important; /* Margem interna inicial e final */
  will-change: transform;
  box-sizing: border-box !important;
}

/* Impede que os cartões encolham no layout flex */
.SK01-s4-track-wrapper > * {
  flex-shrink: 0 !important;
}

/* Indicador de scroll: fica estático e fixo no canto inferior direito */
.SK01-s4-scroll {
  position: absolute !important;
  bottom: 2rem !important;
  right: 2rem !important;
  z-index: 10 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}