/* CSS completo para EuderTech Portal */
body{
    margin:0;padding:0;
    font-family:'Inter',sans-serif;
    line-height:1.6;
    background:#071028; 
    color:#e6eef6
    
}

body.robotica{
    background: #020617; /* Um azul-escuro quase preto, ultra moderno */
    color: #e2e8f0;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}


/* Animação de entrada da página */
    body {
        animation: fadeInPage 0.8s ease-in-out;
    }

    @keyframes fadeInPage {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }



/* largura da barra de rolagem */
::-webkit-scrollbar {
  width: 12px;
}

/* cor da trilha (fundo da barra) */
::-webkit-scrollbar-track {
  background: #0b0b0b; /* cor de fundo da barra */
  border-radius: 6px;
}

/* cor do "polegar" da barra (parte que você arrasta) */
::-webkit-scrollbar-thumb {
  background-color: #e80000; /* cor verde/azul */
  border-radius: 6px;
  border: 3px solid #0b0b0b; /* espaçamento interno */
}

/* opcional: cor do hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #f700006f; /* verde mais vivo ao passar o mouse */
}



.robotica::-webkit-scrollbar-thumb {
    background-color: #FF4D00;
}

.robotica::-webkit-scrollbar-thumb:hover {
  background-color: #b54102fe; 
}

.container{
    max-width:1100px;
    margin:0 auto;
    padding:1.5rem
}


/********************************************/
/*         PORTAL          */
.container_portal{
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.container_portal h1 { 
  margin-top: 100px;
  font-weight: 600;
  color: white ;
}

/* Formulário de código do curso */
.form-curso {
    margin-bottom: 30px;
    margin-left: 80px;
    display: flex;
    flex-direction: column; /* Empilha os elementos verticalmente */
    gap: 12px;    
    align-items: flex-start; /* Alinha tudo à esquerda */
}



.form-curso input {
    padding: 8px 10px;
    font-size: 16px;
    width: 200px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.form-curso button {
    padding: 8px 15px;
    font-size: 16px;
    background-color: #25d366;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: 0.2s;
}

.form-curso button:hover {
    background-color: #1ebe56;
}
/* Container das caixas de materiais */
.materiais-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Caixa individual */
.material-box {
    flex: 1;
    min-width: 250px;
    background: #f5f5f5;
    border-radius: 10px;
    padding: 15px;
}

.material-box h2 {
    text-align: center;
    margin-bottom: 15px;    
    background: linear-gradient(to right, rgb(71, 0, 0), rgba(180, 0, 0, 0.6));
    border-radius: 8px;
}

/* Cada item dentro da caixa */
.material-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 5px;
    background: #fefdfd;
    border-radius: 5px;
    transition: 0.2s;
}

.material-item:hover {
    background-color: #e0ffe0;
}

.material-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
}


/* Thumb para imagens */
.material-item img.thumb {
    border-radius: 5px;
}

/* Links de download */
.material-item a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

.material-item a:hover {
    text-decoration: underline;
}

/* Mensagem de vazio */
.vazio {
    text-align: center;
    color: #888;
    font-style: italic;
}

/* Diferenciação de cores por tipo */
.material-box.pdf { border-top: 4px solid #ff5e5e; }
.material-box.imagem { border-top: 4px solid #5e9cff; }
.material-box.video { border-top: 4px solid #5eff8e; }
.material-box.pacote { border-top: 4px solid #fac503; }



/********************************************/

.site-header{ 	
	position: fixed; 	 	 	 	/* fixa no topo */
	top:0;
	backdrop-filter:blur(8px);
	z-index: 1000; 	 	 	 	 	/* fica acima de tudo */

	/* NOVO BACKGROUND: Gradiente Transparente */
	/* Começa com preto semi-transparente e vai para vermelho semi-transparente */
	background: linear-gradient(to right, rgba(20, 20, 20, 0.8), rgba(180, 0, 0, 0.6));
	
	/* Manter o efeito de vidro */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0; /* remove o arredondado, pra ocupar toda a largura */ 	
	margin: 0; /* sem margens */
	box-shadow:0 6px 18px rgba(2,6,23,0.6);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
	border:1px solid rgba(255,255,255,0.04);
	left: 0;
	width: 100%; 	 	 	 	 	/* ocupa toda a largura da tela */
}


.site-header_robotica{ 	
	position: fixed; 	 	 	 	/* fixa no topo */
	top:0;
	backdrop-filter:blur(8px);
	z-index: 1000; 	 	 	 	 	/* fica acima de tudo */

	/* NOVO BACKGROUND: Gradiente Transparente */
	/* Começa com preto semi-transparente e vai para vermelho semi-transparente */	
  background: linear-gradient(to right, #020202, #000000, #873201,#340101, #000000);
	
	/* Manter o efeito de vidro */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0; /* remove o arredondado, pra ocupar toda a largura */ 	
	margin: 0; /* sem margens */
	box-shadow:0 6px 18px rgba(2,6,23,0.6);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
	border:1px solid rgba(255,255,255,0.04);
	left: 0;
	width: 100%; 	 	 	 	 	/* ocupa toda a largura da tela */
}


.brand{
    display:flex;
    align-items:center;
    gap:.6rem;
    text-decoration:none;
    color:inherit
}

.brand-logos {
    display: flex;
    align-items: center;
    gap: 5px; /* espaço entre as imagens */
}

.brand img{
    border-radius:8px;
    filter:drop-shadow(0 6px 18px rgba(6,182,212,0.12))
}


.brand-logos img.imglogo {
    height: 70px; /* ajuste conforme o tamanho desejado */
    width: auto;
}

.brand-logos img.imgtext {
  height: 50px; /* ajuste conforme o tamanho desejado */
  width: auto;
}

.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.8rem 1rem
}

.nav-links{
    display:flex;
    gap:1rem;
    list-style:none
}

.nav-links a{
    padding:.5rem .8rem;
    border-radius:8px;
    text-decoration:none;
    color:rgba(154,164,178,1);
    font-weight:500;
    white-space: nowrap;
}

.nav-links a:hover{
    background:rgba(255,255,255,0.06);
    color:#fff
}

.hero{
  position: relative;
  width: 100%; /* garante largura da tela */
  height: auto;       /* altura automática baseada na imagem */
  min-height: 100vh;  /* garante ocupar pelo menos a altura da tela */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* texto próximo ao topo */
  text-align: left;
  overflow: hidden; /* impede que qualquer elemento ultrapasse os limites */
  background: url('../imagens/logo/logo_ofc.png') no-repeat center center/cover;
  background-size: 30% auto; /* 60% da largura, altura proporcional */
}



.hero-img {  
  width: 100%;
  height: auto;
  display: block;
  position: absolute;
  top: -170px;  /* ajusta para subir a imagem */
  left: 0;
  z-index: 1;  
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4); /* escurece a imagem */
  z-index: 2;
}

.hero-content {
  position: absolute;
  top: 160px;          /* levemente mais alto para equilíbrio */
  left: 230px;         /* um pouco mais próximo da borda */
  z-index: 3;
  max-width: 550px;
  text-align: left;  
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
} 

/* Subtítulo / frase */
.hero-content .subtitle {
  margin: 12px 0 0 0;
  font-size: 25px;
  line-height: 1.4;
  font-weight: 400;
  color: rgba(255,255,255,0.93);
  white-space: nowrap;
}

/* Textos à direita */
.hero-content2,
.hero-content3,
.hero-content4 {
  position: absolute;  
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  z-index: 3;
  font-size: 1.3rem;
  white-space: nowrap;
  font-weight: 500;   
}

/* escadinha suave à direita */
.hero-content2 {
  top: 340px;
  right: 200px;
}

.hero-content3 {
  top: 390px;
  right: 180px;
}

.hero-content4 {
  top: 440px;
  right: 160px;
}

.hero-content h1 {
  font-size: 2.8rem;
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  margin: 0;
}

.hero-content span {
  color: #00bcd4;
}

.hero-content p {
  margin-top: 12px;
  color: #ccc;
  font-size: 1.1rem;
}

/* Adiciona o escurecimento */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3); /* ajuste a opacidade conforme preferir */
  z-index: 1;
}

/* Garante que o texto fique sobre o overlay */
.hero h1,
.hero p {
  position: relative;
  z-index: 2;
}

.parallax { 
    position: relative; 
    height: 100vh; 
    background-image: url("../imagens/iarobotica/iarobotica.png"); 
    background-attachment: fixed; /* cria o efeito parallax */ 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    display: flex; 
    justify-content: center; /* conteúdo no topo */  
    align-items: center; 
    padding: 0 5%;      
    box-sizing: border-box;  /* Impede que o padding "estoure" a largura da tela */    
    overflow: hidden; 
    padding-top: 0vh;           /* espaço para respirar */
    z-index: 0;
}




/* Camada escurecida sobre a imagem */
.parallax-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}

.parallax-overlay.robotica {    
    background: linear-gradient(to bottom, rgba(2, 6, 23, 0.4), #020617);
}


/* conteúdo central */
.parallax-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  width: 100%;
  max-width: 740px; 
  text-decoration: none;
  margin: 0 auto;
}

/* Remove sublinhado e mantém o visual limpo */
.parallax-link,
.parallax-link a,
.parallax-link a:visited,
.parallax-link a:hover {
  text-decoration: none;
  color: inherit;
}


/* vidro com efeito glassmorphism */ 
.glass { 
    background: rgba(255, 255, 255, 0.03); 
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;     
    
    padding: 2rem;           /* Mais respiro interno para o texto */
    
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); 
    position: relative; 
    overflow: hidden; 
    z-index: 1; 
    
    width: 100%;     
    min-height: 110px;       /* Troquei height por min-height */
    height: auto;            /* Permite que a caixa cresça se o texto quebrar linha */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Reflexo animado */
.glass::before {
  content: "";
  position: absolute;
  top: 0;

  left: -75%; 
  width: 50%; 
  height: 100%; 
  background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.3), transparent );
  animation: shine 4s infinite;
}

@keyframes shine {
  0% { left: -75%; }
  50% { left: 125%; }
  100% { left: 125%; }
}



/* Fade-out suave da imagem ao sair da tela */
.parallax.hidden .parallax-bg {
  opacity: 0;
  transform: scale(1);
}

.parallax-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.parallax-content p {
  font-size: 1.2rem;
}


.section{
    padding:2.2rem 0;
}
.section-header h3{
    font-size:2.5rem;
    margin-bottom:.3rem;
}
.section-header p{
    color:rgba(154,164,178,1);
    font-size: 1.2rem;
    margin-bottom:1rem;
}

/* Seção Portal */

/* Seções em alternância de tons neutros para combinar com a barra Preto/Vermelho */

/* Seção 1 (Tom 1: Cinza Ardósia Escuro) */
section#portal {
    background-color: rgba(40, 44, 52, 0.95); /* Cinza Ardósia Escuro */
    color: #e6eef6; /* texto claro */
}

/* Seção 2 (Tom 2: Preto Profundo Transparente) */
section#projetos {
    background-color: rgba(18, 18, 18, 0.98); /* Preto Profundo Transparente */
    color: #e6eef6; /* texto claro */
}

