@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Saira+Stencil+One&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Libertinus+Keyboard&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Saira+Stencil+One&display=swap");

::selection {
  background-color: rgb(247, 239, 239);
}
.slick-next:before {
  color: var(--cor-secundaria);
  content: "→";
  font-size: 50px;
}

.slick-prev:before {
  content: "←";
  z-index: 9;
  font-size: 50px;
  color: var(--cor-secundaria);
}
.slick-prev {
  left: -100px;
}
.slick-next {
  right: -100px;
}
.boxDepoimentos .slick-track {
  height: 500px;
}

.lity-close,
.lity-close:hover {
  top: 15%;
  right: 10%;
  font-size: 5em;
}

/* FIM BACKGROUND SUAVE EM TODO SITE  */
main{
  background: linear-gradient(to right, black, white);
  background-size: 100% 100%;
  opacity: 0;
  animation: fadeIn 3s ease-in forwards;
  /* background-image:url(../img/v748-toon-124.jpg); */
  background-attachment: fixed;
}


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* FIM BACKGROUND SUAVE EM TODO SITE  */


@layer padrao {
  :root {
    /*cores*/
    --cor_preta: #000;
    --cor_principal: #161540;
    --cor_texto-normal: #fff;
    --cor_texto-suave: #302e59;
    --cor_destaque: #d99543;
    --cor_adicional: #bf6517;
    --cor_adicional-2: #73563d;
    --cor-texto: #c0bec7;
    --cor-primaria: #100b3c;
    --cor-secundaria: #e29f36;
    --largura-maxima: 1500px;
    --tamanho-font: 16px;
    --font-menu: "Open Sans", sans-serif;
    --font-texto: "Roboto", sans-serif;
    --font-tecla: "Libertinus Keyboard", system-ui;
  }

  .containerSections {
    max-width: var(--largura-maxima);
    width: 100%;
    margin: 0 auto;
  }

  .sections {
    padding: 50px 0;
  }

  p {
    font-size: 1em;
    font-family: var(--font-texto);
  }
  h1 h2 h3 h4 h5 h6 {
    font-family: var(--font-tecla);
  }

  a {
    text-decoration: none;
    font-family: var(--font-menu);
  }

  .container {
    max-width: 1500px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
  }
  .tecla{

    display: inline-block;
    transform: translateY(-10px);
    transition: transform 120ms linear, box-shadow 120ms linear,
    120ms linear;
    cursor: pointer;
    user-select: none;
  }

  h2 .tecla:hover {
    color: var(--cor_adicional-2);
    transform: translateY(4px) !important;
    cursor: default;
    transition: 0.1s;
  }
}

@layer nav {
  header {
    width: 100vw;
    z-index: 999999;
    position: fixed;
    background: #231c23;
    background: linear-gradient(
      90deg,
      rgba(46, 45, 46, 0.9) 0%,
      rgba(221, 220, 220, 0.9) 100%
    );
  }
  .topo {
    max-width: 1500px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 103px;
    margin: 0 auto;
  }

  .logo {
    width: 125px;
    height: 125px;
    text-indent: -9999px;
    background-image: url(../img/logoXlaranja.png);
    background-repeat: no-repeat;
    background-size: 110px;
    object-fit: cover;
    transition: 0.5s;
  }

  .logo:hover {
    filter: brightness(1.2);
  }
  .container div {
    color: aliceblue;
    font-family: "Roboto";
    font-size: 2em;
    display: flex;
    align-items: center;
  }
  .menu {
    display: flex;    
    justify-content: center;
    gap: 2em;
  }

  .menu li a {
    display: flex;
    text-decoration: none;
    font-family: "Roboto";
    color: aliceblue;
    font-size: 1.25em;
    transition: 0.3s;
    position: relative;
    padding-block: 0.5em;
    padding-inline: 1.2em;
    transition: color 0.3s ease, transform 0.3s ease;
  }
  .menu li a:hover {
    display: flex;
    color: #e9a335;
  }

  .menu li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: var(--cor-secundaria);
    box-shadow: 0 0 10px var(--cor-secundaria);
    transition: width 0.3s ease;
  }

  .menu li a:hover::after,
  .menu li a.ativo::after {
    width: 100%;
  }

  .redesSociais {
    display: flex;
    justify-content: space-around;
    width: 250px;
    padding: 10px;
    border-radius: 50px;
  }

  .redesSociais a img {
    width: 40px;
    border-radius: 50%;
    background-color: #0f0f0f;
    transition: 0.5s;
  }

  .redesSociais a img:hover {
    background-color: #fc7c05;
  }

  .ativo {
    color: var(--cor-secundaria) !important;
  }
}

