:root{
  --tg-gold:#f6c945;
  --tg-gold-light:#ffe58a;
  --tg-black:#030405;
  --tg-card:rgba(13,15,18,.82);
  --tg-border:rgba(246,201,69,.17);
  --tg-text:#f7f7f5;
  --tg-muted:#969ca5;
}

html{
  background:#030405;
}

body{
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  color:var(--tg-text);
  background:
    radial-gradient(circle at 50% -10%,rgba(246,201,69,.14),transparent 30%),
    radial-gradient(circle at 10% 30%,rgba(246,201,69,.055),transparent 25%),
    radial-gradient(circle at 90% 65%,rgba(246,201,69,.045),transparent 25%),
    linear-gradient(180deg,#090b0e 0%,#050607 45%,#020303 100%) !important;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:48px 48px;
}

body::after{
  content:"";
  position:fixed;
  z-index:0;
  pointer-events:none;
  width:700px;
  height:700px;
  left:50%;
  top:-440px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(246,201,69,.08);
  filter:blur(110px);
}

.wrap,
.container,
main{
  position:relative;
  z-index:3;
}

.hero{
  position:relative !important;
  overflow:hidden;
  padding-top:42px !important;
  padding-bottom:42px !important;
  border:1px solid rgba(246,201,69,.20) !important;
  background:
    radial-gradient(circle at 80% 0%,rgba(246,201,69,.10),transparent 35%),
    linear-gradient(135deg,rgba(20,22,25,.96),rgba(7,8,10,.96)) !important;
  box-shadow:
    0 35px 100px rgba(0,0,0,.60),
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 60px rgba(246,201,69,.025) !important;
}

.hero::before{
  content:"THE GHOST";
  position:absolute;
  right:-5px;
  bottom:-30px;
  font-size:clamp(58px,10vw,150px);
  font-weight:1000;
  letter-spacing:-7px;
  color:transparent;
  -webkit-text-stroke:1px rgba(246,201,69,.055);
  opacity:.8;
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  top:0;
  left:7%;
  width:35%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--tg-gold),transparent);
  box-shadow:0 0 18px rgba(246,201,69,.45);
}

.brand{
  color:var(--tg-gold) !important;
  letter-spacing:2.3px;
  font-weight:900 !important;
}

.hero h1{
  color:#fff !important;
  font-weight:1000 !important;
  letter-spacing:-1.7px;
  text-shadow:0 12px 50px rgba(0,0,0,.65);
}

.hero p{
  max-width:850px;
  color:#aeb3ba !important;
  line-height:1.75 !important;
}

/* CARDS */

.card{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(
      145deg,
      rgba(17,20,23,.92),
      rgba(7,9,11,.94)
    ) !important;
  backdrop-filter:blur(18px);
  border:1px solid rgba(246,201,69,.15) !important;
  border-radius:18px !important;
  box-shadow:
    0 20px 50px rgba(0,0,0,.30),
    inset 0 1px rgba(255,255,255,.025) !important;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(246,201,69,.65),
      transparent
    );
  opacity:.4;
}

.card:hover{
  transform:translateY(-2px);
  border-color:rgba(246,201,69,.34) !important;
  box-shadow:
    0 25px 65px rgba(0,0,0,.42),
    0 0 40px rgba(246,201,69,.025) !important;
}

.card h2,
.card h3{
  color:#fff !important;
}

.card h2::after{
  content:"";
  display:block;
  width:55px;
  height:2px;
  margin-top:11px;
  border-radius:30px;
  background:
    linear-gradient(
      90deg,
      var(--tg-gold),
      rgba(246,201,69,0)
    );
  box-shadow:0 0 12px rgba(246,201,69,.30);
}


/* FORMULÁRIO */

label{
  color:#d8dade !important;
  font-weight:700 !important;
}

input,
select,
textarea{
  background:rgba(5,7,9,.88) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.095) !important;
  border-radius:11px !important;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.35);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease !important;
}

input:hover,
select:hover,
textarea:hover{
  border-color:rgba(246,201,69,.28) !important;
}

input:focus,
select:focus,
textarea:focus{
  outline:none !important;
  background:rgba(10,12,14,.96) !important;
  border-color:var(--tg-gold) !important;
  box-shadow:
    0 0 0 3px rgba(246,201,69,.09),
    0 0 25px rgba(246,201,69,.055) !important;
}

input::placeholder,
textarea::placeholder{
  color:#555c65 !important;
}


/* CHIPS */

.chip{
  border:1px solid rgba(255,255,255,.09) !important;
  background:rgba(7,9,11,.75) !important;
  border-radius:12px !important;
  transition:.18s ease !important;
}

