/* Light, soft palette inspired by your logo */
:root{
  --accent:#b08b73;  /* soft taupe */
  --ink:#54423b;     /* deep brown */
  --bg:#f7f5f3;      /* warm ivory */
  --card:#ffffff;
  --muted:#776e69;
  --shadow:0 6px 20px rgba(0,0,0,0.06);
  --radius:16px;
  --maxw:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;line-height:1.6;color:var(--ink);background:var(--bg)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:1rem}
.topbar{background:var(--card);border-bottom:1px solid #eee;position:sticky;top:0;z-index:10}
.brand{display:flex;gap:0.75rem;align-items:center}
.logo{height:68px;width:auto;border-radius:12px;box-shadow:var(--shadow);background:#fff}
.brand-text h1{font-size:1.25rem;margin:0}
.brand-text .tag{color:var(--muted);margin:0}
.contact-inline{margin-left:auto;display:flex;gap:0.8rem;align-items:center;flex-wrap:wrap}
.contact-inline a{color:var(--ink);text-decoration:none;padding:0.25rem 0.4rem;border-radius:8px}
.contact-inline .whatsapp{background:var(--accent);color:white}
.header .wrap{display:flex;justify-content:space-between;align-items:center}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

.hero{min-height:420px;background-size:cover;background-position:center;display:grid;place-items:center;position:relative}
.hero .overlay{background:rgba(0,0,0,0.45);color:white;padding:2rem;border-radius:var(--radius);text-align:center;box-shadow:var(--shadow)}
.btn{background:var(--accent);color:white;text-decoration:none;padding:0.7rem 1.1rem;border-radius:12px;display:inline-block;margin-top:0.5rem}

h2,h3,h4{color:var(--ink);margin:0 0 0.6rem 0}
section{margin:2rem 0}

.services .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:var(--card);padding:1rem;border-radius:var(--radius);box-shadow:var(--shadow)}

.portfolio .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.portfolio img{width:100%;height:200px;object-fit:cover;border-radius:12px;box-shadow:var(--shadow)}

.contact-columns{display:grid;grid-template-columns:1.1fr 1fr;gap:1rem;align-items:start}
.contact-form{display:grid;gap:0.6rem;background:var(--card);padding:1rem;border-radius:var(--radius);box-shadow:var(--shadow)}
.contact-form input,.contact-form textarea{width:100%;padding:0.6rem;border:1px solid #e6e0db;border-radius:10px}
.contact-form button{border:0;cursor:pointer}

.site-footer{background:var(--card);border-top:1px solid #eee}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.muted{color:var(--muted)}
.small{font-size:0.9rem}

@media(max-width:800px){
  .contact-columns{grid-template-columns:1fr}
}