.elementor-2276 .elementor-element.elementor-element-869ac5f{--display:flex;--min-height:70vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2276 .elementor-element.elementor-element-869ac5f:not(.elementor-motion-effects-element-type-background), .elementor-2276 .elementor-element.elementor-element-869ac5f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-5603445 );}.elementor-2276 .elementor-element.elementor-element-53d45a9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:110px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2276 .elementor-element.elementor-element-53d45a9.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2276 .elementor-element.elementor-element-dc77ce1{width:var( --container-widget-width, 107.078% );max-width:107.078%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:107.078%;--container-widget-flex-grow:0;text-align:start;}.elementor-2276 .elementor-element.elementor-element-dc77ce1.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2276 .elementor-element.elementor-element-dc77ce1 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:48px;font-weight:600;color:var( --e-global-color-513ef97 );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-2276 .elementor-element.elementor-element-74288df{font-family:"Helvetica", Sans-serif;font-size:16px;font-weight:400;color:#AFB2B6;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-2276 .elementor-element.elementor-element-c2fbe6d .elementor-button{background-color:var( --e-global-color-secondary );font-family:"Inter", Sans-serif;font-weight:600;}.elementor-2276 .elementor-element.elementor-element-c2fbe6d.elementor-element{--align-self:flex-start;}.elementor-2276 .elementor-element.elementor-element-d98df8b{width:var( --container-widget-width, 107.932% );max-width:107.932%;--container-widget-width:107.932%;--container-widget-flex-grow:0;font-family:"Helvetica", Sans-serif;font-weight:400;color:#AFB2B6;}.elementor-2276 .elementor-element.elementor-element-d98df8b.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2276 .elementor-element.elementor-element-dd21f94{--display:flex;--min-height:80px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2276 .elementor-element.elementor-element-dd21f94:not(.elementor-motion-effects-element-type-background), .elementor-2276 .elementor-element.elementor-element-dd21f94 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-5603445 );}.elementor-2276 .elementor-element.elementor-element-06fcffb{--display:flex;--min-height:50vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2276 .elementor-element.elementor-element-06fcffb:not(.elementor-motion-effects-element-type-background), .elementor-2276 .elementor-element.elementor-element-06fcffb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-5603445 );}@media(max-width:767px){.elementor-2276 .elementor-element.elementor-element-dc77ce1{text-align:start;}.elementor-2276 .elementor-element.elementor-element-dc77ce1 .elementor-heading-title{font-size:25px;}.elementor-2276 .elementor-element.elementor-element-c2fbe6d.elementor-element{--align-self:center;}.elementor-2276 .elementor-element.elementor-element-c2fbe6d .elementor-button{font-size:12px;}.elementor-2276 .elementor-element.elementor-element-d98df8b{width:var( --container-widget-width, 321px );max-width:321px;--container-widget-width:321px;--container-widget-flex-grow:0;font-size:12px;}}@media(min-width:768px){.elementor-2276 .elementor-element.elementor-element-53d45a9{--width:60%;}}@media(max-width:1024px) and (min-width:768px){.elementor-2276 .elementor-element.elementor-element-53d45a9{--width:667.797px;}}/* Start custom CSS for button, class: .elementor-element-c2fbe6d */.elementor-2276 .elementor-element.elementor-element-c2fbe6d {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  border-radius: 5px; /* <-- Novo arredondamento */
  border: 1px solid #cccccc;
  background-color: #2e2e2e;
}

.elementor-2276 .elementor-element.elementor-element-c2fbe6d::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  transition: all 0.4s ease;
  z-index: 0;
}

.elementor-2276 .elementor-element.elementor-element-c2fbe6d:hover::before {
  left: 0;
}

.elementor-2276 .elementor-element.elementor-element-c2fbe6d .elementor-button-text {
  position: relative;
  z-index: 1;
  color: #ffffff;
  transition: color 0.4s ease;
}

.elementor-2276 .elementor-element.elementor-element-c2fbe6d:hover .elementor-button-text {
  color: #2e2e2e;
}

.elementor-2276 .elementor-element.elementor-element-c2fbe6d:hover {
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.3);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-869ac5f *//* --- EFEITO CÉU ESTRELADO PARA ELEMENTOR (FUNDO PRETO) --- */

/* 1. Prepara o container (a sua seção/coluna) */
.elementor-2276 .elementor-element.elementor-element-869ac5f {
  position: relative; /* Necessário para posicionar as estrelas */
  overflow: hidden;   /* Esconde as estrelas que saem da área */
  background: #000000; /* Fundo preto sólido, conforme solicitado */
}