.chip:hover{
  border-color:rgba(246,201,69,.45) !important;
  background:rgba(246,201,69,.045) !important;
  transform:translateY(-1px);
}


/* BOTÕES */

.btn{
  position:relative;
  overflow:hidden;
  border:1px solid #f6c945 !important;
  color:#080808 !important;
  background:
    linear-gradient(
      135deg,
      #ffe584 0%,
      #f6c945 50%,
      #dcae2b 100%
    ) !important;
  font-weight:950 !important;
  letter-spacing:.25px;
  border-radius:11px !important;
  box-shadow:
    0 10px 26px rgba(246,201,69,.13) !important;
  transition:
    transform .17s ease,
    box-shadow .17s ease,
    filter .17s ease !important;
}

.btn::after{
  content:"";
  position:absolute;
  width:35px;
  height:160%;
  top:-30%;
  left:-60px;
  background:rgba(255,255,255,.35);
  transform:rotate(18deg);
  filter:blur(4px);
  transition:left .45s ease;
}

.btn:hover::after{
  left:115%;
}

.btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:
    0 15px 35px rgba(246,201,69,.22) !important;
}

.btn.secondary{
  color:#f6c945 !important;
  background:rgba(8,10,12,.80) !important;
  border-color:rgba(246,201,69,.40) !important;
}


/* =========================================================
   FANTASMAS PREMIUM
   ========================================================= */

.tg-atmosphere{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}

.tg-ghost{
  position:absolute;
  width:90px;
  height:112px;
  opacity:.10;

  border-radius:
    50% 50% 35% 35%
    / 40% 40% 18% 18%;

  background:
    linear-gradient(
      180deg,
      rgba(255,232,152,.90),
      rgba(246,201,69,.32)
    );

  box-shadow:
    0 0 30px rgba(246,201,69,.17),
    0 0 70px rgba(246,201,69,.08);

  animation:tgGhostFloat 8s ease-in-out infinite;
}

.tg-ghost::before{
  content:"";
  position:absolute;
  width:9px;
  height:13px;
  left:27px;
  top:38px;
  background:#060708;
  border-radius:50%;
  box-shadow:
    28px 0 0 #060708,
    14px 24px 0 -2px rgba(5,6,7,.85);
}

.tg-ghost::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-17px;
  width:100%;
  height:34px;

  background:
    radial-gradient(circle at 17px 0,transparent 18px,rgba(246,201,69,.33) 19px),
    radial-gradient(circle at 45px 0,transparent 18px,rgba(246,201,69,.33) 19px),
    radial-gradient(circle at 74px 0,transparent 18px,rgba(246,201,69,.33) 19px);
}

.tg-ghost.g1{
  left:3%;
  top:15%;
  transform:scale(1.25) rotate(-8deg);
}

.tg-ghost.g2{
  right:4%;
  top:28%;
  transform:scale(.85) rotate(8deg);
  opacity:.075;
  animation-delay:-3s;
  animation-duration:11s;
}

.tg-ghost.g3{
  left:8%;
  top:69%;
  transform:scale(.68);
  opacity:.06;
  animation-delay:-6s;
  animation-duration:13s;
}

.tg-ghost.g4{
  right:9%;
  top:78%;
  transform:scale(1.15);
  opacity:.055;
  animation-delay:-2s;
  animation-duration:10s;
}

@keyframes tgGhostFloat{
  0%,100%{
    margin-top:0;
    margin-left:0;
  }

  25%{
    margin-top:-20px;
    margin-left:14px;
  }

  50%{
    margin-top:-38px;
    margin-left:-6px;
  }

  75%{
    margin-top:-13px;
    margin-left:-18px;
  }
}

/* partículas */

.tg-particle{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#f6c945;
  opacity:.25;

  box-shadow:
    0 0 8px rgba(246,201,69,.65),
    0 0 18px rgba(246,201,69,.25);

  animation:tgParticleFloat linear infinite;
}

@keyframes tgParticleFloat{
  from{
    transform:translateY(105vh) scale(.5);
    opacity:0;
  }

  15%{
    opacity:.35;
  }

  80%{
    opacity:.18;
  }

  to{
    transform:translateY(-20vh) scale(1.2);
    opacity:0;
  }
}

