/* Basic reset and layout */
:root{
  --bg:#fff; --muted:#6b7280; --accent:#1f7a4c; --accent-2:#0b8f5b; --card:#f7f7f8;
  --maxw:1100px; --radius:8px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#111827;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Top marquee */
.top-marquee{
  position:fixed; top:0; left:0; right:0; height:36px; background:#0b3b2a; color:#fff; z-index:1200; overflow:hidden;
  display:flex; align-items:center;
}
.marquee-track{
  display:inline-block; white-space:nowrap; padding-left:100%;
  animation: slide 22s linear infinite;
  font-size:14px; opacity:0.95;
}
@keyframes slide{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* Header */
.site-header{position:sticky; top:36px; background:rgba(255,255,255,0.9); backdrop-filter:blur(6px); z-index:1000; border-bottom:1px solid #eee;}
.site-header.small{top:0}
.header-inner{max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 18px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;}
.brand img{width:46px; height:46px; object-fit:contain}
.brand-text{font-weight:700}
.main-nav{display:flex; gap:12px; align-items:center}
.main-nav a{color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:6px}
.main-nav a:hover, .main-nav a.active{background:#eef6f2; color:var(--accent-2)}
.main-nav .cta{background:var(--accent); color:#fff; padding:8px 12px}

/* Hero */
.hero{max-width:var(--maxw); margin:24px auto; padding:24px; border-radius:12px; display:block}
.hero-grid{display:grid; grid-template-columns:1fr 420px; gap:20px; align-items:center}
.hero-left h1{font-size:32px; margin:0 0 8px}
.hero-left p{color:var(--muted); margin:0 0 12px}
.hero-cta{display:flex; gap:10px; margin:12px 0}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:8px; border:1px solid transparent; cursor:pointer; text-decoration:none}
.btn.primary{background:var(--accent); color:#fff}
.btn.ghost{background:transparent; border-color:#e6e6e6}
.hero-highlights{display:flex; gap:10px; list-style:none; padding:0; margin:12px 0 0}

/* Cards */
.container{max-width:var(--maxw); margin:10px auto; padding:18px}
.grid.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:12px}
.card{background:var(--card); padding:12px; border-radius:10px}
.card img{width:100%; height:110px; object-fit:cover; border-radius:8px}
.cards h4{margin:8px 0}

/* Footer */
.site-footer{border-top:1px solid #eee; margin-top:24px; background:#fff}
.footer-inner{max-width:var(--maxw); margin:0 auto; padding:18px; display:flex; gap:20px; justify-content:space-between}
.footer-col{flex:1}
.footer-logo{width:46px}
.footer-bottom{background:#fafafa; padding:12px; text-align:center; font-size:13px}

/* WhatsApp float */
.whatsapp-float{position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:50%; background:transparent; z-index:1300; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(11,63,42,0.12)}
.whatsapp-float img{width:46px; height:46px}

/* Cookie bar */
.cookie-bar{position:fixed; left:12px; right:12px; bottom:12px; background:#fff; border-radius:10px; padding:12px; display:flex; gap:12px; align-items:center; box-shadow:0 8px 30px rgba(0,0,0,0.08); z-index:1400}
.cookie-actions{display:flex; gap:8px; align-items:center}

/* Misc smaller screens */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; padding:8px}
  .header-inner{padding:10px}
  .top-marquee{height:30px}
  .marquee-track{font-size:13px}
  .footer-inner{flex-direction:column; gap:12px}
  .cookie-bar{flex-direction:column; align-items:stretch}
}