/* Base */
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', sans-serif; background: #fff; color: #222; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Header */
.header {
  background: #fff; border-bottom: 1px solid #ddd; position: sticky; top: 0;
  z-index: 1000; /* ensure over hero overlay */
}
.nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; }
.brand { font-weight: 700; font-size: 20px; color: #000; }
.nav-links { display: flex; gap: 18px; }
.nav-links a { color: #000; font-weight: 600; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.btn-whatsapp { background: #25D366; color: #fff; }
.btn-call { background: #000; color: #fff; }

/* Hamburger */
.hamburger {
  display: none; flex-direction: column; gap: 5px; background: transparent; border: none; cursor: pointer;
}
.hamburger span { width: 26px; height: 3px; background: #000; }

/* Mobile drawer */
.mobile-menu {
  position: fixed; top: 0; right: -280px; width: 280px; height: 100%;
  background: #fff; box-shadow: -12px 0 24px rgba(0,0,0,.15);
  display: flex; flex-direction: column; transition: right .3s ease; z-index: 1200;
}
.mobile-menu.show { right: 0; }
.mobile-menu a { padding: 16px 20px; border-bottom: 1px solid #eee; color: #000; font-weight: 600; }
.mobile-menu .btn { margin: 16px 20px; }

/* Hero */
.hero {
  background: url("https://assets.codepen.io/15351970/f864f518-82cf-492e-af21-4fda2424f11c.jpeg") center/cover no-repeat;
  color: #fff; text-align: center; padding: 120px 20px; position: relative;
}
.hero .overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); pointer-events: none; }
.hero-content { position: relative; z-index: 1; }
.hero h1 { font-size: 36px; margin-bottom: 10px; }

/* Sections */
.section { padding: 60px 20px; background: #fff; }
h2 { text-align: center; margin-bottom: 26px; }

/* Grid */
.grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.card { border: 1px solid #eee; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.card img { width: 100%; height: 180px; object-fit: cover; }
.card .body { padding: 14px; }

/* Table */
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { padding: 12px; border-bottom: 1px solid #eee; text-align: left; }
td a.btn { margin: 0; }

/* Footer */
.footer { background: #000; color: #fff; text-align: center; padding: 20px; font-size: 14px; }

/* Responsive */
@media (max-width: 900px) {
  .nav-links { display: none; }  /* hide desktop links */
  .hamburger { display: flex; }  /* show hamburger */
}