/* 2. Cria as camadas de estrelas com pseudo-elementos */
.elementor-2276 .elementor-element.elementor-element-869ac5f::before,
.elementor-2276 .elementor-element.elementor-element-869ac5f::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px; /* Largura base para as sombras */
  height: 1px; /* Altura base para as sombras */
  pointer-events: none; /* Permite clicar nos elementos abaixo */
}

/* Camada 1: Estrelas pequenas e distantes */
.elementor-2276 .elementor-element.elementor-element-869ac5f::before {
  /* Gera 50 estrelas pequenas com box-shadow */
  box-shadow: 7vw 8vh #FFF, 89vw 9vh #FFF, 66vw 88vh #FFF, 48vw 15vh #FFF, 7vw 80vh #FFF, 21vw 44vh #FFF, 25vw 24vh #FFF, 54vw 49vh #FFF, 73vw 2vh #FFF, 91vw 49vh #FFF, 8vw 28vh #FFF, 88vw 3vh #FFF, 87vw 6vh #FFF, 62vw 88vh #FFF, 53vw 93vh #FFF, 3vw 69vh #FFF, 62vw 5vh #FFF, 1vw 22vh #FFF, 65vw 80vh #FFF, 55vw 1vh #FFF, 7vw 8vh #FFF, 89vw 9vh #FFF, 66vw 88vh #FFF, 48vw 15vh #FFF, 7vw 80vh #FFF, 21vw 44vh #FFF, 25vw 24vh #FFF, 54vw 49vh #FFF, 73vw 2vh #FFF, 91vw 49vh #FFF, 8vw 28vh #FFF, 88vw 3vh #FFF, 87vw 6vh #FFF, 62vw 88vh #FFF, 53vw 93vh #FFF, 3vw 69vh #FFF, 62vw 5vh #FFF, 1vw 22vh #FFF, 65vw 80vh #FFF, 55vw 1vh #FFF, 15vw 30vh #FFF, 95vw 50vh #FFF, 40vw 75vh #FFF, 5vw 5vh #FFF, 33vw 66vh #FFF, 77vw 88vh #FFF, 22vw 11vh #FFF, 44vw 33vh #FFF, 99vw 22vh #FFF, 50vw 10vh #FFF;
  animation: animEstrelas 150s linear infinite;
}

/* Camada 2: Estrelas maiores e mais próximas */
.elementor-2276 .elementor-element.elementor-element-869ac5f::after {
  /* Gera 20 estrelas maiores com box-shadow */
  box-shadow: 2vw 46vh 2px #FFF, 25vw 71vh 2px #FFF, 21vw 82vh 3px #FFF, 16vw 4vh 2px #FFF, 82vw 37vh 2px #FFF, 30vw 21vh 2px #FFF, 6vw 91vh 3px #FFF, 87vw 9vh 2px #FFF, 28vw 68vh 2px #FFF, 3vw 41vh 2px #FFF, 40vw 37vh 3px #FFF, 80vw 55vh 2px #FFF, 24vw 89vh 2px #FFF, 85vw 3vh 3px #FFF, 45vw 23vh 2px #FFF, 96vw 56vh 2px #FFF, 42vw 10vh 2px #FFF, 5vw 4vh 3px #FFF, 81vw 9vh 2px #FFF, 50vw 50vh 2px #FFF;
  animation: animEstrelas 250s linear infinite;
}

/* 3. Define a animação de movimento para o parallax */
@keyframes animEstrelas {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-1000px);
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-12dd197 *//* =======================================================
   Seção de Serviços :: VIBRIUM COMPANY - Versão 3.2 (Efeito Corrigido)
   Design: Profissional, Criativo e Otimizado
   ======================================================= */

/* ------------------- */
/* Variáveis Globais
/* ------------------- */
:root {
  --cor-fundo: #ccccc;
  --cor-card: #121212;
  --cor-borda: #252525;
  --cor-borda-hover: #777777;
  --cor-texto-primario: #EDEDED;
  --cor-texto-secundario: #9A9A9A;
  --cor-cta: #FFFFFF;
  
  /* Cores para o Efeito "Fragmento de Luz" */
  --cor-fragmento-1: rgba(255, 255, 255, 0.03);
  --cor-fragmento-2: rgba(255, 255, 255, 0.04);
}