@media(max-width:760px){
  .tg-ghost.g3,
  .tg-ghost.g4{
    display:none;
  }

  .tg-ghost{
    opacity:.055 !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .tg-ghost,
  .tg-particle{
    animation:none !important;
  }
}


/* =========================================================
   BOTÕES PREMIUM - THE GHOST
   ========================================================= */

.btn,
button,
input[type="submit"]{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  min-height:46px;
  padding:12px 20px;

  border-radius:12px !important;
  border:1px solid rgba(246,201,69,.85) !important;

  background:
    linear-gradient(
      135deg,
      #ffe997 0%,
      #f6c945 42%,
      #d9a91f 100%
    ) !important;

  color:#090909 !important;

  font-weight:900 !important;
  letter-spacing:.35px;

  box-shadow:
    0 8px 24px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 20px rgba(246,201,69,.08);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease,
    border-color .18s ease !important;

  cursor:pointer;
}

.btn::before,
button::before,
input[type="submit"]::before{
  content:"";
  position:absolute;
  inset:1px;
  z-index:-1;
  border-radius:10px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.18),
      transparent 38%
    );

  pointer-events:none;
}

.btn::after,
button::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-70px;

  width:42px;
  height:180%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.55),
      transparent
    );

  transform:rotate(18deg);
  transition:left .48s ease;
  pointer-events:none;
}

.btn:hover,
button:hover,
input[type="submit"]:hover{
  transform:translateY(-2px);

  filter:brightness(1.07);

  border-color:#ffe58a !important;

  box-shadow:
    0 13px 30px rgba(0,0,0,.45),
    0 0 28px rgba(246,201,69,.18),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

.btn:hover::after,
button:hover::after{
  left:115%;
}

.btn:active,
button:active,
input[type="submit"]:active{
  transform:translateY(0) scale(.98);
}


/* BOTÃO SECUNDÁRIO */

.btn.secondary,
button.secondary,
.btn-outline{
  background:
    linear-gradient(
      135deg,
      rgba(14,16,19,.96),
      rgba(5,6,8,.96)
    ) !important;

  color:#f6c945 !important;

  border:1px solid rgba(246,201,69,.40) !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.02);
}

.btn.secondary:hover,
button.secondary:hover,
.btn-outline:hover{
  background:
    linear-gradient(
      135deg,
      rgba(246,201,69,.10),
      rgba(8,10,12,.98)
    ) !important;

  border-color:#f6c945 !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.38),
    0 0 22px rgba(246,201,69,.10);
}


/* BOTÕES PEQUENOS DO ADMIN */

.btn.small,
button.small,
.actions .btn,
td .btn{
  min-height:36px;
  padding:8px 13px;

  border-radius:9px !important;

  font-size:13px !important;
  font-weight:850 !important;
}


/* BOTÃO DE PERIGO */

.btn.danger,
button.danger{
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #a52525,
      #671313
    ) !important;

  border-color:rgba(255,105,105,.55) !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,.35),
    0 0 18px rgba(180,30,30,.08);
}

.btn.danger:hover,
button.danger:hover{
  border-color:#ff7070 !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.40),
    0 0 24px rgba(190,40,40,.16);
}


/* BOTÃO DESABILITADO */

.btn:disabled,
button:disabled,
input[type="submit"]:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none !important;
  filter:none !important;
  box-shadow:none !important;
}

@media(max-width:700px){
  .btn,
  button,
  input[type="submit"]{
    min-height:44px;
  }
}


/* =========================================================
   BOTÕES THE GHOST - VERSÃO FINAL
   ========================================================= */

/* remove qualquer sublinhado/linha embaixo */
a.btn,
.btn,
button,
input[type="submit"]{
  text-decoration:none !important;
  border-bottom:none !important;
}

a.btn::before,
a.btn::after{
  text-decoration:none !important;
}

/* botão base */
.btn,
button,
input[type="submit"]{
  position:relative;
  overflow:visible;
  min-height:46px;
  padding:12px 22px;
  border-radius:12px !important;

  font-weight:900 !important;
  letter-spacing:.3px;

  border:1px solid rgba(246,201,69,.72) !important;

  background:
    linear-gradient(
      135deg,
      #ffe98d 0%,
      #f6c945 48%,
      #d7a91f 100%
    ) !important;

  color:#090909 !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,.38),
    0 0 18px rgba(246,201,69,.10);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease !important;
}

/* fantasma escondido */
.btn::before,
button::before{
  content:"👻";

  position:absolute;
  left:50%;
  top:-12px;

  transform:
    translateX(-50%)
    translateY(10px)
    scale(.55);

  opacity:0;

  font-size:28px;
  line-height:1;

  pointer-events:none;

  filter:
    drop-shadow(0 0 8px rgba(246,201,69,.65))
    drop-shadow(0 0 18px rgba(246,201,69,.25));

  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.2,.9,.3,1.2);
}

