@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root{
  --bg:#f7f6f2;
  --card:#ffffff;
  --text:#1f2933;
  --muted:#6b7280;
  --accent:#b88b4a; 
  --shadow: rgba(15,23,42,0.08);
  --container-width:1200px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}


.container{
  width:90%;
  max-width:var(--container-width);
  margin:0 auto;
}


.site-header{
  background: #fff;
  box-shadow: 0 2px 10px var(--shadow);
  position:sticky;
  top:0;
  z-index:60;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
}

.brand, .logo {
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:0.4px;
  color:var(--text);
}

.nav{
  display:flex;
  gap:18px;
  align-items:center;
}

.nav-link{
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
  padding:8px 12px;
  border-radius:6px;
  transition:all .18s ease;
  font-size:0.95rem;
}

.nav-link:hover{
  color:var(--text);
  background:rgba(184,139,74,0.06);
}

.nav-link.active{
  color:var(--accent);
  background:rgba(255, 255, 255, 0.08);
}


.hero{
  position:relative;
  min-height:64vh;
  display:flex;
  align-items:center;
 
  overflow:hidden;
}

.hero-bg{
  position:absolute;
  inset:0;
  background-image: url('https://images.unsplash.com/photo-1600585154154-1cde7b9d0b8b?w=1600&auto=format&fit=crop&q=60');
  background-position:center;
  background-size:cover;
  filter: contrast(0.9) saturate(0.95);
  transform:scale(1.03);
  z-index:0;
  will-change:transform;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.38), rgba(0,0,0,0.28));
  z-index:1;
}

.hero-content{
  position:relative;
  z-index:2;
  padding:48px 0;
  color:white;
  text-align:left;
  max-width:720px;
}

.hero-content h1{
  font-size:2.6rem;
  margin:0 0 12px 0;
  line-height:1.05;
  font-weight:700;
}

.hero-content .accent{
  color:var(--accent);
}

.lead{
  color:rgba(255,255,255,0.9);
  margin-bottom:18px;
  font-size:1.05rem;
}


.btn-primary{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:12px 20px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 18px rgba(184,139,74,0.15);
}

.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow: 0 12px 30px rgba(184,139,74,0.18);
}


.about{
  background:var(--card);
  margin-top:10px; 
  border-radius:12px;
  box-shadow:0 8px 28px rgba(15,23,42,0.05);
  padding:36px;
}

.about-inner{
  display:flex;
  gap:28px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.about h2{
  margin-bottom:8px;
  font-size:1.6rem;
}

.about p{
  color:var(--muted);
  max-width:760px;
}


.highlights{
  display:flex;
  gap:18px;
  margin-top:12px;
  flex-wrap:wrap;
}

.hl{
  background:#fff;
  border-radius:10px;
  padding:14px 18px;
  box-shadow:0 6px 20px rgba(0,0,0,0.04);
  min-width:140px;
  text-align:center;
}

.hl strong{display:block;font-size:1.05rem;color:var(--text); margin-bottom:6px}
.hl span{font-size:0.92rem;color:var(--muted)}


.projects{
  padding:64px 0;
}

.section-title{
  font-size:1.8rem;
  margin-bottom:18px;
  color:var(--text);
}

.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  margin-top:18px;
}


.card-grid {
  margin: 40px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
  transition: .25s ease;
  display: flex;
  flex-direction: column;
}


.card-image {
  width: 100%;
  aspect-ratio: 1 / 1; 
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .3s;
}

.card:hover img {
  transform: scale(1.08);
}

/* Corpo do card */
.card-body {
  padding: 18px 20px;
}

.card-body h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
  font-weight: 600;
}

.card-body p {
  font-size: .95rem;
  color: #666;
  line-height: 1.4rem;
}

.card-grid{
  margin:40px 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}

.card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:.2s;
  aspect-ratio: 1 / 1; 
  display:flex;
  flex-direction:column;
}

.card img{
  width:100%;
  aspect-ratio: 1 / 1;   
  object-fit:cover;
}

.card-body{
  padding:16px;
  flex:1;
  display:flex;
  flex-direction:column;
}

.card-body h3{
  margin-bottom:8px;
  font-size:1.1rem;
  font-weight:600;
}

.card-body p{
  flex:1;
  margin-bottom:12px;
  color:#666;
  font-size:0.95rem;
  line-height:1.35rem;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
}

.card-body a{
  align-self:flex-start;
  text-decoration:none;
  padding:8px 14px;
  border-radius:6px;
  background:#333;
  color:#fff;
  font-size:0.9rem;
  font-weight:500;
  transition:0.2s;
}

.card-body a:hover{
  background:#000;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 32px rgba(0,0,0,0.12);
}


.site-footer{
  padding:28px 0;
  text-align:center;
  color:var(--muted);
  margin-top:40px;
  background:transparent;
}

@media (max-width:900px){
  .hero-content h1{font-size:2.2rem}
  .hero{min-height:56vh}
  .about-inner{flex-direction:column}
}

@media (max-width:520px){
  .nav{gap:10px}
  .nav-link{font-size:0.9rem;padding:6px 8px}
  .hero-content h1{font-size:1.6rem}
  .btn-primary{padding:10px 14px}
  .container{width:94%}
}