@layer main {
  @layer home {
    .home {
      background: #00000f;
      background-image: url(../img/fundoSobreNos.png);
      background-size: contain;
      background-position: right bottom;
      background-repeat: no-repeat;
      background-attachment: fixed;
      padding: 160px 0;
    }

    .txt {
      width: var(--largura-maxima);
      margin: 0 auto;
    }
    .txt h2 {
      color: #fff;
      font-size: 7em;
      text-align: start;
      font-family: "Open Sans";
      font-weight: bold;
      margin-bottom: 15px;
    }

    .txt h3 {
      font-size: 2.5em;
      font-family: var(--font-texto);
      font-weight: 100;
      color: var(--cor-texto);
    }
    .containerSections {
      margin-top: 50px;
    }

    .txtHome {
      width: 55%;
      text-indent: 1.25em;
      line-height: 1.25em;
      font-size: 1.5em;
      color: var(--cor-texto);
      text-align: justify;
    }
  }
  @layer sobre {
    #sobre {      
      padding: 50px 0;
     
      color: #fff;
    }    

    .txtSobre h2 {
      font-family: var(--font-tecla) !important;
      font-size: 3em !important;
      /* text-shadow: 0px 10px 10px #636262; */
      margin-bottom: 50px !important;
      text-align: left;
    }

    #sobre .teste{
      width: 805px;
    }
    .txtSobre h3 {
      font-family: var(--font-tecla);
      font-size: 5em;
      text-align: left;
     
    }

    .ctrl {
      display: inline-block;
      transform: translateY(-10px);
      transition: transform 120ms linear, box-shadow 120ms linear,
      120ms linear;
      cursor: pointer;
      user-select: none;
    }

    .ctrl:hover {
      color: var(--cor-secundaria);
      transform: translateY(4px);
  
    }

    /* efeito ao clicar (afunda mais) */
    .ctrl:active {
      transform: translateY(-7px);
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
      transition-duration: 60ms;
    }

    .keylike {
      --depth: 6px; /* quanto "afunda" */
      padding: 12px 20px;
      font-size: 1em;
      border-radius: 8px;
      transform: translateY(-5px);
      transition: transform 200ms linear, box-shadow 200ms linear;
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      outline: none;
    }

    /* Efeito quando clicado com mouse (active) MAS sem ser focus-visible
    :active também dispara no teclado; por isso usamos :not(:focus-visible)
    para tentar limitar ao clique do mouse */
    .keylike:active:not(:focus-visible) {
      transform: translateY(var(--depth));
      box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.12),
        /* sombra reduzida quando afunda */ inset 0 6px 8px rgba(0, 0, 0, 0.08);
      color: var(--cor-secundaria);
    }

    /* Opcional: feedback visual se foco por teclado (acessibilidade) */
    .keylike:focus-visible {
      box-shadow: 0 var(--depth) 0 0 rgba(0, 0, 0, 0.18),
        0 0 0 3px rgba(100, 150, 250, 0.18);
    }

    /* Pequena melhoria para touch devices (evita linger de :active em iOS) */
    @media (hover: none) {
      .keylike {
        transition: transform 80ms linear, box-shadow 80ms linear;
      }
    }

    .click {
      display: none;
      border-radius: 25px;
      color: rgb(253, 253, 253);
      font-size: 1.25em;
    }

    .teste:hover .click {
      font-family: var(--font-texto);
      transition: 0.5s;
      display: flex;
      justify-content: center;
      align-items: center;
      float: inline-start;
      text-shadow: 1px 1px 15px #fff;
      margin-left: 5%;
    }

    .oculto {
      display: none;
      transition: 0.5s;
    }

    .show {
      display: block;
    }

    .bloco {
      padding: 40px;
      border-radius: 25px;
      box-shadow: -10px 10px 10px #0e0e0e;
      margin: 40px auto;
      cursor: pointer;
      border: 2px solid var(--cor-secundaria);
       
    }

    .bloco:hover {
      box-shadow: 1px 1px 20px var(--cor-secundaria) !important;
    }

    .show .imgHome {
      display: flex;
      justify-content: center;
    }
    .show img {
      width: 90%;
      border-radius: 50px;
    }

    .show .boxSobre h4 {
      text-transform: uppercase;
      font-weight: bold;
      font-size: 3.5em;
      font-family: var(--font-menu);
      margin-bottom: 30px;
    }

    .show p {
      font-family: var(--font-texto);
      font-size: 1.5em;
      font-weight: lighter;
    }

    .show .card {
      display: flex;
      align-items: end;
    }

    .show .card .cardSobre:hover {
      transform: translateY( 20px);
      transition: 0.5s;
      filter: brightness(0.9);
      box-shadow: 0px 0px 5px var(--cor-secundaria);
    }
    .show .cardSobre {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 50px 20px;
      background-color: #1d1d1de8;
      border-radius: 25px;
 
      cursor: pointer;
    }

    .show .cardSobre p {
      color: rgb(250, 250, 250);
    }

    .show .cardSobre h5 {
      color: rgb(255, 255, 255);
      font-family: var(--font-tecla);
      font-size: 1.875em;
      margin: 20px 0px;
      text-transform: uppercase;
    }

    .card .cardSobre img {
      width: 100px !important;
      height: 100px;
      border-radius: 0px;
    }

    .card .cardSobre .btn-saiba {
      background-color: #00000f !important;
      border: 1.5px solid var(--cor-secundaria);
    }

    .card .cardSobre .btn-saiba:hover {
      box-shadow: 1px 1px 20px var(--cor-secundaria) !important;
    }

    /* PAGINA SOBRE NOS  */
    /* INICIO SESÃO SOBRE NOS IMG  */
   
    /* Define o tamanho fixo ou proporcional da div */
    .img-container {
    /* altura da div (ajuste como quiser) */
      object-fit: cover;   /* preenche a div sem distorcer */
      transition: transform 0.6s ease, filter 0.6s ease;
      border-radius: 10px 40px 30px; /* opcional */
        /* 🌑 sombra padrão */
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
      transition: box-shadow 0.5s ease, transform 0.5s ease;
      background-image: url(../img/pessoa-na-frente-computador-trabalhando-html.jpg);
      background-size:100% ;      
      background-repeat: no-repeat;
      width: 100%;
      height: 650px;
     
    }
  
   
    /* Faz a imagem preencher exatamente a div */
    /* .img-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;        
      display: block;
      cursor: pointer;
    }

    .img-container:hover img {
      transform: scale(1.05);
      filter: brightness(0.7);
    } */
   
   
   
 
 
    /* FIM SESÃO SOBRE NOS IMG  */



    /* PAGINA SOBRE NOS  */
 
 
 
  .container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 2em;
    
  }

  .container  .info-card img {
    width: 250px;
  }
 
 