/* fantasma aparece */
.btn:hover::before,
button:hover::before{
  opacity:1;

  transform:
    translateX(-50%)
    translateY(-22px)
    scale(1);
}

/* brilho passando */
.btn::after,
button::after{
  content:"";

  position:absolute;
  top:0;
  left:-75%;

  width:45%;
  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(255,255,255,.45),
      transparent
    );

  pointer-events:none;

  transition:left .48s ease;
}

.btn:hover::after,
button:hover::after{
  left:125%;
}

.btn:hover,
button:hover,
input[type="submit"]:hover{
  transform:translateY(-3px);

  filter:brightness(1.08);

  box-shadow:
    0 15px 32px rgba(0,0,0,.48),
    0 0 28px rgba(246,201,69,.20);
}

/* clique */
.btn:active,
button:active{
  transform:translateY(-1px) scale(.98);
}

/* botão secundário */
.btn.secondary{
  color:#f6c945 !important;

  background:
    linear-gradient(
      135deg,
      rgba(19,21,24,.98),
      rgba(6,7,9,.98)
    ) !important;

  border-color:rgba(246,201,69,.38) !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,.34);
}

.btn.secondary:hover{
  border-color:#f6c945 !important;

  background:
    linear-gradient(
      135deg,
      rgba(246,201,69,.12),
      rgba(7,8,10,.98)
    ) !important;
}

/* botão aprovar */
.btn.approve,
button.approve{
  color:#caffb8 !important;

  background:
    linear-gradient(
      135deg,
      rgba(34,125,20,.92),
      rgba(11,58,8,.96)
    ) !important;

  border-color:rgba(100,255,80,.55) !important;
}

/* botão reprovar */
.btn.danger,
button.danger{
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #9e2424,
      #5b1010
    ) !important;

  border-color:rgba(255,90,90,.55) !important;
}

/* botão entrevista */
.btn.interview,
button.interview{
  color:#b7ddff !important;

  background:
    linear-gradient(
      135deg,
      rgba(20,91,155,.94),
      rgba(8,40,72,.97)
    ) !important;

  border-color:rgba(70,165,255,.55) !important;
}

/* botão análise */
.btn.analysis,
button.analysis{
  color:#e5c3ff !important;

  background:
    linear-gradient(
      135deg,
      rgba(105,39,150,.92),
      rgba(49,16,75,.97)
    ) !important;

  border-color:rgba(190,105,255,.50) !important;
}

/* botões pequenos */
.btn.small,
.actions .btn,
td .btn{
  min-height:36px;
  padding:8px 14px;
  font-size:13px !important;
}

/* impede linha decorativa antiga */
.btn span,
.btn strong,
.btn b{
  text-decoration:none !important;
  border-bottom:none !important;
}


/* =========================================================
   THE GHOST - FANTASMAS VOADORES V2
   ========================================================= */

.tg-ghost{
  width:70px !important;
  height:82px !important;
  border-radius:50% 50% 42% 42% !important;

  opacity:.16 !important;

  background:
    radial-gradient(
      ellipse at 48% 30%,
      rgba(255,247,205,.98) 0%,
      rgba(255,224,118,.88) 38%,
      rgba(246,201,69,.40) 68%,
      rgba(246,201,69,.05) 100%
    ) !important;

  filter:
    drop-shadow(0 0 8px rgba(255,222,105,.40))
    drop-shadow(0 0 25px rgba(246,201,69,.22))
    blur(.15px);

  box-shadow:none !important;

  animation:none !important;

  transform:none !important;
}

/* olhos + boca */

.tg-ghost::before{
  content:"" !important;

  position:absolute !important;

  width:9px !important;
  height:15px !important;

  left:19px !important;
  top:27px !important;

  border-radius:50% !important;

  background:#080909 !important;

  box-shadow:
    24px 0 0 #080909,
    12px 23px 0 -2px rgba(8,9,9,.92) !important;
}

/* cauda do fantasma */

.tg-ghost::after{
  content:"" !important;

  position:absolute !important;

  left:0 !important;
  bottom:-17px !important;

  width:70px !important;
  height:28px !important;

  background:
    radial-gradient(
      circle at 12px -1px,
      transparent 14px,
      rgba(246,201,69,.48) 15px
    ),
    radial-gradient(
      circle at 35px -1px,
      transparent 14px,
      rgba(246,201,69,.48) 15px
    ),
    radial-gradient(
      circle at 58px -1px,
      transparent 14px,
      rgba(246,201,69,.48) 15px
    ) !important;

  filter:
    drop-shadow(0 8px 12px rgba(246,201,69,.12));
}


/* ==========================================
   MOVIMENTO DOS FANTASMAS
   ========================================== */