/* Seção 3 (Tom 1: Cinza Ardósia Escuro) */
#esp32 {
    background-color: rgba(40, 44, 52, 0.95); /* Cinza Ardósia Escuro */
    color: #e6eef6; /* texto claro */
}

/* Seção 4 (Tom 2: Preto Profundo Transparente) */
#ia { 	
    background-color: rgba(18, 18, 18, 0.98); /* Preto Profundo Transparente */ 	
    color: #e6eef6; /* texto claro */
}



.cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1rem;
}
.card{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    padding:1.2rem;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 8px 20px rgba(2,6,23,0.4);
    transition: all 0.3s ease; /* transição suave */
    transform: translateY(0);
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.6s ease forwards;
}




.card h4 {
    font-size: 1.5rem; /* título do card */
}

.card p {
    font-size: 1.2rem !important; /* descrição */
}

.card-link {
    font-size: 1.2rem; /* link do card */
}



/* Efeito no hover */
.card:hover {
  transform: translateY(-8px); /* leve elevação */
  box-shadow: 0 12px 25px rgba(232, 0, 0, 0.4);  
  border-color: rgba(232, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.05);
}

/* Sequência para cada card */
.cards-grid .card:nth-child(1) { animation-delay: 0.1s; }
.cards-grid .card:nth-child(2) { animation-delay: 0.3s; }
.cards-grid .card:nth-child(3) { animation-delay: 0.5s; }

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


.card h4{
    margin-bottom:.4rem;
}
.card p{
    color:rgba(154,164,178,1);
    font-size:.95rem;margin-bottom:.8rem;
}


.card_usuario{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding: 1.2rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 20px rgba(2,6,23,0.4);
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s ease forwards;
  width: 250px;
  font-size: 0.9rem;
  max-height: 210px;
  overflow: hidden;      
}

.card_usuario.cursos {
  position: relative;
  top: -25px;  
  max-height: 300px;
}

.card_usuario.materiais {
  position: relative;
  top: -25px;  
  max-height: 300px;
}

.card_usuario.upload {
  position: relative;
  max-height: 800px;  
}

.card_usuario.upload-aluno {
  position: relative;
  max-height: 400px;  
}

.card_usuario.avisos {
  position: relative;
  width: 670px;
  max-width: 670px;
  max-height: 500px;  
  top: -171px;
  left: 350px;
  align-items: center;
}

.card_usuario.avisos textarea {
  width: 100%;
  width: 650px;
  min-height: 180px;
  padding: 10px;
  font-size: 17px;
  border: 1px solid #ccc;
  border-radius: 8px;
  resize: vertical;
}

.card_usuario.avisos .botoes {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}


.card_usuario.aviso-aluno {
  background: #2e0101;
  border: 1px solid #ffd37a;
  padding: 15px;
  border-radius: 10px;
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 355px;
  max-width: 355px;
  max-height:250px; 
  overflow-y: auto;  /* adiciona barra de rolagem interna */
}
.card_usuario.aviso-aluno h2 {
  color: #d17a00;
  margin-bottom: 10px;
  font-size: 18px;
}
.card_usuario.aviso-conteudo {
  white-space: pre-line;
  color: #333;
  line-height: 1.5;
}


.curso-destaque {
  background-color: #f8d305;  /* amarelo suave */
  color: #f50505;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;  
  font-size: 20px;
}



.card_usuario.cursos textarea[name="descricao"] {
  width: 220px;               /* ocupa todo o espaço do container */
  height: 8px;             /* altura fixa */
  padding: 15px;             /* espaçamento interno */
  border-radius: 8px;        /* bordas arredondadas */
  border: 1px solid rgba(255,255,255,0.06); /* mesmo estilo das divs/cards */
  background: linear-gradient(180deg, rgb(255, 254, 254), rgb(251, 249, 249));
  color: #fff;               /* cor do texto */
  font-size: 0.9rem;
  resize: none;              /* impede redimensionamento pelo usuário */
  box-shadow: 0 4px 12px rgba(2,6,23,0.2); /* sombra suave similar ao card */
  transition: all 0.3s ease;
}

.card_usuario.cursos textarea[name="descricao"]::placeholder {
  color: rgba(0, 0, 0, 0.6); /* placeholder em tom suave */
  font-style: italic;
}

.card_usuario.lista.cursos textarea[name="descricao"] {
  width: 200px;               /* ocupa todo o espaço do container */
  height: 9px;             /* altura fixa */
  padding: 12px;             /* espaçamento interno */
  border-radius: 8px;        /* bordas arredondadas */
  border: 1px solid rgba(255,255,255,0.06); /* mesmo estilo das divs/cards */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgb(238, 236, 236));
  color: #060000;               /* cor do texto */
  font-size: 0.9rem;
  resize: none;              /* impede redimensionamento pelo usuário */
  box-shadow: 0 4px 12px rgba(2,6,23,0.2); /* sombra suave similar ao card */
  transition: all 0.3s ease;
}

.card_usuario.lista.cursos textarea[name="descricao"]::placeholder {
  color: rgba(255, 255, 255, 0.6); /* placeholder em tom suave */
  font-style: italic;
}


.card_usuario.lista.cursos select[name="status"] {
  width: 100%;                    
  padding: 10px 12px;             
  border-radius: 8px;             
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgb(238, 236, 236));
  color: #ff6403;                 /* texto colorido (ex: laranja) */
  font-size: 0.9rem;
  appearance: none;               
  box-shadow: 0 4px 12px rgba(23, 2, 2, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  width: 70px;
}

.card_usuario.materiais select[name="curso"] {
  width: 100%;                    
  padding: 10px 12px;             
  border-radius: 8px;             
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgb(238, 236, 236));
  color: #d10704;                 /* texto colorido (ex: laranja) */
  font-size: 0.9rem;
  appearance: none;               
  box-shadow: 0 4px 12px rgba(23, 2, 2, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  width: 250px;
}

/* placeholder da seta (opcional, depende do navegador) */
.card_usuario.materiais select[name="curso"]::-ms-expand {
  display: none;
}

.card_usuario.lista.cursos .botoes-acoes {
  display: flex;
  gap: 2px;           /* distância entre os botões */
  flex-wrap:nowrap;    /* quebra linha se não couber */
  justify-content: flex-start; /* ou center, conforme quiser */
}

.card_usuario.lista.cursos .botoes-acoes .btn {
  padding: 6px 10px;   /* menor padding */
  font-size: 0.85rem;  /* fonte menor */
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;            /* espaço entre ícone e texto */
}

.card_usuario.lista.cursos .botoes-acoes .btn i {
  font-size: 0.9rem;   /* ícones proporcionais à fonte */
}



/* placeholder da seta (opcional, depende do navegador) */
.card_usuario.lista.cursos select[name="status"]::-ms-expand {
  display: none;
}

/* Efeito no hover */
.card_usuario:hover {
  transform: translateY(-8px); /* leve elevação */
  box-shadow: 0 12px 25px rgba(232, 0, 0, 0.4);  
  border-color: rgba(232, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.05);
}


.card_usuario.lista {
  flex: 1;
  position: relative;
  top: -250px;
  left: 330px;
  width: 730px;  
  height: 300px;
  max-height: none;  
  max-height: 500px; /* altura máxima visível */
  overflow-y: auto;  /* adiciona barra de rolagem interna */
}

.card_usuario.lista.cursos {
  flex: 1;
  position: relative;
  top: -10px;
  left: 0px;
  width: 1050px;  
  height: 450px;
  max-height: none;  
  max-height: 500px; /* altura máxima visível */
  overflow-y: auto;  /* adiciona barra de rolagem interna */
}


.card_usuario.lista.materiais {
  flex: 1;
  position: relative;
  top: -530px;
  left: 320px;
  width: 740px;  
  height: 470px;
  max-height: none;  
  max-height: 500px; /* altura máxima visível */
  overflow-y: auto;  /* adiciona barra de rolagem interna */
}


.card_usuario.lista h2 {
  color: white;
}


/* drop area */
#drop-area {
  border: 3px dashed #100a00;
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  background: #024a85;
  transition: 0.3s ease;
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

#drop-area.dragover {
  border-color: #2196f3;
  background-color: #e3f2fd;
}

#fileElem {
  display: none;
}

#file-label {
  font-size: 1.1em;
  color: #666;
  cursor: pointer;
  display: inline-block;
}

#file-label i {
  font-size: 3em;
  color: #2196f3;
  margin-bottom: 10px;
}

#file-label span {
  color: #2196f3;
  font-weight: 600;
}

#lista-arquivos {
  margin-top: 20px;
  text-align: left;
}

#lista-arquivos div {
  background: #660101;
  border-radius: 10px;
  padding: 10px 15px;
  margin-bottom: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  font-size: 0.95em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#lista-arquivos div i {
  color: #4caf50;
}

#drop-area label {
  display: inline-block;
  padding: 10px 20px;
  margin-top: 15px;
  background: #25d366;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
}
#drop-area label:hover {
  background: #1ebe5d;
}

.arquivo-item {
  background: #fff;
  border-radius: 10px;
  padding: 10px 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.arquivo-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}
.arquivo-nome {
  font-weight: 600;
}
.progress-container {
  width: 100%;
  background: #eee;
  border-radius: 6px;
  margin-top: 6px;
  height: 6px;
}
.progress-bar {
  width: 0;
  height: 6px;
  background: #25d366;
  border-radius: 6px;
  transition: width 0.3s;
}







/* Tabela */
.tabela-usuarios {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
}

.tabela-usuarios th, .tabela-usuarios td {
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.tabela-usuarios th {
  text-align: left;
}




/* Formulário */
.form-acao input {
  padding: 8px;
  border-radius: 6px;
  border: none;
  background: #1b1b1d;
  color: #fff;
  font-size: 0.9rem;
}
/* Botões */
.botoes-acoes {
  display: flex;
  gap: 10px;
}

.card-link{
    display:inline-block;
    margin-top:.4rem;
    text-decoration:none;
    font-weight:600;
    color:#e80000;
}

.project-thumb{
    height:96px;
    border-radius:8px;
    background:linear-gradient(90deg, rgba(6,182,212,0.12), rgba(96,165,250,0.12));
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:#e80000;
    padding: 10px;
    margin-bottom: 0.8rem;
    backdrop-filter: blur(6px);
}

.project-thumb img {
  max-width: 100%;
  height: 100px;  /* altura uniforme */  
  object-fit: contain; /* mantém proporção */  
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
  transition: transform 0.3s ease;
}

.project-thumb img:hover {
  transform: scale(1.05);
}

.project-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.project-thumb img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  opacity: 0.9;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.card.project:hover .project-thumb img {
  transform: scale(1.05);
  opacity: 1;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 10px;
}

.card.bloqueado .overlay {
  opacity: 1;
}

.card.bloqueado {
  /* pointer-events: none; */ 
  opacity: 1; /* 100% visível */
  filter: brightness(1.1) contrast(1.1); /* realça as cores */
  position: relative;
}
.card.bloqueado::after {  
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  border-radius: 12px;
}

#sobre {
  
  background-color: rgba(1, 0, 11, 0.9); /* cinza escuro translúcido */
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  text-align: justify;
  max-width: 1039px;
  margin: 0 auto;
}

#sobre h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

#sobre p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(230, 230, 230, 0.9);
}

