/* styles.css - design simples e limpo */
:root{
  --accent:#c59a00;
  --dark:#1b1b1f;
  --muted:#666;
  --max-width:1100px;
  --radius:12px;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.5;color:var(--dark);margin:0;background:#fff}
.container{max-width:var(--max-width);margin:0 auto;padding:28px}
.site-header{border-bottom:1px solid #eee;background:linear-gradient(90deg,#fff 0%, #fff 60%);position:sticky;top:0;z-index:30}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:12px}
.brand h1{font-size:1.5rem;margin:0}
.logo{width:60px;height:60px}

/* Menu hambúrguer */
.menu-toggle{
  display:none;
  flex-direction:column;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:8px;
  gap:5px;
  z-index:40;
}
.menu-toggle span{
  display:block;
  width:25px;
  height:3px;
  background:var(--dark);
  transition:all 0.3s ease;
  border-radius:2px;
}
.menu-toggle.active span:nth-child(1){
  transform:rotate(45deg) translate(8px, 8px);
}
.menu-toggle.active span:nth-child(2){
  opacity:0;
}
.menu-toggle.active span:nth-child(3){
  transform:rotate(-45deg) translate(7px, -7px);
}

.main-nav{
  display:flex;
  align-items:center;
  gap:12px;
}
.main-nav a{
  text-decoration:none;
  color:var(--dark);
  font-weight:600;
  transition:color 0.3s;
}
.main-nav a:hover{
  color:var(--accent);
}

.btn-primary{background:var(--accent);color:#fff;padding:8px 12px;border-radius:10px;text-decoration:none}
.btn-large{display:inline-block;margin-top:12px;background:var(--accent);color:#fff;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:700}
.hero{padding:40px 0;background:linear-gradient(180deg,#fff,#f9f6ec)}
.hero-inner{display:flex;gap:28px;align-items:center}
.hero-text{flex:1}
.hero-image img{width:320px;max-width:40vw}
.services h3, .portfolio h3, .about h3, .blog h3{margin-top:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.grid article{background:#fff;border:1px solid #f0e8d2;padding:16px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.03)}
.portfolio-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.card{flex:1 1 200px;background:#fff;border:1px dashed #eee;padding:24px;border-radius:10px;text-align:center}
.post{border-left:4px solid var(--accent);padding:12px;margin:12px 0;background:#fff;border-radius:8px}
.contact-info{display:flex;gap:15px;margin-top:20px;flex-wrap:wrap}
.contato .contact-form{display:grid;gap:10px;max-width:600px}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #ddd}
.site-footer{border-top:1px solid #eee;padding:18px 0;margin-top:24px;text-align:center;color:var(--muted)}
.small{font-size:0.9rem;color:var(--muted)}

/* Responsivo */
@media(max-width:800px){
  .hero-inner{flex-direction:column;text-align:center}
  .hero-image img{width:100%;max-width:300px}
  
  .menu-toggle{
    display:flex;
  }
  
  .main-nav{
    position:fixed;
    top:0;
    right:-100%;
    width:70%;
    max-width:300px;
    height:100vh;
    background:#fff;
    flex-direction:column;
    align-items:flex-start;
    padding:80px 30px 30px;
    box-shadow:-2px 0 10px rgba(0,0,0,0.1);
    transition:right 0.3s ease;
    gap:20px;
  }
  
  .main-nav.active{
    right:0;
  }
  
  .main-nav a{
    font-size:1.1rem;
    width:100%;
    padding:10px 0;
  }
  
  .grid{
    grid-template-columns:1fr;
  }
  
  .brand h1{
    font-size:1.2rem;
  }
  
  .logo{
    width:50px;
    height:50px;
  }
  
  .container{
    padding:20px;
  }
}

@media(max-width:500px){
  .hero-text h2{
    font-size:1.5rem;
  }
  
  .brand h1{
    font-size:1rem;
  }
  
  .logo{
    width:40px;
    height:40px;
  }
}