.tg-ghost.g1{
  left:-100px !important;
  top:17% !important;

  animation:
    ghostFlyRight 24s linear infinite,
    ghostWave 3.5s ease-in-out infinite !important;
}

.tg-ghost.g2{
  right:-100px !important;
  left:auto !important;
  top:38% !important;

  opacity:.11 !important;

  transform:scale(.72) !important;

  animation:
    ghostFlyLeft 31s linear infinite,
    ghostWave 4.5s ease-in-out infinite !important;

  animation-delay:-10s !important;
}

.tg-ghost.g3{
  left:-120px !important;
  top:67% !important;

  opacity:.09 !important;

  transform:scale(.58) !important;

  animation:
    ghostFlyRight 37s linear infinite,
    ghostWave 5s ease-in-out infinite !important;

  animation-delay:-19s !important;
}

.tg-ghost.g4{
  right:-110px !important;
  left:auto !important;
  top:78% !important;

  opacity:.12 !important;

  transform:scale(.9) !important;

  animation:
    ghostFlyLeft 27s linear infinite,
    ghostWave 4s ease-in-out infinite !important;

  animation-delay:-6s !important;
}


/* direita */

@keyframes ghostFlyRight{

  0%{
    left:-120px;
  }

  100%{
    left:calc(100% + 140px);
  }

}


/* esquerda */

@keyframes ghostFlyLeft{

  0%{
    right:-120px;
  }

  100%{
    right:calc(100% + 140px);
  }

}


/* movimento flutuando */

@keyframes ghostWave{

  0%,100%{
    margin-top:0;
  }

  25%{
    margin-top:-18px;
  }

  50%{
    margin-top:7px;
  }

  75%{
    margin-top:-11px;
  }

}


/* celular */

@media(max-width:700px){

  .tg-ghost{
    width:52px !important;
    height:62px !important;
  }

  .tg-ghost.g3,
  .tg-ghost.g4{
    display:none !important;
  }

}


/* =========================================================
   CORREÇÃO FINAL - FANTASMAS ATRAVESSANDO A TELA
   ========================================================= */

.tg-atmosphere{
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
  pointer-events:none !important;
  z-index:2 !important;
}

/* Fantasma base */

.tg-ghost{
  position:absolute !important;

  width:64px !important;
  height:78px !important;

  left:-140px !important;
  right:auto !important;

  opacity:.14 !important;

  border-radius:55% 55% 40% 40% !important;

  background:
    radial-gradient(
      ellipse at 50% 28%,
      rgba(255,250,220,.95) 0%,
      rgba(255,226,125,.80) 35%,
      rgba(246,201,69,.35) 65%,
      rgba(246,201,69,.05) 100%
    ) !important;

  box-shadow:none !important;

  filter:
    drop-shadow(0 0 8px rgba(246,201,69,.45))
    drop-shadow(0 0 25px rgba(246,201,69,.20)) !important;

  will-change:transform;
}

/* olhos */

.tg-ghost::before{
  content:"" !important;

  position:absolute !important;

  width:8px !important;
  height:13px !important;

  left:18px !important;
  top:26px !important;

  border-radius:50% !important;

  background:#080909 !important;

  box-shadow:
    21px 0 0 #080909,
    10px 21px 0 -2px #080909 !important;
}

/* parte inferior irregular */

.tg-ghost::after{
  content:"" !important;

  position:absolute !important;

  left:0 !important;
  bottom:-13px !important;

  width:100% !important;
  height:25px !important;

  background:
    radial-gradient(
      circle at 11px 0,
      transparent 12px,
      rgba(246,201,69,.38) 13px
    ),
    radial-gradient(
      circle at 32px 0,
      transparent 12px,
      rgba(246,201,69,.38) 13px
    ),
    radial-gradient(
      circle at 53px 0,
      transparent 12px,
      rgba(246,201,69,.38) 13px
    ) !important;
}


/* FANTASMA 1 */

.tg-ghost.g1{
  top:15% !important;

  animation:
    tgFly1 22s linear infinite !important;
}


/* FANTASMA 2 */

.tg-ghost.g2{
  top:36% !important;

  opacity:.10 !important;

  animation:
    tgFly2 29s linear infinite -8s !important;
}


/* FANTASMA 3 */

.tg-ghost.g3{
  top:61% !important;

  opacity:.08 !important;

  animation:
    tgFly3 34s linear infinite -18s !important;
}


/* FANTASMA 4 */

.tg-ghost.g4{
  top:78% !important;

  opacity:.11 !important;

  animation:
    tgFly4 26s linear infinite -13s !important;
}