/* ===== Seção Contato ===== */
#contato {
  padding: 4rem 0;
  background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.4), rgba(6, 11, 28, 0.9));
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
  margin: 3rem auto;
  max-width: 800px;
}

.contact h3 {
  font-size: 2rem;
  color: #e80000;
  margin-bottom: 1rem;
}

.contact p {
  color: #cfcfcf;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.contact a {
  color: #e80000;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact a:hover {
  color: #ff3333;
}

/* ===== Formulário ===== */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.form-row {
  display: flex;
  flex-direction: column;
}

.form-row label {
  font-weight: 600;
  color: #e80000;
  margin-bottom: 0.4rem;
}

.form-row input,
.form-row textarea {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 188, 212, 0.2);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  color: #fff;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s ease;
}

.form-row input:focus,
.form-row textarea:focus {
  border-color: #e80000;
  box-shadow: 0 0 12px rgba(232, 0, 0, 0.4);
  background: rgba(255, 255, 255, 0.12);
}

/* ===== Botão ===== */
.btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(6, 214, 245, 0.5);
}

.btn:active {
  transform: scale(0.97);
  box-shadow: 0 0 10px rgba(6, 214, 245, 0.3);
}

/* ===== Área dos botões ===== */
.form-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 15px;
  justify-content: center; /* Centraliza os botões */
}

.btn i {
  font-size: 1.2rem;
}