/* Card de texto + imagem */
.info-card {
   
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  width: 80%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(8px); /* 🔹 efeito vidro fosco (opcional) */
  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 15px;
}
 

.info-card:hover {
  background: rgba(255, 140, 0, 0.2); /* Fundo alaranjado translúcido */
  border: 1px solid rgba(255, 165, 0, 0.6);
  box-shadow: 0 0 25px rgba(255, 140, 0, 0.6);
  transform: translateY(-8px);
  cursor: pointer;
}
 
 
/* Inverte lado da imagem */
 
 
/* Imagem */
.info-img img { 
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}
 
 
 
.info-text {
  display: block;
  padding: 20px;
}
 
.info-text p {

  font-size: .3em;
  line-height: 1.6;
}
 
.texto p {
  color:#fff;
 
}
 
/* Efeito piscando */
.piscar {
  animation: piscar 1.5s infinite;
   
}
 
@keyframes piscar {
  0%, 100% {
    opacity: 1;
    color: var(--cor-secundaria);
  }
  50% {
    opacity: 0.4;
    color: var(--cor_destaque);
  }
}
 
/* Responsivo */
@media (max-width: 768px) {
  .info-card {
    flex-direction: column;
    text-align: center;
  }
 
  .info-card.reverse {
    flex-direction: column;
  }
 
  .info-img img {
    width: 80%;
  }
}

  }  
  @layer ferramentas {
    #ferramentas {
      padding: 50px 0;
    background-color: #1c1c1c;
      padding: 50px 0;
    }

    /* .sectionFerramentas{
      background: url(../img/logo-png/funndo.png);
      background-repeat: no-repeat;
      background-position: left bottom ;
      background-size: 425px;
    }  */

    .containerSections h2 {
      text-align: center;
      font-family: var(--font-tecla);
      font-size: 3em !important;
      margin-bottom: 20px;
      color: #fff;
      background-color: transparent;
    }

    .iconsFerramentas {
      display: flex;
      justify-content: space-around;       
    }     

    .sectionFerramentas .icon .ferra {
      width: 150px;
      margin: 40px 0;
    }

    .icon {
      transition: 0.5s;
    }

    .icon:hover {
       
      cursor: pointer;
      transform: scale(0.9);
      filter: drop-shadow( 1px 1px 50px var(--cor-secundaria)) !important;
    }

    .html {
      background-color: #e44d26;
    }

    .css {
      background-color: #379ad6;
    }

    .js {
      background-color: #f4cb0b;
    }

    .vs {
      background-color: #0083d0;
    }

    .boot {
      background-color: #6834b5;
    }

    .card {
      margin-top: 3em;
      padding: 1.5em;
      color: #fff;
      border-radius: 25px;
      display: flex;
      gap: 1em;
    }

    .card > div {
      width: 650px;
    }

    .card div img {
      width: 100%;
    }

    .css img {
      width: 80% !important;
    }
    .card h3 {
      font-size: 2em;
      font-family: var(--font-texto);
      margin-bottom: 1em;
    }

    .card p {
      font-size: 1.25em;
      line-height: 1.5em;
      margin-bottom: 50px;
    }

    .card a {
      align-items: flex-end;
      color: #fff;
      font-size: 1.25em;
      font-weight: bold;
      background-color: var(--cor-primaria);
      padding: 15px 100px;
      border-radius: 25px;
      transition: 0.5s;
    }

    .card a:hover {
      transition: 0.5s;
      box-shadow: 0px 1px 50px #ffffff;
      color: var(--cor-texto);
    }
  }
  @layer paginaferramentas{

  /* INICIO SESSÃO FERRAMENTAS  */

.ferramentas {

  color: #fff;
  padding: 80px 0;
  text-align: center;
}

.ferramentas .container {
  display: flex;
  width: 90%;
  max-width: 1200px;
  margin: 50px auto;
}

.ferramentas h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: var(--cor_texto-normal);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: var(--font-tecla);
  line-height: 1.25em;
}