/* Movimento esquerda -> direita */

@keyframes tgFly1{

  0%{
    transform:
      translate3d(-120px,0,0)
      rotate(-8deg)
      scale(.95);
  }

  25%{
    transform:
      translate3d(calc(25vw + 80px),-28px,0)
      rotate(3deg)
      scale(1);
  }

  50%{
    transform:
      translate3d(calc(50vw + 100px),18px,0)
      rotate(-3deg)
      scale(.96);
  }

  75%{
    transform:
      translate3d(calc(75vw + 120px),-20px,0)
      rotate(5deg)
      scale(1.03);
  }

  100%{
    transform:
      translate3d(calc(100vw + 260px),8px,0)
      rotate(-5deg)
      scale(.95);
  }
}


/* Movimento direita -> esquerda */

@keyframes tgFly2{

  0%{
    transform:
      translate3d(calc(100vw + 260px),0,0)
      scale(.72)
      rotate(7deg);
  }

  25%{
    transform:
      translate3d(calc(75vw + 100px),25px,0)
      scale(.72)
      rotate(-4deg);
  }

  50%{
    transform:
      translate3d(calc(50vw + 80px),-22px,0)
      scale(.72)
      rotate(4deg);
  }

  75%{
    transform:
      translate3d(calc(25vw + 40px),18px,0)
      scale(.72)
      rotate(-5deg);
  }

  100%{
    transform:
      translate3d(-180px,-8px,0)
      scale(.72)
      rotate(6deg);
  }
}


@keyframes tgFly3{

  0%{
    transform:
      translate3d(-160px,0,0)
      scale(.58);
  }

  50%{
    transform:
      translate3d(calc(50vw + 80px),-35px,0)
      scale(.65)
      rotate(7deg);
  }

  100%{
    transform:
      translate3d(calc(100vw + 250px),15px,0)
      scale(.58);
  }
}


@keyframes tgFly4{

  0%{
    transform:
      translate3d(calc(100vw + 240px),0,0)
      scale(.86);
  }

  50%{
    transform:
      translate3d(calc(50vw + 70px),30px,0)
      scale(.92)
      rotate(-7deg);
  }

  100%{
    transform:
      translate3d(-180px,-20px,0)
      scale(.86);
  }
}


/* mantém o conteúdo acima */

.wrap,
.container,
main{
  position:relative !important;
  z-index:3 !important;
}


/* celular */

@media(max-width:700px){

  .tg-ghost{
    width:48px !important;
    height:59px !important;
    opacity:.08 !important;
  }

  .tg-ghost.g3,
  .tg-ghost.g4{
    display:none !important;
  }

}


/* =========================================================
   THE GHOST - FANTASMAS V6
   SEM ESTILO INLINE / COMPATÍVEL COM CSP
   ========================================================= */

#tg-ghost-layer-v6{
  position:fixed !important;
  inset:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  z-index:4 !important;
}

.tg-spirit-v6{
  position:absolute !important;
  left:-150px !important;

  font-size:72px !important;
  line-height:1 !important;

  opacity:.38 !important;

  color:#f6c945 !important;

  filter:
    sepia(.5)
    saturate(1.6)
    drop-shadow(0 0 7px rgba(255,226,120,.85))
    drop-shadow(0 0 22px rgba(246,201,69,.55))
    drop-shadow(0 0 45px rgba(246,201,69,.22)) !important;

  will-change:transform;
}


/* posições */

.tg-spirit-v6.s1{
  top:10% !important;
  animation:tg-v6-right 18s linear infinite -3s !important;
}

.tg-spirit-v6.s2{
  top:25% !important;
  animation:tg-v6-left 23s linear infinite -12s !important;
  font-size:55px !important;
  opacity:.28 !important;
}

.tg-spirit-v6.s3{
  top:42% !important;
  animation:tg-v6-right 28s linear infinite -18s !important;
  font-size:85px !important;
  opacity:.24 !important;
}

.tg-spirit-v6.s4{
  top:60% !important;
  animation:tg-v6-left 20s linear infinite -7s !important;
  font-size:62px !important;
}

.tg-spirit-v6.s5{
  top:76% !important;
  animation:tg-v6-right 32s linear infinite -25s !important;
  font-size:48px !important;
  opacity:.25 !important;
}

.tg-spirit-v6.s6{
  top:88% !important;
  animation:tg-v6-left 26s linear infinite -15s !important;
  font-size:78px !important;
  opacity:.22 !important;
}


/* esquerda -> direita */