.btn-whatsapp {
  background: linear-gradient(135deg, #25d366, #1ebe57);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.5);
}

.btn-whatsapp:active {
  background: linear-gradient(135deg, #1ebe57, #25d366);
}

/* ===== Gmail ===== */
.btn-gmail {
  background: linear-gradient(135deg, #ea4335, #c5221f);
  color: #fff;
  box-shadow: 0 4px 12px rgba(234, 67, 53, 0.3);
}

.btn-gmail:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(234, 67, 53, 0.5);
}

.btn-gmail:active {
  background: linear-gradient(135deg, #c5221f, #ea4335);
}
/* ===== Botão Limpar ===== */
.btn-clear {
  background: linear-gradient(135deg, #555, #333);
  color: #fff;
  box-shadow: 0 4px 12px rgba(85, 85, 85, 0.3);
}

.btn-clear:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(85, 85, 85, 0.5);
}

.btn-clear:active {
  background: linear-gradient(135deg, #333, #555);
}



/* ======== MENU LATERAL ======== */
.menu-lateral {
  width: 300px;
  background: linear-gradient(180deg, #1a0000, #230000);
  color: white;
  display: flex;
  flex-direction: column;
  padding: 20px;
  position: fixed;
  top: 0;
  left: 20px; /*  afastamento da borda esquerda */
  height: 100vh;
  border-radius: 10px; /* opcional, deixa visual mais suave */
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.menu-lateral h2 {
  text-align: center;
  margin-bottom: 25px;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1px;
}

.menu-lateral ul {
  list-style: none;
  padding: 0;  
  margin: 100px 0 0 0; /* distância do topo do menu */
  
}

.menu-lateral ul li {
  margin-bottom: 20px;
}

.menu-lateral ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ddd;
  text-decoration: none;
  padding: 12px 15px;
  border-radius: 8px;
  font-weight: 500;
  transition: background 0.3s, color 0.3s;
}

.menu-lateral ul li a:hover,
.menu-lateral ul li a.ativo {
  background: #3a0000;
  color: white;
}

/* ======== CONTEÚDO ======== */
.conteudo {  
  position: fixed;
  top: 500px;      /* distância do topo */
  left: 30px;    /* ajusta para o lado direito do menu lateral */
  right: 20px;    /* margem à direita */
  bottom: 60px;   /* distância do rodapé */
  overflow-y: auto; /* adiciona rolagem interna, se o conteúdo for longo */
  padding: 20px;    
}

.conteudo h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
}

.conteudo p {
  font-size: 16px;
  color: #555;
}

.conteudo.usuarios {
    color: rgb(3, 0, 0) ;
}

.conteudo.usuarios h1 {
    color: rgb(3, 0, 0) ;
}

.painelusuarios {
  position: fixed;
  top: 120px;
  left: 365px;
  right: 20px;
  bottom: 135px;
  /* overflow-y: auto;  barra de rolagem */
  padding: 20px;
  background: #520101;
  border-radius: 10px; 
}

.painelusuarios.cursos {
  position: fixed;
  top: 120px;
  left: 365px;
  right: 20px;
  bottom: 0px;
  overflow-y: auto;  /*barra de rolagem  */
  padding: 20px;
  background: #520101;
  border-radius: 10px; 
}


.painelusuarios.materiais {
  position: fixed;
  top: 120px;
  left: 365px;
  right: 20px;
  bottom: 0px;
  overflow-y: auto;  /*barra de rolagem  */
  padding: 20px;
  background: #520101;
  border-radius: 10px; 
}

.painelusuarios.avisos {
  position: fixed;
  top: 120px;
  left: 365px;
  right: 20px;
  bottom: 60px;
  overflow-y: none;  /*barra de rolagem  */
  padding: 20px;
  background: #520101;
  border-radius: 10px; 
}

.msg-sucesso {
  background: #e0ffe0;
  color: #227722;
  padding: 10px 16px;
  border: 1px solid #77c277;
  border-radius: 8px;
  width: fit-content;
  text-align: center;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;

  /* fixar na parte inferior */
  position: fixed;
  bottom: 0px; /* distância do fundo */
  left: 70%;
  transform: translateX(-50%);
  z-index: 9999; /* fica acima de tudo */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  animation: fadeOut 4s ease-in-out forwards;

}
  @keyframes fadeOut {
  0% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; display: none; }
}

.painelusuarios h1 { 
  margin-top: 0;
  font-weight: 600;
  color: white ;
}


/* ======== BOTÕES ======== */
.btnpainel:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(244, 107, 2, 0.5);
}

.btnpainel:active {
  transform: scale(0.97);
  box-shadow: 0 0 10px rgba(6, 214, 245, 0.3);
}


.btn-principal {  
  background: linear-gradient(135deg, #013554, #013f66);
  color: white;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
}

.btn-principal:hover {
  background-color: #010f1b;
}

.btn-secundario {
  background-color: #01457d;
  color: white;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
}

.btn-secundario:hover {
  background-color: #1976D2;
}

.btn-logout {
  background-color: #610801;
  color: white;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
}

.btn-logout:hover {
  background-color: #340101;
}

.btn-add {  
  margin: 20px auto 0;   /* centraliza horizontalmente e dá um espaço acima */
  background: linear-gradient(135deg, #013554, #013f66);
  color: #fff;
  box-shadow: 0 4px 12px rgba(113, 1, 1, 0.3);
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  margin: 5px auto 0;
  text-decoration: none;
  transition: 0.3s;  
  display: flex;
  align-items: center;
  gap: 8px;  
  justify-content: center;
  margin-top: 10px;  
}


.btn-update { background: linear-gradient(135deg, #013554, #015277); color: #fff; }
.btn-delete { background: #b00000; text-decoration: none; color: #fff; }



/* Estilo Base do Botão de Download */
.btn-download_aluno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espaço entre o ícone/emoji e o texto */
    background-color: #017c09dd; /* Azul característico que combinamos antes */
    color: #ffffff;
    padding: 8px 16px;
    font-size: 0.95em;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px; /* Bordas levemente arredondadas */
    border: none;
    cursor: pointer;
    transition: all 0.3s ease; /* Transição suave para os efeitos */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra leve */
}

/* Efeito ao passar o mouse (Hover) */
.btn-download_aluno:hover {
    background-color: #015e8f; /* Azul um pouco mais escuro */
    color: #ffffff;
    transform: translateY(-2px); /* Faz o botão dar uma "levantadinha" */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Aumenta a sombra */
}

/* Efeito ao clicar (Active) */
.btn-download_aluno:active {
    transform: translateY(0); /* Volta para a posição original */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); /* Reduz a sombra simulando o clique */
}






.tabela-usuarios.materiais .btn-delete  {
    padding: 5px 10px;       /* altura e largura internas */
    font-size: 16px;         /* tamanho do texto */
    width: auto;             /* largura automática */
    min-width: 100px;         /* largura mínima */
    max-width: 120px;        /* largura máxima */
    cursor: pointer;
}


.site-footer{
    padding:1rem 0;
    text-align:center;
    border-top:1px solid rgba(255,255,255,0.06);
    color:rgba(154,164,178,1)
}




.cabecalho-lista {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.busca-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

#buscarCurso {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 12px;
  width: 260px;
  transition: all 0.3s ease;
}

#buscarCurso:focus {
  outline: none;
  border-color: #25d366;
  box-shadow: 0 0 6px rgba(37, 211, 102, 0.4);
}

.contador {
  font-size: 0.9em;
  color: #555;
  background: #f8f9fa;
  padding: 6px 10px;
  border-radius: 10px;
}





/* ===================== */
/*  EM DESENVOLVIMENTO   */
/* ===================== */
.em-desenvolvimento {
  min-height: calc(95vh - 120px); /* considerando header e footer */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1px 10px;
  text-align: center;
}

.em-desenvolvimento img {
  max-width: 190px;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.4));
}

.em-desenvolvimento h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #e80000;
  text-transform: uppercase;
  letter-spacing: 2px;
}




/* Botão escondido por padrão */
.menu-toggle {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

/* Menu padrão (desktop) */
.nav-links {
  display: flex;
  gap: 1.5rem;  
}
#nav-links.active {
  display: block; /* mostra quando clicado */
}


 /* -------------------   APP  ---------------------*/
.login-container {
  background: white;
  max-width: 400px;
  height: 200px;
  margin: 130px auto;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  text-align: center;
}

.login-container h2 {
  color:rgb(1, 0, 11)
}

.login-container input {
  width: 90%;
  padding: 10px;
  margin: 6px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
}

button {
  padding: 10px 16px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.erro { color: red; margin-top: 10px; }
.sucesso { color: green; }

.imagem {  
  justify-content: center;
  align-items: center;  
}


/* ===== ENTRAR ===== */
.btn-entrar {  
  margin: 20px auto 0;   /* centraliza horizontalmente e dá um espaço acima */
  background: linear-gradient(135deg, #013554, #013f66);
  color: #fff;
  box-shadow: 0 4px 12px rgba(1, 43, 250, 0.3);
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  margin: 5px auto 0;
  text-decoration: none;
  transition: 0.3s;  
  display: flex;
  align-items: center;
  gap: 8px;  
  justify-content: center;
  margin-top: 48px;
}

.btn-entrar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(1, 5, 58, 0.5);
}



.botoes-acao {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 40px;
}

/* Botão Voltar */
.btn-voltar {
  background: linear-gradient(135deg, #4a0000, #7a0b0b);
  color: #fff;
  padding: 12px 25px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-voltar:hover {
  background: linear-gradient(135deg, #300000, #5a0505);
}

/* Botão Confirmar (Verify) */
.btn-confirmar {
  background: linear-gradient(135deg, #013554, #015277);
  color: #fff;
  padding: 12px 25px;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-confirmar:hover {
  background: linear-gradient(135deg, #02283e, #013554);
}



.dropzone-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.dropzone {
    flex: 1 1 300px;
    border: 2px dashed #25d366;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.dropzone.dragover {
    background-color: #e0ffe0;
}

.dropzone p {
    margin: 0;
    font-size: 14px;
}

.card_usuario.lista.materiais {
    margin-top: 20px;
}

.card_usuario.lista.materiais table {
    width: 100%;
    border-collapse: collapse;
}

.card_usuario.lista.materiais th, td {
    padding: 8px;
    border: none;
    text-align: left;
}




/***************************************************
***************************************************
                  ROBOTICA EDUCACIONAL
***************************************************/
.card_robotica {
    /* Fundo escuro com um toque de laranja bem suave */
    background: linear-gradient(180deg, rgba(255, 77, 0, 0.07) 0%, rgba(255, 77, 0, 0.02) 100%);
    backdrop-filter: blur(10px); /* Efeito de vidro */
    border: 1px solid rgba(255, 77, 0, 0.2); /* Borda laranja translúcida */
    
    /* Restante do seu código corrigido */
    padding: 2rem; /* Aumentei um pouco o respiro interno */
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
    opacity: 0;
    animation: fadeUp 0.6s ease forwards;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Garante que o link fique sempre no rodapé */
    transition: transform 0.3s ease;
}

.card_robotica:hover {
    transform: translateY(-5px);
    /* Intensifica levemente a borda e o fundo no hover */
    background: linear-gradient(180deg, rgba(255, 77, 0, 0.12) 0%, rgba(255, 77, 0, 0.05) 100%);
    border: 1px solid rgba(255, 77, 0, 0.5);
    box-shadow: 0 12px 40px rgba(255, 77, 0, 0.15); /* Um brilho laranja suave no fundo */
}


/* Adicione isso aos seus cards para uma entrada suave */
.card_robotica {
    animation: slideUp 0.8s ease-out forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-link_robotica {
    font-size: 1.3rem;
    font-weight: 800;
    text-decoration: none;
    /* Aplica o gradiente diretamente no texto */
    background: linear-gradient(90deg, #FF8C00, #FF4D00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: filter 0.3s ease;
}

.card-link_robotica:hover {
    filter: drop-shadow(0 0 8px rgba(255, 77, 0, 0.6));
}

/* Novo estilo para links com seta direcional */
.tech-link-step {
    text-decoration: none;
    color: #ffffff; /* Cor do texto (ajuste conforme seu fundo) */
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
}

/* Estilo da seta (o span) */
.tech-link-step span {
    display: inline-block;
    margin-left: 5px;
    opacity: 0.4; /* Ela começa meio apagadinha */
    transform: translateX(0);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Efeito elástico */
    color: #FF4D00; /* Cor de destaque da EuderTech */
}

/* Efeito ao passar o mouse */
.tech-link-step:hover {
    color: #FF4D00; /* Texto muda para laranja */
}

.tech-link-step:hover span {
    opacity: 1; /* Seta brilha intensamente */
    transform: translateX(8px); /* Seta dá um "pulo" para a direita */
}


/* Título mais elegante */
.card_robotica h4 {
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.3;
    margin-bottom: 1rem;
    font-weight: 700;
}

/* Texto mais legível */
.card_robotica p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}



/* O Container que segura as duas imagens */
.robot-showcase-container {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;
    gap: 3rem;               /* Espaço entre as fotos */
    margin: 5rem auto;       /* Espaçamento generoso acima e abaixo */
    flex-wrap: wrap;         /* Permite que uma fique embaixo da outra no celular */
}

/* A "moldura" tecnológica em volta de cada foto */
.robot-frame {
    position: relative;
    max-width: 500px;        /* Tamanho máximo para desktops */
    width: 100%;             /* Responsivo */
    border-radius: 16px;     /* Cantos arredondados iguais aos dos cards */
    overflow: hidden;        /* Garante que a imagem não vaze as bordas arredondadas */
    
    /* Estilo da Borda e Sombra (Glass/Tech) */
    border: 2px solid rgba(255, 77, 0, 0.3); /* Borda laranja translúcida */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Sombra profunda para dar destaque */
    transition: all 0.4s ease;
}

/* Estilo da imagem dentro da moldura */
.robot-frame img {
    width: 100%;
    height: auto;
    display: block; /* Remove espaços indesejados abaixo da imagem */
    transition: transform 0.4s ease;
}

/* --- Efeitos de Hover (Passar o mouse) --- */
.robot-frame:hover {
    transform: translateY(-10px); /* A foto "levita" */
    border-color: #FF4D00;        /* A borda fica laranja vibrante */
    /* Um brilho laranja "radioativo" surge atrás da foto */
    box-shadow: 0 15px 40px rgba(255, 77, 0, 0.25); 
}

.robot-frame:hover img {
    transform: scale(1.03); /* Um leve zoom na foto para dar dinamismo */
}

/* Container de imagem do projeto */
.project-thumb_robotica {
    width: 100%;
    height: 200px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.2rem;
    border: 1px solid rgba(255, 77, 0, 0.1);
    transition: 0.3s;
}

.project-thumb_robotica img {
    height: 180px; /* Tamanho do logo do Arduino */    
    width: auto;
    filter: grayscale(1) opacity(0.7); /* Efeito sóbrio inicial */
    transition: 0.3s;
}

/* Efeito ao passar o mouse no Card */
.project-card_robotica:hover .project-thumb_robotica {
    background: rgba(255, 77, 0, 0.05);
    border-color: rgba(255, 77, 0, 0.4);
}

.project-card_robotica:hover .project-thumb_robotica img {
    filter: grayscale(0) opacity(1); /* Logo ganha cor no hover */
    transform: scale(1.1);
}

/* Título e Texto do Card */
.project-card_robotica h4 {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 0.8rem;
}

.project-card_robotica p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    flex-grow: 1; /* Empurra o link para baixo */
    margin-bottom: 1.5rem;
}

/* Link/Botão do Card */
.card-link_robotica2 {
    text-decoration: none;
    color: #FF4D00;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.card-link_robotica2 span {
    transition: transform 0.3s ease;
}

.card-link_robotica2:hover span {
    transform: translateX(5px); /* A seta se move no hover */
}

/* Estilo específico para destacar o card de Protótipos */
.project-card_robotica:nth-child(2) {
    border: 1px solid rgba(255, 77, 0, 0.4); /* Borda um pouco mais visível */
    background: linear-gradient(180deg, rgba(255, 77, 0, 0.1) 0%, rgba(255, 77, 0, 0.03) 100%);
}

.tech-display-container {
    display: flex;
    justify-content: center;
    padding: 6rem 0;
    background: radial-gradient(circle, rgba(255, 77, 0, 0.05) 0%, transparent 70%);
}

.tech-display-frame {
    position: relative;
    max-width: 700px;
    width: 90%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(5px);
    border-radius: 4px; /* Cantos mais retos para parecer tela */
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

/* Imagem com efeito sutil */
.tech-display-frame img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
    filter: saturate(1.1) contrast(1.1);
}

/* Estilização dos Cantos (Corners) */
.corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 3px solid #FF4D00;
    pointer-events: none; /* Não atrapalha o mouse */
}

.top-left { top: -5px; left: -5px; border-right: none; border-bottom: none; }
.top-right { top: -5px; right: -5px; border-left: none; border-bottom: none; }
.bottom-left { bottom: -5px; left: -5px; border-right: none; border-top: none; }
.bottom-right { bottom: -5px; right: -5px; border-left: none; border-top: none; }

/* Animação de Pulso no Hover */
.tech-display-frame:hover {
    box-shadow: 0 0 30px rgba(255, 77, 0, 0.2);
    transition: 0.5s ease;
}

.tech-display-frame:hover .corner {
    width: 45px;
    height: 45px;
    transition: 0.3s ease-out;
}

.stem-section {
    padding: 6rem 2rem;
    color: #fff;
}

.stem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide em duas colunas no desktop */
    gap: 4rem;
    align-items: center;
}

/* Título com Gradiente */
.stem-text h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    font-weight: 800;
}

.orange-gradient {
    background: linear-gradient(90deg, #FF8C00, #FF4D00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stem-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
}

/* Grid de Tech Badges */
.tech-capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.tech-badge {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 77, 0, 0.2);
    padding: 0.8rem 1.5rem;
    border-radius: 50px; /* Estilo pílula */
    font-weight: 600;
    font-size: 0.9rem;
    color: #E2E8F0;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    cursor: default;
}

.tech-badge:hover {
    background: rgba(255, 77, 0, 0.1);
    border-color: #FF4D00;
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255, 77, 0, 0.3);
}

/* Estilo para Cards Bloqueados */
.card_bloqueado {
    opacity: 0.85;
    filter: grayscale(0.4); /* Deixa um pouco mais sóbrio */
    cursor: not-allowed !important;
    position: relative;
}

.card_bloqueado:hover {
    transform: none !important; /* Não flutua para mostrar que está travado */
    filter: grayscale(0); /* Ganha cor ao passar o mouse */
    opacity: 1;
}

/* Thumb com Desfoque */
.card_bloqueado .project-thumb_robotica img {
    filter: blur(2px); /* Imagem misteriosa */
    transition: 0.5s;
}

.card_bloqueado:hover .project-thumb_robotica img {
    filter: blur(0); /* Limpa o desfoque no hover */
}

/* Etiqueta de Status (Badge) */
.tag-status {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.em-desenvolvimento_robotica {
    border-color: #FF4D00;
    animation: pulse-border 2s infinite;
}

/* Botão Desabilitado */
.btn_bloqueado {
    margin-top: auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn_bloqueado::before {
    content: '🔒'; /* Ícone de cadeado sutil */
    font-size: 0.9rem;
}

/* Animação de Pulso para o Status */
@keyframes pulse-border {
    0% { box-shadow: 0 0 0 0 rgba(255, 77, 0, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 77, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 77, 0, 0); }
}


/* Grid que segura os logos */
.tools-grid {
    display: flex;
    justify-content: center; /* Centraliza os itens */
    align-items: center;
    gap: 2rem; /* Espaço entre os logos */
    flex-wrap: wrap; /* Permite que quebrem linha em telas pequenas */
    padding: 2rem 0;
}

/* O "card" que envolve cada logo */
.tool-item {
    background: rgba(255, 255, 255, 0.03); /* Fundo de vidro muito sutil */
    border: 1px solid rgba(255, 255, 255, 0.05); /* Borda quase invisível */
    border-radius: 16px;
    padding: 1.5rem 2.5rem; /* Espaço interno generoso */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease; /* Transição suave para o hover */
    cursor: help; /* Indica que tem uma dica de ferramenta (title) */
}

/* Estilo da Imagem do Logo */
.tool-item img {
    max-width: 100px; /* Tamanho máximo do logo */
    height: auto; /* Mantém a proporção */
    filter: grayscale(1) opacity(0.5); /* Começa cinza e meio transparente */
    transition: all 0.4s ease;
}

/* --- EFEITOS DE HOVER (Ao passar o mouse) --- */

/* O container do item no hover */
.tool-item:hover {
    background: rgba(255, 255, 255, 0.07); /* Fica ligeiramente mais claro */
    border-color: rgba(255, 77, 0, 0.3); /* Borda ganha um tom laranja sutil */
    transform: translateY(-5px); /* Levanta um pouco */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Sombra suave */
}

/* A imagem do logo no hover */
.tool-item:hover img {
    filter: grayscale(0) opacity(1); /* Ganha a cor original e opacidade total */
    transform: scale(1.1); /* Um leve zoom para dar vida */
}

.footer-social-section {
    padding: 3rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    /* Linha sutil de separação acima */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 2rem;
}

.social-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 1px;
    margin: 0;
}

/* Container dos ícones */
.social-icons-wrapper {
    display: flex;
    gap: 25px;
}

/* Estilo dos Botões de Redes Sociais */
.social-btn, .social-item { /* usei as duas classes para garantir */
    font-size: 2.2rem; /* Tamanho ideal para destaque */
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover: Efeito de Brilho e Cor */
.social-btn:hover, .social-item:hover {
    color: #FF4D00;
    transform: translateY(-5px);
    filter: drop-shadow(0 0 10px rgba(255, 77, 0, 0.5));
}


/**************** MATERIAL DIDATICO ******************/
/* Layout da Página de Material Didático */

/* Área do Título Superior */
.page-title-area {
    text-align: center;
    padding: 100px 0 40px 0; /* Espaço para o header fixo e respiro embaixo */
}

.page-title-area h1 {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.page-title-area p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin: 0 auto;
}

.header-line {
    width: 60px;
    height: 4px;
    background: #FF4D00;
    margin: 20px auto 0;
    border-radius: 2px;
}

.material-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start; /* Alinha os tópicos pelo topo da imagem */
    margin-bottom: 5rem;
}

/* Lado Esquerdo - Visual */
.material-visual .tech-display-frame {
    max-width: 100%;
    transform: rotate(-1deg); /* Leve inclinação para estilo extra */
}

/* Lado Direito - Tópicos */
.material-topics {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.topic-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin-bottom: 1rem;
    transition: 0.4s;
}

.topic-item:hover {
    background: rgba(255, 77, 0, 0.05);
    border-color: rgba(255, 77, 0, 0.3);
    transform: translateX(10px);
}

.topic-number {
    font-size: 1.8rem;
    font-weight: 800;
    color: #FF4D00;
    opacity: 0.5;
}

.topic-content h4 {
    margin: 0 0 0.4rem 0;
    color: #fff;
    font-size: 1.2rem;
}

.topic-content p {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}



/* Destaque para os conceitos de programação */
.highlight-topic {
    background: linear-gradient(90deg, rgba(255, 77, 0, 0.1), transparent);
    border-left: 4px solid #FF4D00;
}

.cta-material {
    margin-top: 1rem;
    padding-left: 1.2rem;
}


/* Remove a estilização padrão de link */
.topic-item-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.3s ease;
}

/* Efeito de hover no título para a setinha aparecer */
.topic-content h4 span {
    display: inline-block;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    color: #FF4D00;
}

.topic-item-link:hover .topic-content h4 span {
    opacity: 1;
    transform: translateX(5px);
}

/* Melhora o feedback visual no card inteiro */
.topic-item-link:hover .topic-item {
    background: rgba(255, 77, 0, 0.08);
    border-color: rgba(255, 77, 0, 0.4);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}











/* Container da Apostila */
.apostila-container {
    max-width: 850px; /* Largura ideal para leitura de parágrafos */
    margin: 0 auto 5rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 3rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.apostila-section {
    margin-bottom: 2.5rem;
}

.apostila-section h3 {
    color: #FF4D00;
    font-size: 1.8rem;
    margin-bottom: 1.2rem;
    letter-spacing: 1px;
}

.apostila-section p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    text-align: justify;
    margin-bottom: 1.5rem;
}

/* Destaque Técnico Laranja */
.tech-highlight {
    color: #FF4D00;
    font-weight: 700;
    background: rgba(255, 77, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Imagem Centralizada na Apostila */
.material-visual-central {
    margin: 3rem 0;
    display: flex;
    justify-content: center;
}

.material-visual-central .tech-display-frame {
    max-width: 600px;
    width: 100%;
}

.caption-image {
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    text-align: center;
    padding: 8px;
    border-top: 1px solid rgba(255, 77, 0, 0.2);
}

/* Rodapé da Apostila */
.back-to-top-footer {
    display: flex;
    justify-content: center;
    margin: 4rem 0 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-scroll-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #FF4D00;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: 0.3s;
}

.btn-scroll-top i {
    font-size: 2rem;
}

.btn-scroll-top:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 0 10px rgba(255, 77, 0, 0.5));
}

.navigation-links {
    text-align: center;
    margin-top: 1rem;
}

/* Layout Split (Imagem + Texto Lado a Lado) */
.split-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 2rem 0;
}

.visual-side { flex: 1; }
.text-side { flex: 1.5; }

/* Lista Técnica */
.tech-list {
    list-style: none;
    padding-left: 1rem;
}
.tech-list li::before {
    content: "◈";
    color: #FF4D00;
    margin-right: 10px;
}

/* Grid de Especificações */
.specs-grid {
    display:block;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 20px 0;
    align-content: center;
}

.spec-box {
    background: rgba(255, 77, 0, 0.05);
    border: 1px solid rgba(255, 77, 0, 0.2);
    padding: 1.5rem;
    border-radius: 12px;
}

.spec-box h4 {
    color: #FF4D00;
    margin-top: 0;
    border-bottom: 1px solid rgba(255, 77, 0, 0.2);
    padding-bottom: 5px;
}

.spec-box ul {
    list-style: none;
    padding: 0;
    font-size: 0.9rem;
}

/* Blocos de Código */
.code-block {
    background: #010409;
    color: #d1d5da;
    padding: 1rem;
    border-radius: 8px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    border-left: 4px solid #FF4D00;
    overflow-x: auto;
}

/* Fórmula Matemática */
.formula-box {
    text-align: center;
    font-size: 1.4rem;
    margin: 1.5rem 0;
    color: #fff;
}

/* Destaques de Pinout */
.pinout-highlights {
    border-left: 3px solid #FF4D00;
    padding-left: 1rem;
    font-style: italic;
    font-size: 0.95rem;
}

/* Ajuste para listas dentro de blocos explicativos */
.topic-item-static ul.tech-list {
    margin-top: 15px;
    padding-left: 5px;
}

.topic-item-static h4 {
    color: #FF4D00;
    font-size: 1.3rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}


/* Divisor de Subseções */
.section-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 77, 0, 0.3), transparent);
    margin: 3rem 0;
}

