*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:#1a0d3a;
  color:#fff;
  font-family:Arial, sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}

.header{width:100%;position:fixed;top:0;left:0;z-index:100}
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1rem 2rem;
  background:rgba(26,13,58,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(162,89,255,0.06);
}
.logo{color:#a259ff;font-weight:700;text-decoration:none;font-size:1.5rem}
.nav-links{display:flex;gap:1.6rem;list-style:none;align-items:center}
.nav-links a{color:#fff;text-decoration:none;font-weight:500;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:#a259ff}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer}
.hamburger span{width:28px;height:3px;background:#fff;border-radius:5px;transition:all .3s}
.hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.blog-section{padding-top:110px}
.blog-hero{text-align:center;padding:3.2rem 1rem 1.6rem}
.blog-hero h1{font-size:2.4rem;color:#a259ff;margin-bottom:.6rem}
.subtitle{color:#cfcfda;margin-bottom:1.6rem}

.posts{
  max-width:1100px;margin:0 auto;padding:0 1rem 4rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;
}

.post-card{
  background:#111;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 6px 20px rgba(0,0,0,0.4);transition:transform .3s,box-shadow .3s;
}
.post-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px rgba(109,93,252,0.16)}
.post-card img{width:100%;height:200px;object-fit:cover}
.post-content{padding:1.4rem;flex:1;display:flex;flex-direction:column}
.post-content h2{font-size:1.15rem;margin-bottom:.6rem;color:#fff}
.post-content p{color:#bdbcc8;font-size:.95rem;margin-bottom:1rem;flex:1}
.btn-read{display:inline-block;background:#a259ff;color:#fff;padding:.55rem .95rem;border-radius:8px;text-decoration:none;font-weight:600;transition:transform .2s}
.btn-read:hover{transform:scale(1.03)}

.post-container{max-width:900px;margin:120px auto;padding:0 1rem 80px}
.post-full{background:#111;border-radius:14px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,0.45)}
.post-image{width:100%;height:360px;object-fit:cover}
.post-text{padding:2rem}
.post-text h1{color:#a259ff;margin-bottom:.6rem;font-size:1.8rem}
.post-date{color:#bdbcc8;margin-bottom:1rem;font-size:.95rem}
.post-text p{color:#d7d6dd;margin-bottom:1rem;line-height:1.75}
.btn-back{display:inline-block;margin-top:1rem;background:#a259ff;color:#fff;padding:.6rem 1.1rem;border-radius:8px;text-decoration:none}

.footer{text-align:center;padding:1.6rem 0;border-top:1px solid rgba(255,255,255,0.03);background:transparent;color:#cfcfda}

.fade-in{opacity:0;transform:translateY(30px);transition:all .7s ease-out}
.fade-in.visible{opacity:1;transform:translateY(0)}

@media (max-width: 768px){
  .nav-links{display:none;position:absolute;top:100%;right:0;background:#111;padding:1rem;border-radius:0 0 8px 8px;flex-direction:column;width:220px}
  .nav-links.open{display:flex}
  .hamburger{display:flex}
  .post-card img{height:180px}
  .post-image{height:260px}
}

/* ===== HAMBURGER MENU MODERNO ===== */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  height: 24px;
  cursor: pointer;
  border: none;
  background: transparent;
  position: relative;
  z-index: 1100;
  transition: transform 0.3s ease;
}

.hamburger span {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #a259ff, #7d1abf);
  border-radius: 5px;
  box-shadow: 0 0 6px rgba(162, 89, 255, 0.6);
  transition: all 0.35s ease;
  transform-origin: center;
}

/* Efeito hover (ligeiro brilho e zoom) */
.hamburger:hover {
  transform: scale(1.08);
}

/* Estado ativo (menu aberto) */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 7px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -7px);
}

/* Sombra de brilho ao abrir */
.hamburger.active span {
  background: #a259ff;
  box-shadow: 0 0 10px rgba(162, 89, 255, 0.8);
}

/* ===== RESPONSIVO ===== */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }
}