.ferramentas .intro {
  font-size: 1.875rem;
  color: #fff;
  margin-bottom: 50px;
}

.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin: 0 auto;
max-width: var(--largura-maxima);
}

.ferramentas .card {
  width: 25%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  height: 250px;
  padding: 25px 20px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.1);
  display: flex;
  flex-direction: column; /* garante que imagem > h3 > p fiquem empilhados */
  align-items: center;
}

.ferramentas .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 25px rgba(255, 165, 0, 0.5);
  background: rgba(255, 255, 255, 0.1);
}

.ferramentas .card img {
  width: 25%;
  height:50%;
  margin-bottom: 15px;
}

.ferramentas .card h3 {
  color: var(--cor_texto-normal);
  font-family: var(--font-tecla);
  margin-bottom: 10px;
  font-size: 2rem;
}
.ferramentas .card p {
  text-align: justify;
  color: #ccc;
  font-size: 1.2em;
  line-height: 1.5;
  margin-top: auto; /* mantém o texto bem posicionado */
}

/* FIM SESSÃO FERRAMENTAS  */

    .secaoferramentas{
    width: 100vw;
    z-index: 999999;
    background: #231c23;
    
  }

    .secaoferramentas div{
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
  }

    .secaoferramentas img{
      max-width: 100%;
      height: 100%;
  }  
    

  }
  @layer servicos {
    /* ##########################    INICIO SESSÃO SERVIÇO   ######################################## */  

    .container_servico {
      width: var(--altura-maxima);
      height: 600px;
       
      padding: 50px 0;
      text-align: center;
      color: #fff;

     
    }

    .container_servico h2 {
      color: #fff;
      font-size: 3em;
      margin-bottom: 40px;
      font-family: var(--font-tecla) !important;
    
    }
    .container_servico .verde {
      max-width: var(--largura-maxima);
      width: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
    }

    /* AQUI COMEÇA MINHA SERVICO CARD  */

    /* Estilos para o container principal dos cards */

    /* Estilos para cada card individual */
    .projetos-card {
      top: 20%;
      width: 400px;
      height: 350px;
      right: 10px;
      margin: 30px;
      perspective: 1000px; /* Define a perspectiva para o efeito 3D */
      cursor: pointer; /* Muda o cursor para indicar que o card é clicável */
    }

    /* Container interno que vai girar */
    .projetos-card .card-link,
    .projetos-card .caixa-textos-projetos-verso {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      transition: transform 0.8s;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      object-fit: cover;
    }

    .projetos-card .card-link img {
      width: 100%;
      border-radius: 10px;
    }

    /* Frente do card */
    .projetos-card .card-link {
      transform: rotateY(0deg);
      background-color: var(--cor_principal);
    }

    /* Verso do card */
    .projetos-card .caixa-textos-projetos-verso {
      transform: rotateY(180deg);
      background-color: #414142;
      color: #414142;
      padding: 20px;
    }

    /* Efeito de virar ao passar o mouse */
    .projetos-card:hover .card-link {
      transform: rotateY(180deg);
      box-shadow: 25px 50px 20px rgba(0, 0, 0, 0.7);
      transition: 0.5s;
    }
    .projetos-card:hover .caixa-textos-projetos-verso {
      transition: 0.5s;
      transform: rotateY(0deg);
      box-shadow: 25px 50px 20px rgba(0, 0, 0, 0.7);
    }

    .caixa-textos-projetos-verso h3 {
      font-family: var(--font-tecla);
      font-size: 1.875em;
      margin-bottom: 20px;
      color: var(--cor_texto-normal);
    }
    .caixa-textos-projetos-verso p {
      font-family: var(--font-texto);
      text-indent: 1em;
      line-height: 1.65em;
      text-align: justify;
      color: var(--cor_texto-normal);
    }

    .jogo {
      padding-top: 90px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: hsl(245, 91%, 21%);
      color: #ffffff;
      font-family: Arial, sans-serif;
      margin: 0;
      height: 100vh;
    }

    .texto_jogo h3 {
      margin-top: 50px;
      font-size: 2em;
      color: var(--cor_adicional);
    }

    #pong {
      background: #000000;
      display: block;
      border: 4px solid #fff;
      margin-top: 10px;
      box-shadow: 0 0 20px #000;
    }

    /* ##########################  SESSAO DE SERVIÇOS APLICATIVOS MOBILE  ######################################## */

    .aplicativoMobile {
      background-color: var(--cor_destaque);
      height: 204px;
      padding: 100px;
    }

    .aplicativoMobile .container > div {
      display: flex; /* coloca imagem e texto lado a lado */
      align-items: center; /* centraliza verticalmente */
      /* flex-direction: row-reverse; */
      justify-content: center;

      /* espaço entre imagem e texto */
    }

    .aplicativoMobile img {
      width: 20%; /* ajusta o tamanho da imagem */
      height: auto;
      border-radius: 10px; /* opcional */
      animation: moverBola 3s infinite ease-in-out; /* Usa a mesma animação */
      animation-delay: 1.5s;
    }

    .aplicativoMobile div h2 {
      color: var(--cor_preta);
      width: 100%; /* o restante do espaço para o texto */
      font-size: 1.875rem;
      font-family: var(--fonte_menu);
      color: var(--cor_texto-normal);
      padding: 30px;
      top: 40px;
      background-color: var(--cor_principal);
      width: 30%;
      border-radius: 50%;
      animation: mover 1s linear infinite;
    }
    .aplicativoMobile div h2:hover {
      background-color: var(--cor_principal);
      width: 30%;
      border-radius: 50%;
      cursor: pointer;
    }

    @keyframes mover {
      0%,
      100% {
        text-shadow: 1 5 10px #00ffcc, 0 0 20px #00ffcc;
      }
      50% {
        text-shadow: 0 0 50px #00ffee, 0 0 50px #00ffee;
      }
    }

    .aplicativoMobile div h3 {
      color: var(--cor_preta);
      font-size: 1.25rem;

      font-family: var(--fonte_menu);
    }
    .aplicativoMobile div p {
      color: var(--cor_preta);
      width: 100%; /* o restante do espaço para o texto */
      font-size: 1.7rem;
      /* line-height: 1.5; */
      text-align: justify;
      /* deixa o texto mais bonito */
      font-family: var(--fonte_menu);
    }
    /* FIM SESSAO DE SERVIÇOS APLICATIVOS MOBILE  */

    /* SESSAO DE SERVIÇOS SISTEMAS */
    .sistemas {
      background-color: var(--cor_preta);
      height: 204px;
      padding: 100px;
    }

    .sistemas .container > div {
      display: flex; /* coloca imagem e texto lado a lado */
      align-items: center; /* centraliza verticalmente */
      /* flex-direction: row-reverse; */
      justify-content: center;

      /* espaço entre imagem e texto */
    }

    .sistemas img {
      /* ajusta o tamanho da imagem */
      height: auto;
      border-radius: 10px; /* opcional */
      animation: moverBola 3s infinite ease-in-out; /* Usa a mesma animação */
      animation-delay: 1.5s;
    }

    .sistemas div h2 {
      color: var(--cor_preta);
      width: 100%; /* o restante do espaço para o texto */
      font-size: 1.875rem;
      font-family: var(--fonte_menu);
      text-align: center;
      color: var(--cor_texto-normal);
      padding: 30px;
      top: 40px;
      background-color: var(--cor_principal);
      width: 30%;
      border-radius: 50%;
      animation: mover 1s linear infinite;
    }
    .sistemas div h2:hover {
      background-color: var(--cor_principal);
      width: 30%;
      border-radius: 50%;
      cursor: pointer;
    }

    @keyframes mover {
      0%,
      100% {
        text-shadow: 1 5 10px #00ffcc, 0 0 20px #00ffcc;
      }
      50% {
        text-shadow: 0 0 50px #00ffee, 0 0 50px #00ffee;
      }
    }

    .sistemas div h3 {
      color: var(--cor_texto-normal);
      font-size: 1.25rem;

      font-family: var(--fonte_menu);
    }
    .sistemas div p {
      color: var(--cor_texto-normal);
      width: 100%; /* o restante do espaço para o texto */
      font-size: 1.7rem;
      /* line-height: 1.5; */
      text-align: justify;
      /* deixa o texto mais bonito */
      font-family: var(--fonte_menu);
    }

  /* INICIO DA MINHA PAG-SERVIÇOS  */
  }
  @layer paginaServiços{


 .pg-servico{
  padding: 150px 0;
}

.pg-servico .container{
  flex-direction: column;
 text-align: center;
 
}



.pg-servico h2{
  font-size: 2em;
  font-family: var(--font-tecla);
}
.pg-servico h3{
  font-size: 1.875em;
  font-family: var(--font-menu);
}

.pg-servico ul{
  display: flex;
  flex-wrap: wrap;
  gap:4em;
}

.pg-servico ul li{
  width:45%;
}


/* Efeito hover — opcional mas bonito */
.pg-servico ul li:hover {
  transform: translateY(-6px);
  box-shadow: 0px 0px 25px rgba(0,0,0,0.5);
  
}

.pg-servico ul > li > a{
  display: flex;
  border-radius: 1em;
  box-shadow: 0 2px 5px var(--cor_destaque);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.pg-servico figure{
  flex: 0 0 300px;
  aspect-ratio: 1 / 1;
  background: #f2f2f2;
  overflow: hidden;
}



.lista-conteudo {
  display: flex;                /* Ativa o flexbox */
  flex-direction: column;       /* Organiza os elementos em coluna (de cima pra baixo) */
  justify-content: center;      /* Centraliza verticalmente */
  align-items: center;          /* Centraliza horizontalmente */
  text-align: center;           /* Centraliza textos (como h3 e span) */
  height: 50%;                 /* Preenche toda a altura do card */
  padding: 20px;
  box-sizing: border-box;
}


.card-ferramentas{
  width: 350px;
  height: 200px;
  padding: 50px;
  background-color:var(--cor_adicional-2);
  border-radius: 1em;
  /* box-shadow: 0 2px 5px var(--cor_destaque); */
   box-shadow: 0 0 15px rgba(255, 140, 0, 0.5);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.card-ferramentas p {
  color:#fff;
  /* margin: 5px; */
  /* display: flex; */
   text-align: justify;           /* 🔹 justifica o texto */
  font-size: 1.25em;             /* melhora a leitura */
  overflow: hidden; /* esconde o texto até ser "digitado" */
  white-space: normal;
  display: inline-block;

  border-right: 3px solid var(--cor_principal); /* cursor piscando */
  width: 0; /* começa invisível */
  animation: digitar 5s steps(300) forwards, cursorPisca 0.7s step-end infinite;
}

@keyframes digitar {
  from {
    width: 0;
  }
  to {
    width: 100%; /* mostra todo o texto no final */
  }
}

@keyframes cursorPisca {
  50% {
    border-color: transparent; /* faz o cursor piscar */
  }
}


.lista-conteudo h3{
  font-family: var(--font-tecla);
  font-size: .7em;

}

.pg-servico ul span {
  display: block;
  color: #fff;
  padding: 0.5em 1em;
  background-color: var(--cor_principal);
  border-radius: 30px;
  box-shadow: 0 0 15px rgba(255, 140, 0, 0.5);

  /* 🔽 Ajustes que abaixam o span */
  margin-top: 100px; /* aumenta conforme quiser (ex: 30px, 40px) */
  text-align: center; /* centraliza o texto dentro do botão */
}
 

.pg-servico ul span:hover{
  color:var(--cor-secundaria);
}

  }
   /* FIM DA MINHA PAG-SERVIÇOS  */



  
  @layer nossaEquipe {
    #equipe {
      background-color: #1c1c1c ;
      color: #c0bec7;
    }
    .containerEquipe {
      max-width: 1500px;
      margin: 40px auto;
      width: 100%;
      text-align: center;
    }

    .equipe {
      margin-top: 50px;
      display: flex;
      flex-direction: row;
      width: 100%;
      justify-content: space-between;
    }


    .equipe div {
      margin: 0px 25px;
      position: relative;
      padding: 5px;

    }

    .equipe div h4 {
      font-size: 2em;
      font-weight: bold;
      margin-top: 20px;
      text-align: center;
      font-family: var(--font-texto);
    }

    .equipe img {
      width: 250px;
      height: 240px;
      border-radius: 50%;
      object-fit: cover;
      filter: grayscale(100%) contrast(150%) brightness(100%);
      transition: transform 0.3s ease;
      transform-origin: center center;
    }
 
    .equipe img:hover {
      filter: grayscale(0%) contrast(100%) brightness(100%);
      transform: scale(1.05);
      border-color: #fff;
      transition: 0.3s;
    }
  }
  @layer depoimentos {
    
    .containerDepoimentos {
      max-width: 1500px;
      margin: 40px auto;
      width: 100%;
      text-align: center;
      color: #c0bec7;
    }
    .boxDepoimentos {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 40px;
    }

    .boxDepoimentos .slick-slide {
      margin: 1em;
    }

    .cardDepoimento {
      width: 410px !important;
      height: 420px !important;
      background-color: #414142;
      border-radius: 25px !important;
      padding: 2% !important;
      margin: 0 auto;
      transition: 0.4s;
    }

    .cardDepoimento:hover {
      background-color: var(--cor-secundaria);
      color: var(--cor-primaria);
      transform: translate(0, 15px);
      box-shadow: 0px 0px 20px var(--cor-secundaria);
    }
    .cardDepoimento .imgDepoimento {
      width: 166px;
      margin-bottom: 40px;
      margin-inline: auto;
    }
    .cardDepoimento h4 {
      font-size: 2.2em;
      text-align: center;
      margin-bottom: 10px;
    }
    .cardDepoimento p {
      font-size: 1em;
      text-align: justify;
      line-height: 1.5em;
    }
  }
  @layer orcamento{

    #orcamento {
      padding: 50px 0;  /* ajuste como quiser */ 
    }

    .tituloOrca{
      font-family: var(--font-tecla);
      font-size: 3em !important;
      color: #fff;
      text-transform: uppercase;
    }

    .orcamento-flex {
      display: flex;
      width: 1500px;
      background: var(--cor_principal);
      border-radius:50px ;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      flex-wrap: wrap; /* Mantém responsivo no mobile */
    }

    /* Imagem e frase */
    .slogan {
      flex: 1;
      text-align: center;      
    }
    .slogan h3 {
      font-family: var(--font-menu);
      color: #fff; 
    }
    .slogan a{
      width: 300px;
      background-color: #000;
    }

    .tituloOrca {
      font-size: 1.875em;
      text-align: center;
      gap: 50px;
    }

 

    .formOrcamento label{
      font-size: 1.25em;
    }

    .slogan h3 {
      font-size: 1.875em;
      margin-bottom: 15px;
    }

    .input,
    .textarea {
      width: 90%;
      padding: 14px 18px; /* mais espaço por dentro */
      border-radius: 12px; /* borda mais suave e arredondada */
      border: 2px solid #e5e5e5; /* borda clara */
      font-size: 1rem;
      transition: 0.3s;
      background-color: #fafafa; /* leve tom para destacar */
      margin-bottom: 20px; /* espaço entre inputs */
    }

    .slogan img {
      width: 250px;
      max-width: 100%;
    }

    /* Formulário */
    .formOrcamento {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 25px;
      padding: 40px;
        background: #fff; /* mantém contraste com o fundo */
      border-radius: 50px;
      border: 1px solid rgba(0,0,0,0.08); /* borda leve para destaque */
      
      box-shadow: 0 6px 20px rgba(0, 0, 0, .12); /* sombra suave e profissional */

    }

    form div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
 
    .formOrcamento input[type="reset"],
    .formOrcamento input[type="submit"]{    
      margin: 0 auto;
      width: 250px;
      height: 50px;
      padding: 10px;
      border-radius: 20px;
      transition: all 0.5s ease;
      border:none;
    }
    input[type="reset"]:hover,
    input[type="submit"]:hover {
    color:#fff;
    background-color: var(--cor-secundaria);
    cursor: pointer;
    }

    .sucesso {
      font-family: var(--font-menu);
      font-size: 2em;
      color: green;
      text-align: center;
    }
    
    
    .erro {
      font-family: var(--font-menu);
      font-size: 1.2em;
      color: rgb(128, 0, 0);
      text-align: center;
    }

  }
  @layer video{
    .video {
    padding: 50px 0;  /* ajuste como quiser */
   ;
    /* background-image:url(../img/v748-toon-124.jpg)  ; */
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 50%;  
    width: 100%;
    display: flex;
    justify-content: center;
 
  }
 
  .matrix {
  position: relative;
  width: 1920px;
  height: 600px;
  overflow: hidden;
  background: #0D0D0D;
  /* border: 2px solid #0F0; */
  box-shadow:
    0 0 15px var(--cor-secundaria), 0 0 30px var(--cor-secundaria);
    border-radius: 15px;
    
}
 
.matrix-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
 
/* Bolinha do YouTube */
.youtube-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 10;
  transition: all 0.3s ease;
  filter:sepia(100%);
}
 