@keyframes tg-v6-right{

  0%{
    transform:
      translate3d(-150px,0,0)
      rotate(-8deg);
  }

  20%{
    transform:
      translate3d(20vw,-28px,0)
      rotate(4deg);
  }

  40%{
    transform:
      translate3d(40vw,18px,0)
      rotate(-4deg);
  }

  60%{
    transform:
      translate3d(60vw,-22px,0)
      rotate(5deg);
  }

  80%{
    transform:
      translate3d(80vw,14px,0)
      rotate(-3deg);
  }

  100%{
    transform:
      translate3d(calc(100vw + 250px),-15px,0)
      rotate(7deg);
  }
}


/* direita -> esquerda */

@keyframes tg-v6-left{

  0%{
    transform:
      translate3d(calc(100vw + 250px),0,0)
      scaleX(-1)
      rotate(-5deg);
  }

  25%{
    transform:
      translate3d(75vw,24px,0)
      scaleX(-1)
      rotate(4deg);
  }

  50%{
    transform:
      translate3d(50vw,-25px,0)
      scaleX(-1)
      rotate(-3deg);
  }

  75%{
    transform:
      translate3d(25vw,18px,0)
      scaleX(-1)
      rotate(5deg);
  }

  100%{
    transform:
      translate3d(-180px,-12px,0)
      scaleX(-1)
      rotate(-5deg);
  }
}


/* conteúdo continua clicável e acima */

.wrap,
.container,
main{
  position:relative !important;
  z-index:5 !important;
}


/* celular */

@media(max-width:700px){

  .tg-spirit-v6{
    font-size:45px !important;
    opacity:.22 !important;
  }

  .tg-spirit-v6.s4,
  .tg-spirit-v6.s5,
  .tg-spirit-v6.s6{
    display:none !important;
  }

}


/* =========================================================
   THE GHOST - VOO ALEATÓRIO V8
   ========================================================= */

.tg-spirit-v6{
  animation-timing-function:linear !important;
  will-change:transform;
}

/* fantasma 1 */
.tg-spirit-v6.s1{
  top:8% !important;
  animation:ghostRandom1 22s linear infinite -4s !important;
}

/* fantasma 2 */
.tg-spirit-v6.s2{
  top:22% !important;
  animation:ghostRandom2 29s linear infinite -13s !important;
}

/* fantasma 3 */
.tg-spirit-v6.s3{
  top:44% !important;
  animation:ghostRandom3 35s linear infinite -21s !important;
}

/* fantasma 4 */
.tg-spirit-v6.s4{
  top:63% !important;
  animation:ghostRandom4 26s linear infinite -8s !important;
}

/* fantasma 5 */
.tg-spirit-v6.s5{
  top:78% !important;
  animation:ghostRandom5 39s linear infinite -25s !important;
}

/* fantasma 6 */
.tg-spirit-v6.s6{
  top:88% !important;
  animation:ghostRandom6 31s linear infinite -17s !important;
}


/* =========================================================
   CAMINHOS DIFERENTES
   ========================================================= */

@keyframes ghostRandom1{

  0%{
    transform:
      translate3d(-180px,40px,0)
      rotate(-12deg)
      scale(.95);
  }

  12%{
    transform:
      translate3d(10vw,-40px,0)
      rotate(7deg)
      scale(1.05);
  }

  28%{
    transform:
      translate3d(28vw,75px,0)
      rotate(-5deg)
      scale(.98);
  }

  45%{
    transform:
      translate3d(46vw,-75px,0)
      rotate(10deg)
      scale(1.08);
  }

  63%{
    transform:
      translate3d(65vw,45px,0)
      rotate(-8deg)
      scale(.96);
  }

  80%{
    transform:
      translate3d(82vw,-25px,0)
      rotate(5deg)
      scale(1.03);
  }

  100%{
    transform:
      translate3d(calc(100vw + 250px),65px,0)
      rotate(-7deg)
      scale(.95);
  }
}


/* direita para esquerda */
@keyframes ghostRandom2{

  0%{
    transform:
      translate3d(calc(100vw + 250px),-30px,0)
      scaleX(-1)
      scale(.72);
  }

  18%{
    transform:
      translate3d(82vw,65px,0)
      scaleX(-1)
      scale(.78)
      rotate(8deg);
  }

  36%{
    transform:
      translate3d(64vw,-85px,0)
      scaleX(-1)
      scale(.70)
      rotate(-6deg);
  }

  55%{
    transform:
      translate3d(45vw,55px,0)
      scaleX(-1)
      scale(.76)
      rotate(7deg);
  }

  73%{
    transform:
      translate3d(26vw,-45px,0)
      scaleX(-1)
      scale(.70)
      rotate(-8deg);
  }

  100%{
    transform:
      translate3d(-200px,35px,0)
      scaleX(-1)
      scale(.74);
  }
}


