/* Estilos básicos — simples, limpos e responsivos */
:root{ --green:#00B07C; --dark:#1a1a1a; --light:#f6f7f8; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family:'Inter',system-ui,Arial,sans-serif; color:var(--dark); background:var(--light); }
.container{ width:100%; max-width:1100px; margin:0 auto; padding:0 20px; }

.site-header{ background:#fff; border-bottom:1px solid #eaeaea; position:sticky; top:0; z-index:10; }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; }
.brand{ font-weight:800; letter-spacing:.2px; color:var(--green); }

.cta{ color:#fff; background:var(--green); padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:600; }
.cta:hover{ opacity:.9; }

.hero{ padding:56px 0 18px; text-align:center; background:linear-gradient(180deg,#e9fbf5, #f6f7f8); }
.hero h1{ font-size:clamp(24px,4vw,40px); margin:0 0 8px; }
.hero p{ font-size:clamp(16px,2.2vw,18px); margin:0 0 18px; color:#444; }
.btn-whats{ display:inline-block; background:var(--green); color:#fff; font-weight:700; padding:12px 18px; border-radius:12px; text-decoration:none; }
.btn-whats:hover{ transform:translateY(-1px); }

.arte{ padding:24px 0 40px; }
.arte img{ width:100%; height:auto; display:block; border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.08); background:#fff; }

.contato{ background:#fff; padding:28px 0; border-top:1px solid #eee; }
.contato h2{ margin-top:0; }
.contato ul{ list-style:none; padding:0; margin:10px 0 0; }
.contato li{ margin:6px 0; }

.site-footer{ padding:18px 0; text-align:center; color:#666; }

/* Responsivo */
@media (min-width:900px){
  .hero{ padding:72px 0 24px; }
}