*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

background:#050505;
color:white;

font-family:'Inter', sans-serif;

height:100vh;

overflow:hidden;

}

/* fundo partículas */

#particles{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

z-index:-1;

}

/* layout */

.layout{

display:grid;

grid-template-columns:260px 1fr 220px;

height:100vh;

}

/* sidebar */

.sidebar{

padding:35px;

border-right:1px solid #1c1c1c;

}

.sidebar h1{

font-family:'JetBrains Mono', monospace;

font-size:18px;

margin-bottom:30px;

letter-spacing:1px;

}

.sidebar ul{

list-style:none;

}

.sidebar li{

display:flex;

align-items:center;

gap:10px;

padding:10px 0;

cursor:pointer;

color:#ccc;

transition:0.2s;

}

.sidebar li:hover{

color:white;

}

/* conteúdo */

.content{

padding:50px;

overflow-y:auto;

}

.content h2{

margin-bottom:25px;

font-weight:600;

}

/* barra de pesquisa */

.search{

width:300px;

padding:12px;

margin-bottom:35px;

background:#0b0b0b;

border:1px solid #222;

color:white;

outline:none;

}

.search:focus{

border-color:white;

}

/* cards */

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

}

.card{

padding:20px;

border:1px solid #1c1c1c;

background:#0b0b0b;

border-radius:6px;

cursor:pointer;

transition:0.25s;

}

.card:hover{

transform:translateY(-4px);

border-color:white;

}

/* painel direito */

.rightpanel{

padding:35px;

border-left:1px solid #1c1c1c;

color:#aaa;

font-size:14px;

}

.rightpanel h3{

margin-bottom:15px;

color:white;

}

/* ----------------------------- */
/* VIDEO WALLPAPER - INDEX */
/* ----------------------------- */

#bg-video{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

z-index:-2;

opacity:0.25;

pointer-events:none;

}

/* ----------------------------- */
/* VIDEO WALLPAPER - PAGINA AULAS */
/* ----------------------------- */

.page-aulas .bg-aulas{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

z-index:-2;

opacity:0.25;

pointer-events:none;

}

/* partículas ficam acima do vídeo */

.page-aulas #particles{

z-index:-1;

}
/* Vídeo de fundo da matéria */
.bg-governanca-ti {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;          /* coloca o vídeo atrás de tudo */
  opacity: 0.22;        /* transparência desejada */
  pointer-events: none; /* permite clicar nos cards e menus */
}

.page-arquitetura .bg-arquitetura{
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
object-fit: cover;
z-index:-2;
opacity:0.35;
}
.bg-engenharia-requisitos{
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-10;
}
/* Vídeo de fundo - Governança em TI */
.bg-governanca {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;       /* vídeo atrás de tudo */
  opacity: 0.22;     /* transparência */
  pointer-events: none; /* permite clicar nos cards */
}

/* Layout acima do vídeo */
.page-governanca .layout {
  position: relative;
  z-index: 1;
}
.page-engenharia-requisitos .layout{
position:relative;
z-index:5;
}
/* Vídeo de fundo - IoT */
.bg-iot {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;          /* vídeo atrás do conteúdo */
  opacity: 0.22;        /* transparência */
  pointer-events: none; /* permite clicar nos cards */
}

/* Layout acima do vídeo */
.page-iot .layout {
  position: relative;
  z-index: 1;
}
/* Vídeo de fundo UX/UI */
.bg-ux-ui {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;       /* garante que fique atrás do conteúdo */
  opacity: 0.22;     /* transparência do vídeo */
  pointer-events: none; /* permite clicar normalmente nos cards */
}

/* Layout principal para a matéria UX/UI */
.page-ux-ui .layout {
  position: relative;
  z-index: 1;        /* conteúdo acima do vídeo */
}
/* Layout principal da página */
.page-prototipagem .layout {
  position: relative;
  z-index: 1;
}

/* Vídeo de fundo */
.bg-prototipagem {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0.25;       /* ajusta a transparência */
  pointer-events: none; /* permite clicar nos cards e links por cima */
}
/* VIDEO BACKGROUND */
.bg-topicos-emergentes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* LAYOUT PRINCIPAL */
.page-topicos-emergentes .layout {
  position: relative;
  z-index: 1;
}
.content {
  animation: fadePage 0.6s ease;
}

@keyframes fadePage {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 20px;
}

.card {
  padding: 25px;
  border-radius: 12px;

  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);

  text-align: center;
  font-weight: 600;

  cursor: pointer;

  transition: all 0.25s ease;
}

.card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.12);
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.card {
  padding: 20px;
  border-radius: 12px;

  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);

  text-align: center;

  transition: 0.3s;
}

.card:hover {
  transform: scale(1.05);
}
/* ===== CARDS DE FERRAMENTAS ===== */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

/* CARD INDIVIDUAL */
.card {
  background: rgba(20, 20, 20, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  transition: 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* HOVER */
.card:hover {
  transform: translateY(-5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

/* TITULO */
.card h3 {
  margin-bottom: 10px;
  font-weight: 600;
}

/* TEXTO */
.card p {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 15px;
}

/* BOTÃO */
.card button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: #ffffff10;
  color: white;
  cursor: pointer;
  transition: 0.2s ease;
}

/* HOVER BOTÃO */
.card button:hover {
  background: #ffffff25;
}
/* ===== RESPONSIVIDADE (CORRIGIDO DE VERDADE) ===== */

@media (max-width: 768px) {

  /* Layout vertical */
  .layout {
    display: flex;
    flex-direction: column;
  }

  /* RESET TOTAL SIDEBAR */
  .sidebar {
    position: relative; /* ESSENCIAL */
    width: 100%;
    height: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sidebar h1 {
    font-size: 16px;
    margin-bottom: 5px;
  }

  .sidebar ul {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 0;
  }

  .sidebar li {
    font-size: 13px;
  }

  /* RESET DO CONTEÚDO (ESSENCIAL) */
  .content {
    margin: 0; /* ISSO resolve o esmagado */
    width: 100%;
    padding: 15px;
  }

  /* REMOVE PAINEL DIREITO */
  .rightpanel {
    display: none;
  }

  /* CARDS */
  .cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }

  /* DESLIGA VIDEO (melhora MUITO) */
  #bg-video,
  .bg-aulas {
    display: none;
  }

  body {
    background: #0d0d0d;
  }

  /* TIPOGRAFIA */
  h2 {
    font-size: 20px;
  }

  p {
    font-size: 14px;
  }

}