/* =========================
   VARIÁVEIS
========================= */

:root{
  --bg:#0B1020;
  --surface:#12182C;
  --surface2:#18213A;
  --border:#293554;

  --text:#EDF2FF;
  --muted:#9FB3D1;

  --blue:#58A6FF;
  --green:#6EE7B7;
  --yellow:#F7C948;
  --red:#FF7B72;
}

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

html{
  scroll-behavior:smooth;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Segoe UI,sans-serif;
  line-height:1.7;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

ul{
  list-style:none;
}

/* =========================
   NAVBAR
========================= */

.navbar{
  width:100%;
  max-width:1200px;
  margin:auto;
  padding:28px 24px;

  display:flex;
  justify-content:space-between;
  align-items:center;
}

.navbar h2{
  color:var(--blue);
  letter-spacing:2px;
}

.navbar ul{
  display:flex;
  gap:24px;
}

.navbar a{
  color:var(--muted);
  transition:.3s;
}

.navbar a:hover{
  color:white;
}

/* =========================
   HERO
========================= */

.hero{
  min-height:100vh;
}

.hero-content{

  max-width:1200px;
  margin:auto;
  padding:40px 24px 80px;

  display:grid;
  grid-template-columns:320px 1fr;
  align-items:center;
  gap:60px;

}

/* PIXEL ART PRINCIPAL */

.pixel-hero{
  display:flex;
  justify-content:center;
  align-items:center;
}

.main-pixel{
  width:100%;
  max-width:260px;      /* ALTERADO */
  filter:drop-shadow(0 0 25px rgba(88,166,255,.25));
}

/* TERMINAL */

.terminal{

  background:#0D1324;
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  margin-bottom:24px;

  font-family:monospace;

}

.terminal-header{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}

.red,.yellow,.green{

  width:12px;
  height:12px;
  border-radius:50%;

}

.red{background:#FF5F56;}
.yellow{background:#FFBD2E;}
.green{background:#27C93F;}

.typing{

  border-right:2px solid var(--green);
  white-space:nowrap;
  overflow:hidden;
  width:fit-content;

  animation:typing 3s steps(22), blink .8s infinite;

}

@keyframes typing{
  from{width:0}
  to{width:100%}
}

@keyframes blink{
  50%{border-color:transparent}
}

.status{
  color:var(--green);
  font-weight:700;
  font-size:14px;
}

.hero h1{
  font-size:56px;
  line-height:1.1;
  margin:14px 0;
}

.hero h2{
  color:var(--blue);
  margin-bottom:18px;
}

.hero p{
  color:var(--muted);
}

.buttons{

  display:flex;
  gap:14px;
  margin-top:28px;
  flex-wrap:wrap;

}

.btn{

  padding:13px 22px;
  border-radius:12px;
  border:1px solid var(--border);

  transition:.3s;

}

.btn:hover{
  transform:translateY(-3px);
}

.primary{

  background:var(--blue);
  color:white;
  border:none;

}

/* =========================
   GERAL
========================= */

.section{

  max-width:1100px;
  margin:auto;
  padding:90px 24px;

}

.section h2{

  font-size:38px;
  margin-bottom:14px;

}

.subtitle{
  color:var(--muted);
}

/* =========================
   TRAJETÓRIA
========================= */

.journey{

  margin-top:50px;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;

}

.step{

  width:100%;
  max-width:650px;

  background:var(--surface);

  border:1px solid var(--border);
  border-radius:18px;

  padding:24px;

  text-align:center;

}

.highlight{
  border-color:var(--yellow);
}

.arrow{
  font-size:26px;
  color:var(--blue);
}

/* TAMANHO DOS ÍCONES */

.step img{
  width:48px;
  margin:auto auto 16px;
}

.split{

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;

  width:100%;
  max-width:760px;

}

.target{

  background:var(--surface);
  border-radius:16px;
  padding:24px;
  text-align:center;

}

.target img{
  width:44px;
  margin:auto auto 14px;
}

/* =========================
   COMPARAÇÃO
========================= */

.columns{

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;

  margin-top:40px;

}

.card{

  background:var(--surface);
  border-radius:18px;
  border:1px solid var(--border);

  padding:24px;

}

.card-header{

  display:flex;
  align-items:center;
  gap:14px;

  margin-bottom:20px;

}

.card-header img{
  width:42px;
}

.card li{

  margin-bottom:12px;
  color:var(--muted);

}

/* =========================
   SKILLS
========================= */

.skills-grid{

  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;

  margin-top:40px;

}

.skill-card{

  background:var(--surface);
  border-radius:18px;
  padding:24px;

  transition:.3s;

}

.skill-card:hover{
  transform:translateY(-5px);
}

.skill-card img{
  width:44px;
  margin-bottom:16px;
}

/* =========================
   PROJETOS
========================= */

.project{

  background:var(--surface);

  border:1px solid var(--border);
  border-radius:18px;

  padding:28px;
  margin-top:24px;

  transition:.3s;

}

.project:hover{

  transform:translateY(-5px);
  border-color:var(--blue);

}

.featured{
  border-color:var(--blue);
}

.future{
  opacity:.75;
  border-style:dashed;
}

.tag{

  display:inline-block;

  background:rgba(88,166,255,.15);

  color:var(--blue);

  padding:6px 12px;
  border-radius:30px;
  font-size:12px;

  margin-bottom:14px;

}

.blue{color:var(--blue);}
.green{color:var(--green);}
.yellow{color:var(--yellow);}

.flow{

  display:flex;
  gap:10px;
  flex-wrap:wrap;

  color:var(--muted);

  margin:18px 0;

}

.tech{

  display:flex;
  flex-wrap:wrap;
  gap:10px;

  margin-top:18px;

}

.tech span{

  background:var(--surface2);

  padding:8px 12px;

  border-radius:20px;

  font-size:13px;

}

/* =========================
   EXPERIÊNCIA
========================= */

.terminal-box{

  background:#0D1324;

  border:1px solid var(--border);
  border-radius:18px;

  padding:24px;

}

.terminal-title{

  display:flex;
  align-items:center;
  gap:12px;

  margin-bottom:20px;

  color:var(--green);

  font-family:monospace;

}

.terminal-title img{
  width:34px;
}

.terminal-box li{
  margin-bottom:12px;
}

/* =========================
   APRENDIZADO
========================= */

.progress{
  margin-top:26px;
}

.progress label{
  display:block;
  margin-bottom:8px;
}

.progress div{

  height:12px;

  background:#202C49;
  border-radius:30px;
  overflow:hidden;

}

.progress span{

  display:block;
  height:100%;

  background:linear-gradient(90deg,var(--green),var(--blue));

}

/* =========================
   FOOTER
========================= */

footer{

  text-align:center;

  padding:70px 20px;

  border-top:1px solid var(--border);

}

.footer-pixel{

  width:72px;      /* ALTERADO */
  margin:0 auto 20px;

}

.social{

  display:flex;
  justify-content:center;
  gap:20px;

  margin:24px 0;

  flex-wrap:wrap;

}

small{
  color:var(--muted);
}

/* =========================
   ANIMAÇÃO SCROLL
========================= */

.hidden{

  opacity:0;
  transform:translateY(40px);

  transition:.8s;

}

.show{

  opacity:1;
  transform:translateY(0);

}

/* =========================
   RESPONSIVO
========================= */

@media(max-width:900px){

  .hero-content{
    grid-template-columns:1fr;
    text-align:center;
  }

  .main-pixel{
    max-width:180px;   /* ALTERADO */
  }

  .navbar{

    flex-direction:column;
    gap:20px;

  }

  .navbar ul{
    flex-wrap:wrap;
    justify-content:center;
  }

  .columns,
  .split{
    grid-template-columns:1fr;
  }

  .hero h1{
    font-size:42px;
  }

  .buttons{
    justify-content:center;
  }

}