/* Títulos das Subseções de Portas */
.topic-detail h4 {
    color: #FF4D00;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Bloco de Explicação de Código */
.code-explanation {
    background: rgba(0, 0, 0, 0.3);
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 1.5rem;
}

.code-item {
    margin-bottom: 1rem;
}

.code-item code {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
}

.code-item p {
    font-size: 0.9rem !important;
    margin: 5px 0 0 10px !important;
    color: rgba(255,255,255,0.6) !important;
}

/* Caixa de destaque para PWM e Mega */
.highlight-box, .mega-info-box {
    background: rgba(255, 77, 0, 0.05);
    padding: 1rem;
    border-left: 4px solid #FF4D00;
    border-radius: 4px;
    margin: 1rem 0;
}

.mega-info-box h5 {
    color: #FF4D00;
    margin: 0 0 5px 0;
    font-size: 1rem;
}

/* Card de Destaque do VS Code */
.vscode-highlight {
    background: rgba(0, 120, 212, 0.05) !important; /* Azul característico do VS Code */
    border-color: rgba(0, 120, 212, 0.3) !important;
}

.vscode-highlight h5 i {
    color: #0078d4 !important; /* Ícone Azul Microsoft */
}

.sub-list-tech {
    list-style: none;
    padding: 0;
    margin-top: 10px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.sub-list-tech li::before {
    content: "↪ ";
    color: #0078d4;
}

/* Box de Dica Pro */
.pro-tip-box {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(90deg, rgba(255, 77, 0, 0.15), transparent);
    border-left: 4px solid #FF4D00;
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 2rem;
}

.tip-icon {
    font-size: 2rem;
    color: #FF4D00;
    animation: glow-pulse 2s infinite;
}

.tip-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.tip-content strong {
    color: #FF4D00;
}

@keyframes glow-pulse {
    0% { filter: drop-shadow(0 0 2px rgba(255, 77, 0, 0.5)); }
    50% { filter: drop-shadow(0 0 10px rgba(255, 77, 0, 0.8)); }
    100% { filter: drop-shadow(0 0 2px rgba(255, 77, 0, 0.5)); }
}


/* Layout com Sidebar Fixa */
.content-with-sidebar {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.sidebar-nav {
    width: 250px;
    position: sticky;
    top: 100px; /* Alinhado com o header */
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-nav h4 {
    color: #FF4D00;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
}

.sidebar-nav a {
    display: block;
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.95rem;
    transition: 0.3s;
}

.sidebar-nav a:hover {
    color: #FF4D00;
    padding-left: 5px;
    transform: translateX(5px);
}

/* Blocos de Código (Exemplos Destacados) */
.code-highlight {
    background: #010409;
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 4px solid #FF4D00;
    margin: 1.5rem 0;
    font-family: 'Fira Code', 'Courier New', monospace;
    overflow-x: auto;
}

.code-highlight code {
    color: #d1d5da;
}

.comment {
    color: #6a737d;
    font-style: italic;
}

/* Tabelas Glassmorphism */
.tech-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.tech-table th {
    background: rgba(255, 77, 0, 0.1);
    color: #FF4D00;
    text-align: left;
    padding: 12px;
}

.tech-table td {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}


/* Blocos de Código e Destaques */
.code-block-wrapper {
    margin: 1.5rem 0;
    background: #010409;
    border-radius: 8px;
    border-left: 4px solid #FF4D00;
    overflow: hidden;
}

.code-title {
    display: block;
    padding: 5px 15px;
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.05);
    color: #888;
    text-transform: uppercase;
}

.code-block {
    padding: 15px;
    margin: 0;
    color: #d1d5da;
    font-family: 'Fira Code', monospace;
    line-height: 1.5;
}

.comment { color: #6a737d; }

/* Grid de Palavras Reservadas */
.keywords-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 1rem 0;
}

.keyword-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

.keyword-item code { color: #FF4D00; display: block; margin-bottom: 3px; }
.keyword-item span { font-size: 0.7rem; color: #666; }


/* Card de Destaque de Projeto */
.project-card-highlight {
    margin: 3.5rem auto;
    max-width: 550px;
    background: rgba(255, 77, 0, 0.05);
    border: 1px solid rgba(255, 77, 0, 0.2);
    border-radius: 15px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    position: relative;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.project-card-highlight:hover {
    transform: translateY(-5px);
    border-color: #FF4D00;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Selo de Identificação (PROJETO XX) */
.project-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #FF4D00;
    color: #fff;
    padding: 5px 25px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(255, 77, 0, 0.4);
}

.project-card-highlight h4 {
    margin-top: 0.5rem;
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.project-card-highlight p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Botão do Projeto */
.btn-project {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 2px solid #FF4D00;
    color: #FF4D00;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-project:hover {
    background: #FF4D00;
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 77, 0, 0.4);
}

.btn-project i {
    transition: transform 0.3s ease;
}

.btn-project:hover i {
    transform: translateX(5px);
}


/* Menu de Filtro Sticky */
.component-filter {
    position: sticky;
    top: 80px; /* Logo abaixo do header principal */
    background: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(15px);
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 15px;
    z-index: 100;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 77, 0, 0.2);
}

.component-filter a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 15px;
    border-radius: 5px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.component-filter a:hover {
    background: rgba(255, 77, 0, 0.1);
    color: #FF4D00;
}

/* Divisores de Categoria */
.category-divider {
    margin: 4rem 0 2rem;
    display: flex;
    align-items: center;
}

.category-divider span {
    background: #FF4D00;
    color: #fff;
    padding: 5px 20px;
    font-weight: 800;
    border-radius: 50px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.category-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #FF4D00, transparent);
    margin-left: 15px;
}

/* Redução sutil dos cards para caberem 30 */
.component-card {
    padding: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Resolve o problema da âncora ficando atrás do menu */
.component-card, 
.category-divider {
    scroll-margin-top: 140px; /* Ajuste este valor conforme a altura do seu menu */
}


/* Ajuste universal para âncoras não ficarem escondidas sob o header */
.apostila-section, 
.component-card, 
.category-divider {
    /* O valor deve ser a soma da altura do seu header + um respiro (ex: 20px) */
    scroll-margin-top: 120px; 
}

/* Caso você use IDs diretamente em títulos H3 ou outros elementos */
[id] {
    scroll-margin-top: 120px;
}


/* Estilo do Botão de Download */
.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #FF4D00; /* Laranja EuderTech */
    color: #ffffff !important;
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border: 2px solid #FF4D00;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 77, 0, 0.2);
}

/* Estilo específico do ícone dentro do botão */
.btn-download i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

/* Efeito de Hover (Passar o Mouse) */
.btn-download:hover {
    background-color: transparent;
    color: #FF4D00 !important;
    box-shadow: 0 6px 20px rgba(255, 77, 0, 0.4);
    transform: translateY(-2px); /* Botão sobe levemente */
}

/* Animação da seta "quicando" para baixo no hover */
.btn-download:hover i {
    animation: bounceDownload 0.8s infinite;
}

/* Keyframes para a animação do ícone */
@keyframes bounceDownload {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(5px); /* A seta desce 5px */
    }
}




/* Container para centralizar os elementos do simulador */
.simulator-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    text-align: center;
}

/* Estilo do Botão do Simulador */
.btn-simulator {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #00a8e1; /* Azul Tinkercad */
    color: #ffffff !important;
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 2px solid #00a8e1;
    box-shadow: 0 4px 15px rgba(0, 168, 225, 0.3);
}

/* Efeito ao passar o mouse */
.btn-simulator:hover {
    background-color: transparent;
    color: #00a8e1 !important;
    box-shadow: 0 6px 25px rgba(0, 168, 225, 0.5);
    transform: scale(1.05); /* Aumenta levemente */
}

/* Animação do ícone de link externo */
.btn-simulator i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.btn-simulator:hover i {
    transform: rotate(15deg) scale(1.2);
}


/* Estilos para a Galeria do Projeto 10 */
.project-series-item {
    padding: 60px 0;
    border-bottom: 1px solid rgba(255, 77, 0, 0.1);
    transition: all 0.3s ease;
}

/* Cor para Projetos ÍMPARES (1, 3, 5, 7) */
.project-series-item.odd {
    background-color: transparent;
}

/* Cor para Projetos PARES (2, 4, 6) */
.project-series-item.even {
    background-color: rgba(255, 77, 0, 0.03); /* Um tom bem sutil de laranja/escuro */
}

.project-series-item h2 {
    color: #FF4D00;
    font-size: 2rem;
    margin-bottom: 15px;
}

.project-display-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 30px 0;
}

.calculation-box {
    width: 100%;
    box-sizing: border-box; /* Garante que o padding não aumente a largura */
    overflow: hidden;       /* Evita que qualquer conteúdo "vaze" */
    margin-bottom: 2rem;
}






/* ===== Responsividade ===== */
/* ---- iPhone 12 e smartphones até tablets pequenos ---- */
@media screen and (max-width: 768px) {
/* ----- CABEÇALHO ----- */
  html, body {
    height: auto;       /* permite que a página cresça conforme o conteúdo */
    min-height: 100%;   /* garante pelo menos o tamanho da tela */
    overflow-x: hidden; /* evita scroll horizontal */
  }
  

  .site-header {
    margin: 0;
    padding: 0.5rem;
  }

  .nav {
    padding: 0.5rem;
  }

  /* ----- HERO SECTION ----- */
  .hero {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
    background: url("../imagens/logo/logo_ofc.png") center center no-repeat;
    background-size: contain;
    background-attachment: scroll;
    background-color: rgba(5, 28, 93, 0.9); /* fundo do site */
  }


  /* Overlay escura sobre a imagem */
    .hero::before {    
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* 0.5 = 50% de escurecimento */
    z-index: 1;        
    }  

    .hero .overlay {
    display: none;        
    }


  .hero-content {       
    position: absolute;         /* posiciona no centro da hero */
    top: 60%;
    left:50%;
    transform: translate(-50%, -50%); /* centraliza perfeitamente */
    z-index: 10;               /* fica acima do overlay */
    max-width: 800px;
    width: 90%;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);  
    text-align: center;         /* garante centralização do conteúdo */    
   }

   .hero-content h1 {   
   margin: 0;
   font-size: 1.8rem;
   line-height: 1.4;
   font-weight: 600;
   text-shadow: 0 0 10px rgba(0,0,0,0.6);
   text-align: center;         /* reforça centralização do texto */
   }

  .hero-content .subtitle { font-size: 18px; }
  .hero-content .subtitleRE { font-size: 15px; }

  .hero-content2 {       
    position: absolute;         /* posiciona no centro da hero */
    top: 76%;
    left:40%;
    transform: translate(-50%, -50%); /* centraliza perfeitamente */
    z-index: 11;               /* fica acima do overlay */      
    padding: 20px;    
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);  
    text-align: center;         /* garante centralização do conteúdo */  
    font-size: 0.6rem;  
   }

  .hero-content3 {       
    position: absolute;         /* posiciona no centro da hero */
    top: 79%;
    left:30%;
    transform: translate(-50%, -50%); /* centraliza perfeitamente */
    z-index: 11;               /* fica acima do overlay */      
    padding: 20px;    
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);  
    text-align: center;         /* garante centralização do conteúdo */  
    font-size: 0.6rem;  
   }

   .hero-content4 {       
    position: absolute;         /* posiciona no centro da hero */
    top: 82%;
    left:42%;
    transform: translate(-50%, -50%); /* centraliza perfeitamente */
    z-index: 11;               /* fica acima do overlay */      
    padding: 20px;    
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);  
    text-align: center;         /* garante centralização do conteúdo */  
    font-size: 0.6rem;  
   }


  .hero-img {
    top: -60px;
    opacity: 0.6;
  }


  .robot-showcase-container {
    gap: 2rem;
    margin: 3rem auto;
  }
  .robot-frame {
    max-width: 100%; /* No celular, a foto ocupa a largura total disponível */
  }


  /* ----- PARALLAX ----- */
  /* Desativa o parallax no mobile */
  .parallax {
        display: flex;
        flex-direction: column;   /* Garante empilhamento se houver mais itens */
        justify-content: center;  /* Centraliza horizontalmente */
        align-items: center;      /* Centraliza verticalmente */
        
        min-height: 380px;        /* Altura mínima para a imagem aparecer bem */
        padding: 20px;            /* Respiro lateral para o conteúdo não colar na borda */
        box-sizing: border-box;   /* Evita que o padding 'estoure' a largura */
        
        background-image: url("../imagens/iarobotica/iaroboticamobile.png") !important;
        background-attachment: scroll !important; /* Mobile não processa bem o 'fixed' */
        background-position: center center !important;
        background-size: cover !important;
    }
   
  .parallax-bg {    
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    will-change: transform; /* otimiza animação */
  }  

  /* Overlay (remove escurecimento) */
    .parallax-overlay {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.2); /* Um leve escurecimento ajuda na leitura se a imagem for clara */
        z-index: 2;
    }