.youtube-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  /* box-shadow: 0 0 30px var(--cor-secundaria); */
  transition: all 0.3s ease;
}
 
.youtube-circle:hover .youtube-image {
  transform: scale(1.1);
  box-shadow: 0 0 25px var(--cor-secundaria);
}
 
}
}
@layer footer {
  .footer {
    background: linear-gradient(
      90deg,
      rgba(221, 220, 220, 0.9) 0%,
      rgba(46, 45, 46, 0.9) 100%
    );
    color: #fff;
    padding: 40px;
    font-family: var(--font-texto);
    text-align: center;
  }
  .containerFooter {
    
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    max-width: 1500px;
    width: 100%;
    margin: 0px auto;
    padding-top: 40px;
  }
  .logoFooter {
    display: flex;
    gap:3em;
    align-items: center;
    flex-direction: column;
  }
  .logoFooter span {
    display: flex;
    background-color: #ffff;
           
    color: #2c2358;
    justify-content: center;
    align-items: self-start;
    font-size: 1.5em;
    font-weight: bolder;
    margin-left: -30px;
    z-index: 0;
    border-radius: 25px;
    width: 200px;
  }
  .logoF {
    width: 125px;
    height: 125px;
    text-indent: -9999px;
    background-image: url(../img/logo-png/logocirculoB.png);
    background-repeat: no-repeat;
    border-radius: 100%;
    display: flex;
    align-items: self-start;
    z-index: 1;
  }
  .contatos {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
  }

  .footer > div div:nth-child(3){
    width: 10%;
    
  }
  
  .footer .menu{
    display: flex;
    flex-direction: column;
    gap:0.5em;
 
  align-items: center;
  
}

.footer .menu li a{
    margin: 0;
    padding-bottom: 0.5em;

  }


  .contatos h4,
  .redesFooter h4 {
    font-weight: bold;
    font-size: 1.5em;
  }
  .redesFooter {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  .copy {
    margin-top: 100px;
    align-items: end;
    justify-content: center;
    font-size: 0.8em;
    position: relative;
    
    text-align: center;
  }

  .copy .linhaFooter::before {
    content: "";
    position: absolute;
    left: 1%;
    bottom: 50px;
    display: block;
    width: 98%;
    border-radius: 50px;
    align-items: start;
    justify-content: center;
    height: 1px;
    background-color: #e29f36;
  }
}


/* MODO DARK E LIGHT  */

/* ===== BOTÃO MODO ESCURO ===== */
.modo-toggle {
  position: fixed;
  top: 20px;
  right: 30px;
  background: var(--cor-secundaria);
  color: #fff;
  border: none;
  font-size: 1.5em;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  box-shadow: 0 0 15px var(--cor-secundaria);
  z-index: 999999;
  transition: 0.3s;
}

.modo-toggle:hover {
  background: var(--cor_principal);
  box-shadow: 0 0 20px var(--cor_destaque);
  transform: scale(1.1);
}

/* ===== MODO ESCURO ===== */
body.dark-mode {
  background-color: #fff;
  color: #f0f0f0;
}

/* aplica o modo escuro nas seções principais */
body.dark-mode header {
  background: linear-gradient(90deg, #fff 0%, #fff 100%);
}

body.dark-mode main {
  background-image: none;
  background-color: #121212;
}

body.dark-mode .card,
body.dark-mode .info-card {
  background-color: rgba(40, 40, 40, 0.8);
  color: #f2f2f2;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .card:hover,
body.dark-mode .info-card:hover {
  box-shadow: 0 0 20px var(--cor-secundaria);
}

/* textos e títulos */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #fff;
}

body.dark-mode p {
  color: #ddd;
}

/* links */
body.dark-mode a {
  color: var(--cor-secundaria);
}

body.dark-mode a:hover {
  color: #ffb84d;
}