/* ------------------- */
/* Estrutura Principal
/* ------------------- */
.vibrium-servicos {
  background-color: var(--cor-fundo);
  padding: clamp(10px, 8vw, 10px) 0;
  color: var(--cor-texto-primario);
}

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-title {
  text-align: center;
  font-size: clamp(2.2rem, 5vw, 3rem); /* Tipografia Fluida */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: clamp(48px, 6vw, 72px);
}

/* ------------------- */
/* Grid de Serviços :: CORAÇÃO DA RESPONSIVIDADE
/* ------------------- */
.servicos-grid {
  display: grid;
  /* Cria colunas flexíveis com no mínimo 300px, adaptando-se automaticamente ao espaço */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 3vw, 32px);
}

/* ------------------- */
/* Card de Serviço (Core)
/* ------------------- */
.servico-card {
  display: flex;
  text-decoration: none;
  background-color: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), 
              border-color 0.4s ease;
  
  /* Otimização de performance para animações */
  will-change: transform, border-color;

  /* Animação de entrada com delay via variável */
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInCard 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  animation-delay: var(--anim-delay, 0s);
}

@keyframes fadeInCard {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------------- */
/* EFEITO CRIATIVO: "FRAGMENTO DE LUZ" :: CORRIGIDO PARA TODOS OS DISPOSITIVOS
/* ------------------------------------- */
.servico-card-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
}

.servico-card-bg::before,
.servico-card-bg::after {
  content: '';
  position: absolute;
  /* 
    CORREÇÃO: Tamanho drasticamente aumentado para garantir a cobertura 
    em qualquer proporção de card (ex: telas de celular muito altas).
  */
  width: 400%; 
  height: 400%;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
  z-index: 1;
}

.servico-card-bg::before {
  background: var(--cor-fragmento-1);
  /* 
    CORREÇÃO: A lógica de posicionamento foi simplificada para ser mais robusta.
    Colocamos o ponto de pivô (bottom right) exatamente no canto superior esquerdo do card.
  */
  top: -400%;
  left: -400%;
  transform-origin: bottom right;
  transform: rotate(45deg) scaleY(0);
}

.servico-card-bg::after {
  background: var(--cor-fragmento-2);
  /* 
    CORREÇÃO: Colocamos o ponto de pivô (top left) exatamente
    no canto inferior direito do card.
  */
  bottom: -400%;
  right: -400%;
  transform-origin: top left;
  transform: rotate(45deg) scaleY(0);
}

/* ------------------- */
/* Interação (Hover e Focus)
/* ------------------- */
/* MELHORIA: Unificado :hover e :focus-visible para acessibilidade via teclado */
.servico-card:hover,
.servico-card:focus-visible {
  outline: none; /* Remove o outline padrão em favor da nossa borda customizada */
  transform: translateY(-10px); /* Levemente reduzido para um efeito mais sutil */
  border-color: var(--cor-borda-hover);
}

.servico-card:hover .servico-card-bg::before,
.servico-card:hover .servico-card-bg::after,
.servico-card:focus-visible .servico-card-bg::before,
.servico-card:focus-visible .servico-card-bg::after {
  transform: rotate(45deg) scaleY(1);
}

/* ------------------- */
/* Conteúdo do Card
/* ------------------- */
.servico-card-content {
  padding: clamp(24px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  width: 100%;
}

.icon-servico {
  color: var(--cor-texto-primario);
  margin-bottom: 20px;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.servico-card:hover .icon-servico,
.servico-card:focus-visible .icon-servico {
  transform: scale(1.1) rotate(-5deg);
}

.servico-card h3 {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--cor-texto-primario);
}

.servico-card p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cor-texto-secundario);
  margin-bottom: 24px;
  flex-grow: 1; /* Empurra o conteúdo abaixo para o final do card */
}

/* Lista de Benefícios */
.servico-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.servico-card ul li {
  color: var(--cor-texto-secundario);
  font-size: 0.95rem;
  position: relative;
  padding-left: 28px;
}

.servico-card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%239A9A9A" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

.servico-card:hover ul li::before,
.servico-card:focus-visible ul li::before {
  transform: translateY(-50%) scale(1.1);
}

/* Call to Action (CTA) */
.servico-cta {
  color: var(--cor-cta);
  font-weight: 500;
  margin-top: 28px;
  opacity: 0.7; /* Aumentado um pouco para melhor visibilidade inicial */
  align-self: flex-start;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.servico-card:hover .servico-cta,
.servico-card:focus-visible .servico-cta {
  opacity: 1;
  transform: translateX(5px);
}/* End custom CSS */