/* caminho com curvas maiores */
@keyframes ghostRandom3{

  0%{
    transform:
      translate3d(-200px,0,0)
      rotate(-10deg)
      scale(.62);
  }

  15%{
    transform:
      translate3d(15vw,-100px,0)
      rotate(8deg)
      scale(.70);
  }

  33%{
    transform:
      translate3d(34vw,95px,0)
      rotate(-12deg)
      scale(.60);
  }

  50%{
    transform:
      translate3d(52vw,-65px,0)
      rotate(11deg)
      scale(.68);
  }

  68%{
    transform:
      translate3d(70vw,110px,0)
      rotate(-8deg)
      scale(.61);
  }

  85%{
    transform:
      translate3d(87vw,-55px,0)
      rotate(6deg)
      scale(.70);
  }

  100%{
    transform:
      translate3d(calc(100vw + 240px),30px,0)
      rotate(-5deg)
      scale(.62);
  }
}


/* direita para esquerda em diagonal */
@keyframes ghostRandom4{

  0%{
    transform:
      translate3d(calc(100vw + 200px),80px,0)
      scaleX(-1)
      scale(.90)
      rotate(10deg);
  }

  20%{
    transform:
      translate3d(80vw,-70px,0)
      scaleX(-1)
      scale(.98)
      rotate(-6deg);
  }

  40%{
    transform:
      translate3d(60vw,50px,0)
      scaleX(-1)
      scale(.88)
      rotate(9deg);
  }

  60%{
    transform:
      translate3d(40vw,-95px,0)
      scaleX(-1)
      scale(.95)
      rotate(-9deg);
  }

  80%{
    transform:
      translate3d(20vw,65px,0)
      scaleX(-1)
      scale(.90)
      rotate(7deg);
  }

  100%{
    transform:
      translate3d(-220px,-30px,0)
      scaleX(-1)
      scale(.92);
  }
}


/* caminho lento */
@keyframes ghostRandom5{

  0%{
    transform:
      translate3d(-170px,30px,0)
      scale(.55)
      rotate(-7deg);
  }

  25%{
    transform:
      translate3d(25vw,-120px,0)
      scale(.62)
      rotate(8deg);
  }

  50%{
    transform:
      translate3d(52vw,80px,0)
      scale(.57)
      rotate(-9deg);
  }

  75%{
    transform:
      translate3d(76vw,-60px,0)
      scale(.64)
      rotate(7deg);
  }

  100%{
    transform:
      translate3d(calc(100vw + 260px),50px,0)
      scale(.55);
  }
}


/* caminho irregular */
@keyframes ghostRandom6{

  0%{
    transform:
      translate3d(calc(100vw + 250px),0,0)
      scaleX(-1)
      scale(.80);
  }

  14%{
    transform:
      translate3d(86vw,-80px,0)
      scaleX(-1)
      scale(.88)
      rotate(10deg);
  }

  31%{
    transform:
      translate3d(69vw,90px,0)
      scaleX(-1)
      scale(.78)
      rotate(-8deg);
  }

  49%{
    transform:
      translate3d(51vw,-110px,0)
      scaleX(-1)
      scale(.86)
      rotate(9deg);
  }

  67%{
    transform:
      translate3d(32vw,65px,0)
      scaleX(-1)
      scale(.80)
      rotate(-10deg);
  }

  84%{
    transform:
      translate3d(15vw,-45px,0)
      scaleX(-1)
      scale(.85)
      rotate(6deg);
  }

  100%{
    transform:
      translate3d(-210px,40px,0)
      scaleX(-1)
      scale(.80);
  }
}


/* ===== CORES DOS STATUS ===== */
.badge-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.status-aprovado{
  color:#35e981;
  border:1px solid rgba(53,233,129,.55);
  background:rgba(53,233,129,.10);
}

.status-reprovado{
  color:#ff5b67;
  border:1px solid rgba(255,91,103,.55);
  background:rgba(255,91,103,.10);
}

.status-pendente{
  color:#f6c945;
  border:1px solid rgba(246,201,69,.55);
  background:rgba(246,201,69,.10);
}

.status-analise{
  color:#58a6ff;
  border:1px solid rgba(88,166,255,.55);
  background:rgba(88,166,255,.10);
}

.status-entrevista{
  color:#c084fc;
  border:1px solid rgba(192,132,252,.55);
  background:rgba(192,132,252,.10);
}

.status-teste{
  color:#ff9f43;
  border:1px solid rgba(255,159,67,.55);
  background:rgba(255,159,67,.10);
}