/* Ajuste do Bloco de Vidro (Conteúdo) */
    .parallax-content {
        width: 100%;              /* Ocupa a largura disponível (limitado pelo padding do pai) */
        max-width: 400px;         /* Impede que fique largo demais em celulares grandes */
        margin: 0 auto;           /* Reforço de centralização */
        
        /* Glassmorphism */
        background: rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 1.5rem;
        
        padding: 2.5rem 1.5rem;   /* Espaço interno para o texto 'respirar' */
        box-sizing: border-box;
    }

    /* Tipografia Mobile */
    .parallax-content h2 {
        font-size: 1.2rem;        /* Tamanho ideal para leitura em 1 coluna */
        line-height: 1.4;
        margin: 0;
        text-align: center;
    }

  .parallax-glass {
    padding: 2rem 1rem;
  }

  .parallax-content p {
    font-size: 1.2rem;
  }

  /* ----- MENU RESPONSIVO ----- */
  .menu-toggle,
  #menu-toggle {
    display: block;
    cursor: pointer;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    gap: 0;
    background: rgba(24, 23, 23, 0.95);
    padding: 1rem;
    border-radius: 0 0 0 12px;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links a {
    color: #fff;
    text-decoration: none;
    width: 100%;
  }

  .nav-links a:hover {
    text-decoration: underline;
  }

  .nav-links li {
    margin-bottom: 1rem;
  }
  .about p{
    font-size: 1.1rem;
  }
    .site-footer {
        padding: 15px 10px;   /* reduz padding */
        font-size: 12px;      /* diminui tamanho da fonte */
    }

    .site-footer p {
        line-height: 1.4;     /* aumenta legibilidade */
        word-wrap: break-word; /* evita que o texto ultrapasse a tela */
    }  

      /* fundo da trilha (trilho da barra) */
/* largura da barra */
::-webkit-scrollbar {
    width: 12px;
  }

  ::-webkit-scrollbar-track {
    background: #0b0b0b;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(247, 0, 0, 0.4); /* vermelho translúcido */
    border-radius: 6px;
    border: 2px solid #0b0b0b;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 0, 0, 0.8); /* vermelho mais vivo */
  }

  /* compatibilidade com Firefox */
  html, body {
    scrollbar-color: rgba(247, 0, 0, 0.4) #0b0b0b;
    scrollbar-width: thin;
  }


    .tools-grid {
        gap: 1rem;
    }
    .tool-item {
        padding: 1rem 1.5rem;
        flex-grow: 1; /* Faz os itens ocuparem o espaço disponível */
        max-width: 150px; /* Limita a largura no mobile */
    }
    .tool-item img {
        max-width: 80px; /* Logos menores no celular */
    }

    .apostila-container {
        padding: 1.5rem;
        margin: 1rem;
    }
    .apostila-section p {
        text-align: left;
        font-size: 1.05rem;
    }

 
    .split-content, .specs-grid {
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    
  .section-header h3 {
        padding-left: 20px;  /* Pequeno afastamento da borda esquerda */
        padding-right: 20px; /* Recomendado adicionar na direita também para equilíbrio */
        
        /* Garante que o padding não empurre o elemento para fora da tela */
        box-sizing: border-box; 
        
        /* Alinhamento opcional: se quiser manter o texto à esquerda com o respiro */
        text-align: left; 
  }  
  /* Caso queira que o parágrafo tenha um respiro extra ou diferente */
  .section-header p {
        margin-top: 10px;
        padding-left: 20px;  /* Pequeno afastamento da borda esquerda */
        max-width: 90%; /* Evita que o texto ocupe a largura total e fique denso */
  }

  .stem-section {
        padding: 60px 20px; /* Respiro nas laterais e espaçamento vertical */
        box-sizing: border-box;
    }

    .stem-grid {
        display: grid; 
        grid-template-columns: 1fr;
        gap: 40px;          /* Espaço generoso entre o texto e os badges */
        text-align: center;
    }

    .stem-text h2 {
        font-size: 1.8rem;
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .stem-text p {
        font-size: 1.1rem;
        line-height: 1.6;
        color: #f9f8f8;       /* Cor suave para não cansar a vista */
    }

    /* Ajuste fino dos badges */
    .tech-capabilities {
        display: flex;
        flex-wrap: wrap;    /* Permite que os badges quebrem linha sozinhos */
        justify-content: center;
        gap: 12px;          /* Espaço entre os badges */
    }

    .tech-badge {
        background: rgba(255, 120, 0, 0.08); /* Tom suave do seu gradiente laranja */
        border: 1px solid rgba(255, 120, 0, 0.2);
        color: #d35400;     /* Texto em tom terracota/laranja técnico */
        padding: 10px 18px;
        border-radius: 50px; /* Formato de pílula moderno */
        font-size: 0.9rem;
        font-weight: 600;
        transition: transform 0.2s;
    }


    .material-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem; /* Reduzi um pouco o gap para ganhar espaço */
        margin-bottom: 4rem;
    }

    .material-visual {
        order: -1; /* Mantém a imagem no topo */
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .material-visual .tech-display-frame {
        width: 100% !important; /* Força ocupar a largura total do grid */
        max-width: 100%;
        transform: rotate(0deg); /* Remove a inclinação no celular para não "comer" bordas */
        margin: 0 auto;
    }

    .material-visual .tech-display-frame img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover; /* Garante que a imagem preencha o quadro sem distorcer */
        border-radius: 8px;
    }

    .topic-item {
        padding: 1rem; /* Diminui levemente o padding interno no celular */
    }

    .topic-number {
        font-size: 1.5rem; /* Ajuste no tamanho do número para telas menores */
    }

    .page-title-area h1 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

    .page-title-area h1 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* 1. Muda de "lado a lado" para "empilhado" */
    .content-with-sidebar {
        flex-direction: column;
        gap: 1rem;
    }

    /* 2. Faz a sidebar ocupar a largura total e para de "flutuar" */
    .sidebar-nav {
        width: 100% !important;
        position: relative !important; /* Desativa o sticky no celular */
        top: 0 !important;
        padding: 1rem;
        box-sizing: border-box;
    }

    /* 3. Organiza os links em 2 colunas para economizar espaço vertical */
    .sidebar-nav ul {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 8px;
    }

    .sidebar-nav a {
        background: rgba(255, 255, 255, 0.05);
        padding: 12px 8px;
        border-radius: 8px;
        font-size: 0.85rem;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 4. Garante que o conteúdo ocupe 100% da largura */
    .apostila-container {
        width: 100%;
        padding: 0;
        margin: 0;
    }  

    .component-filter {
        flex-wrap: wrap; /* Permite que os itens pulem para a linha de baixo */
        justify-content: center;
        gap: 10px;
    }

    .component-filter a {
        width: calc(50% - 10px); /* Coloca dois botões por linha */
        justify-content: center;
        font-size: 0.8rem;
    }


    .calculation-box {
        padding: 15px !important; /* Reduz um pouco o respiro interno no celular */
    }

    /* Força o layout a virar uma coluna única */
    .calculation-box .material-layout {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
    }

    .calculation-box .text-side, 
    .calculation-box .code-result {
        width: 100%;
    }

    /* Impede que o bloco de código quebre o layout */
    .calculation-box .code-block {
        white-space: pre-wrap;       /* Quebra a linha se o texto for muito longo */
        word-wrap: break-word;
        font-size: 0.85rem;          /* Diminui um pouco a fonte no celular */
        padding: 12px;
        overflow-x: auto;            /* Adiciona scroll lateral se necessário */
    }
    
    .calculation-box h4 {
        font-size: 1.1rem;
        line-height: 1.3;
    }


}


/* ----- Ajustes específicos para celular deitado ----- */
@media screen and (max-width: 900px) and (orientation: landscape) {

  .hero {
    min-height: 100vh; /* evita corte da imagem */
    background-size: cover; /* cobre melhor a tela */
  }

  /* Ajuste de posição para não sobrepor */
  .hero-content {
    top: 45%; /* sobe um pouco */
    font-size: 1rem;
  }

  
  .hero-content2 {
    top: 63%;
    left: 61%;
    font-size: 0.7rem;
  }

  .hero-content3 {
    top: 70%;
    left: 55%;
    font-size: 0.7rem;
  }

  .hero-content4 {
    top: 78%;
    left: 62%;
    font-size: 0.7rem;
  }

  /* Dica: reduzir espaçamento entre eles */
  .hero-content2,
  .hero-content3,
  .hero-content4 {
    padding: 10px;
  }
    .social-label {
        font-size: 1.1rem;
    }
    .social-btn, .social-item {
        font-size: 2rem;
    }

    .material-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .material-visual {
        order: -1; /* Imagem sempre no topo no celular */
    }

    .project-display-grid {
        grid-template-columns: 1fr;
    }

      .section-header h3 {
        padding-left: 20px;  /* Pequeno afastamento da borda esquerda */
        padding-right: 20px; /* Recomendado adicionar na direita também para equilíbrio */
        
        /* Garante que o padding não empurre o elemento para fora da tela */
        box-sizing: border-box; 
        
        /* Alinhamento opcional: se quiser manter o texto à esquerda com o respiro */
        text-align: left; 
      }  
      /* Caso queira que o parágrafo tenha um respiro extra ou diferente */
      .section-header p {
            margin-top: 10px;
            padding-left: 20px;  /* Pequeno afastamento da borda esquerda */
            max-width: 90%; /* Evita que o texto ocupe a largura total e fique denso */
      }

.stem-section {
        padding: 60px 20px; /* Respiro nas laterais e espaçamento vertical */
        box-sizing: border-box;
    }

    .stem-grid {
        display: grid; 
        grid-template-columns: 1fr;
        gap: 40px;          /* Espaço generoso entre o texto e os badges */
        text-align: center;
    }

    .stem-text h2 {
        font-size: 1.8rem;
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .stem-text p {
        font-size: 1.1rem;
        line-height: 1.6;
        color: #f9f8f8;       /* Cor suave para não cansar a vista */
    }

    /* Ajuste fino dos badges */
    .tech-capabilities {
        display: flex;
        flex-wrap: wrap;    /* Permite que os badges quebrem linha sozinhos */
        justify-content: center;
        gap: 12px;          /* Espaço entre os badges */
    }

    .tech-badge {
        background: rgba(255, 120, 0, 0.08); /* Tom suave do seu gradiente laranja */
        border: 1px solid rgba(255, 120, 0, 0.2);
        color: #d35400;     /* Texto em tom terracota/laranja técnico */
        padding: 10px 18px;
        border-radius: 50px; /* Formato de pílula moderno */
        font-size: 0.9rem;
        font-weight: 600;
        transition: transform 0.2s;
    }


    .material-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem; /* Reduzi um pouco o gap para ganhar espaço */
        margin-bottom: 4rem;
    }

    .material-visual {
        order: -1; /* Mantém a imagem no topo */
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .material-visual .tech-display-frame {
        width: 100% !important; /* Força ocupar a largura total do grid */
        max-width: 100%;
        transform: rotate(0deg); /* Remove a inclinação no celular para não "comer" bordas */
        margin: 0 auto;
    }

    .material-visual .tech-display-frame img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover; /* Garante que a imagem preencha o quadro sem distorcer */
        border-radius: 8px;
    }

    .topic-item {
        padding: 1rem; /* Diminui levemente o padding interno no celular */
    }

    .topic-number {
        font-size: 1.5rem; /* Ajuste no tamanho do número para telas menores */
    }

    .page-title-area h1 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}  



  /* 1. Muda de "lado a lado" para "empilhado" */
    .content-with-sidebar {
        flex-direction: column;
        gap: 1rem;
    }

    /* 2. Faz a sidebar ocupar a largura total e para de "flutuar" */
    .sidebar-nav {
        width: 100% !important;
        position: relative !important; /* Desativa o sticky no celular */
        top: 0 !important;
        padding: 1rem;
        box-sizing: border-box;
    }

    /* 3. Organiza os links em 2 colunas para economizar espaço vertical */
    .sidebar-nav ul {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 8px;
    }

    .sidebar-nav a {
        background: rgba(255, 255, 255, 0.05);
        padding: 12px 8px;
        border-radius: 8px;
        font-size: 0.85rem;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 4. Garante que o conteúdo ocupe 100% da largura */
    .apostila-container {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .component-filter {
        flex-wrap: wrap; /* Permite que os itens pulem para a linha de baixo */
        justify-content: center;
        gap: 10px;
    }

    .component-filter a {
        width: calc(50% - 10px); /* Coloca dois botões por linha */
        justify-content: center;
        font-size: 0.8rem;
    }


    .calculation-box {
        padding: 15px !important; /* Reduz um pouco o respiro interno no celular */
    }

    /* Força o layout a virar uma coluna única */
    .calculation-box .material-layout {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
    }

    .calculation-box .text-side, 
    .calculation-box .code-result {
        width: 100%;
    }

    /* Impede que o bloco de código quebre o layout */
    .calculation-box .code-block {
        white-space: pre-wrap;       /* Quebra a linha se o texto for muito longo */
        word-wrap: break-word;
        font-size: 0.85rem;          /* Diminui um pouco a fonte no celular */
        padding: 12px;
        overflow-x: auto;            /* Adiciona scroll lateral se necessário */
    }
    
    .calculation-box h4 {
        font-size: 1.1rem;
        line-height: 1.3;
    }


}





    



/* Tablets (769px até 1024px) */
@media (min-width: 769px) and (max-width: 1023px) {
  body { font-size: 17px; }
  .site-header {
    margin: 0;
    padding: 0.5rem;
  }

  .nav {
    padding: 0.5rem;
  }

  /* ----- HERO SECTION ----- */
  .hero {    
    position: relative;
    width: 100%;
    height: 100vh;    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    overflow: hidden;    
    background: url("../imagens/logo/logo_ofc.png") center/cover fixed;        
  }


  /* Overlay escura sobre a imagem */
    .hero::before {    
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* 0.5 = 50% de escurecimento */
    z-index: 1;        
    }  

    .hero .overlay {
    display: none;        
    }


  .hero-content {       
    position: absolute;         /* posiciona no centro da hero */
    top: 60%;
    left:50%;
    transform: translate(-50%, -50%); /* centraliza perfeitamente */
    z-index: 10;               /* fica acima do overlay */
    max-width: 800px;
    width: 90%;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);  
    text-align: center;         /* garante centralização do conteúdo */    
   }

   .hero-content h1 {   
   margin: 0;
   font-size: 1.4rem;
   line-height: 1.4;
   font-weight: 600;
   text-shadow: 0 0 10px rgba(0,0,0,0.6);
   text-align: center;         /* reforça centralização do texto */
   }

  .hero-img {
    top: -60px;
    opacity: 0.6;
  }

  /* ----- PARALLAX ----- */
  .parallax {
    background-attachment: scroll;
    height: 50vh;
  }
   
   .parallax-content {
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
    line-height: 1.4;
    font-weight: 600;
    text-align: center;
    background: rgba(255, 255, 255, 0.12); /* leve efeito vidro */
    backdrop-filter: blur(8px);
    border-radius: 1rem;
  }

  .parallax-glass {
    padding: 2rem 1rem;
  }

  .parallax-content h2 {
    font-size: 1.4rem;
  }

  .parallax-content p {
    font-size: 1.2rem;
  }



  .video-section {
  background: linear-gradient(180deg, #050b20, #071028);
  padding: 4rem 1rem;
  text-align: center;
  color: #e6eef6;
}

.video-container {
  max-width: 900px;
  margin: 0 auto;
}

.video-container h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #00bcd4;
  text-shadow: 0 0 8px rgba(0,188,212,0.4);
}

.video-container video {
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
  outline: none;
  background: #000;
}


  /* ----- MENU RESPONSIVO ----- */
  .menu-toggle,
  #menu-toggle {
    display: block;
    cursor: pointer;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    gap: 0;
    background: rgba(24, 23, 23, 0.95);
    padding: 1rem;
    border-radius: 0 0 0 12px;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links a {
    color: #fff;
    text-decoration: none;
    width: 100%;
  }

  .nav-links a:hover {
    text-decoration: underline;
  }

  .nav-links li {
    margin-bottom: 1rem;
  }
  .about p{
    font-size: 1.1rem;
  }
    .site-footer {
        padding: 15px 10px;   /* reduz padding */
        font-size: 12px;      /* diminui tamanho da fonte */
    }

    .site-footer p {
        line-height: 1.4;     /* aumenta legibilidade */
        word-wrap: break-word; /* evita que o texto ultrapasse a tela */
    }

 
.stem-section {
        padding: 60px 20px; /* Respiro nas laterais e espaçamento vertical */
        box-sizing: border-box;
    }

    .stem-grid {
        display: grid; 
        grid-template-columns: 1fr;
        gap: 40px;          /* Espaço generoso entre o texto e os badges */
        text-align: center;
    }

    .stem-text h2 {
        font-size: 1.8rem;
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .stem-text p {
        font-size: 1.1rem;
        line-height: 1.6;
        color: #f9f8f8;       /* Cor suave para não cansar a vista */
    }

    /* Ajuste fino dos badges */
    .tech-capabilities {
        display: flex;
        flex-wrap: wrap;    /* Permite que os badges quebrem linha sozinhos */
        justify-content: center;
        gap: 12px;          /* Espaço entre os badges */
    }

    .tech-badge {
        background: rgba(255, 120, 0, 0.08); /* Tom suave do seu gradiente laranja */
        border: 1px solid rgba(255, 120, 0, 0.2);
        color: #d35400;     /* Texto em tom terracota/laranja técnico */
        padding: 10px 18px;
        border-radius: 50px; /* Formato de pílula moderno */
        font-size: 0.9rem;
        font-weight: 600;
        transition: transform 0.2s;
    }

    .material-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem; /* Reduzi um pouco o gap para ganhar espaço */
        margin-bottom: 4rem;
    }

    .material-visual {
        order: -1; /* Mantém a imagem no topo */
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .material-visual .tech-display-frame {
        width: 100% !important; /* Força ocupar a largura total do grid */
        max-width: 100%;
        transform: rotate(0deg); /* Remove a inclinação no celular para não "comer" bordas */
        margin: 0 auto;
    }

    .material-visual .tech-display-frame img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover; /* Garante que a imagem preencha o quadro sem distorcer */
        border-radius: 8px;
    }

    .topic-item {
        padding: 1rem; /* Diminui levemente o padding interno no celular */
    }

    .topic-number {
        font-size: 1.5rem; /* Ajuste no tamanho do número para telas menores */
    }

    /* 1. Muda de "lado a lado" para "empilhado" */
    .content-with-sidebar {
        flex-direction: column;
        gap: 1rem;
    }

    /* 2. Faz a sidebar ocupar a largura total e para de "flutuar" */
    .sidebar-nav {
        width: 100% !important;
        position: relative !important; /* Desativa o sticky no celular */
        top: 0 !important;
        padding: 1rem;
        box-sizing: border-box;
    }

    /* 3. Organiza os links em 2 colunas para economizar espaço vertical */
    .sidebar-nav ul {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 8px;
    }

    .sidebar-nav a {
        background: rgba(255, 255, 255, 0.05);
        padding: 12px 8px;
        border-radius: 8px;
        font-size: 0.85rem;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 4. Garante que o conteúdo ocupe 100% da largura */
    .apostila-container {
        width: 100%;
        padding: 0;
        margin: 0;
    }  
    .component-filter {
        flex-wrap: wrap; /* Permite que os itens pulem para a linha de baixo */
        justify-content: center;
        gap: 10px;
    }

    .component-filter a {
        width: calc(50% - 10px); /* Coloca dois botões por linha */
        justify-content: center;
        font-size: 0.8rem;
    }


    .calculation-box {
        padding: 15px !important; /* Reduz um pouco o respiro interno no celular */
    }

    /* Força o layout a virar uma coluna única */
    .calculation-box .material-layout {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
    }

    .calculation-box .text-side, 
    .calculation-box .code-result {
        width: 100%;
    }

    /* Impede que o bloco de código quebre o layout */
    .calculation-box .code-block {
        white-space: pre-wrap;       /* Quebra a linha se o texto for muito longo */
        word-wrap: break-word;
        font-size: 0.85rem;          /* Diminui um pouco a fonte no celular */
        padding: 12px;
        overflow-x: auto;            /* Adiciona scroll lateral se necessário */
    }
    
    .calculation-box h4 {
        font-size: 1.1rem;
        line-height: 1.3;
    }

}


/* Laptops e desktops médios (1024px até 1440px) */
@media (min-width: 1024px) and (max-width: 1440px) {
  body { font-size: 18px; }

  html, body {
    height: auto;       /* permite que a página cresça conforme o conteúdo */
    min-height: 100%;   /* garante pelo menos o tamanho da tela */
    overflow-x: hidden; /* evita scroll horizontal */
  }  


  .site-header {
    margin: 0;
    padding: 0.5rem;
  }

  .nav {
    padding: 0.5rem;
  }

  /* ----- HERO SECTION ----- */
  .hero {    
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: url("../imagens/logo/logo_ofc.png") center center no-repeat;
  background-size: contain !important; /* evita corte */
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: scroll;
  background-color: rgba(5, 28, 93, 0.9);        
  }


  /* Overlay escura sobre a imagem */
    .hero::before {    
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* 0.5 = 50% de escurecimento */
    z-index: 1;        
    }  

    .hero .overlay {
    display: none;        
    }


  .hero-content {       
    position: absolute;         /* posiciona no centro da hero */
    top: 60%;
    left:50%;
    transform: translate(-50%, -50%); /* centraliza perfeitamente */
    z-index: 10;               /* fica acima do overlay */
    max-width: 800px;
    width: 90%;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);  
    text-align: center;         /* garante centralização do conteúdo */    
   }

   .hero-content h1 {   
   margin: 0;
   font-size: 3.5rem;
   line-height: 1.4;
   font-weight: 600;
   text-shadow: 0 0 10px rgba(0,0,0,0.6);
   text-align: center;         /* reforça centralização do texto */
   }

  .hero-img {
    top: -60px;
    opacity: 0.6;
  }

  /* ----- PARALLAX ----- */
  .parallax {
    background-attachment: scroll;
    height: 50vh;
  }
   
   .parallax-content {
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
    line-height: 1.4;
    font-weight: 600;
    text-align: center;
    background: rgba(255, 255, 255, 0.12); /* leve efeito vidro */
    backdrop-filter: blur(8px);
    border-radius: 1rem;
  }

  .parallax-glass {
    padding: 2rem 1rem;
  }

  .parallax-content h2 {
    font-size: 2.4rem;
  }

  .parallax-content p {
    font-size: 2.1rem;
  }

  /* ----- MENU RESPONSIVO ----- */
  .menu-toggle,
  #menu-toggle {
    display: block;
    cursor: pointer;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    gap: 0;
    background: rgba(24, 23, 23, 0.95);
    padding: 1rem;
    border-radius: 0 0 0 12px;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links a {
    color: #fff;
    text-decoration: none;
    width: 100%;
  }

  .nav-links a:hover {
    text-decoration: underline;
  }

  .nav-links li {
    margin-bottom: 1rem;
  }
  .about p{
    font-size: 2.1rem;
  }
    .site-footer {
        padding: 20px 40px;   /* reduz padding */
        font-size: 17px;      /* diminui tamanho da fonte */
        text-align: center;
    }

    .site-footer p {
        line-height: 1.4;     /* aumenta legibilidade */
        word-wrap: break-word; /* evita que o texto ultrapasse a tela */
    }

    .page-title-area h1 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

  /* 1. Muda de "lado a lado" para "empilhado" */
    .content-with-sidebar {
        flex-direction: column;
        gap: 1rem;
    }

    /* 2. Faz a sidebar ocupar a largura total e para de "flutuar" */
    .sidebar-nav {
        width: 100% !important;
        position: relative !important; /* Desativa o sticky no celular */
        top: 0 !important;
        padding: 1rem;
        box-sizing: border-box;
    }

    /* 3. Organiza os links em 2 colunas para economizar espaço vertical */
    .sidebar-nav ul {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 8px;
    }

    .sidebar-nav a {
        background: rgba(255, 255, 255, 0.05);
        padding: 12px 8px;
        border-radius: 8px;
        font-size: 0.85rem;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 4. Garante que o conteúdo ocupe 100% da largura */
    .apostila-container {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .component-filter {
        flex-wrap: wrap; /* Permite que os itens pulem para a linha de baixo */
        justify-content: center;
        gap: 10px;
    }

    .component-filter a {
        width: calc(50% - 10px); /* Coloca dois botões por linha */
        justify-content: center;
        font-size: 0.8rem;
    }


    .calculation-box {
        padding: 15px !important; /* Reduz um pouco o respiro interno no celular */
    }

    /* Força o layout a virar uma coluna única */
    .calculation-box .material-layout {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
    }

    .calculation-box .text-side, 
    .calculation-box .code-result {
        width: 100%;
    }

    /* Impede que o bloco de código quebre o layout */
    .calculation-box .code-block {
        white-space: pre-wrap;       /* Quebra a linha se o texto for muito longo */
        word-wrap: break-word;
        font-size: 0.85rem;          /* Diminui um pouco a fonte no celular */
        padding: 12px;
        overflow-x: auto;            /* Adiciona scroll lateral se necessário */
    }
    
    .calculation-box h4 {
        font-size: 1.1rem;
        line-height: 1.3;
    }

}