:root{
  --brand-700:#0e4f8b;
  --brand-600:#1b6ead;
  --brand-100:#e8f1f8;
  --gray-700:#5f6770;
  --gray-300:#d5d9de;
  --white:#ffffff;
  --radius:16px;
  --shadow:0 10px 24px rgba(14,79,139,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:#1d252c;
  background:linear-gradient(180deg,var(--brand-100),#f7f9fb 40%);
}
header{max-width:1100px;margin:32px auto 0;padding:24px;}
.hero{
  background: var(--white);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  display:grid; gap:20px; align-items:center;
  grid-template-columns: 234px 1fr; /* increased by 50% */
  padding:24px;
}
.hero img{width:100%; height:auto}
.hero h1{
  font-family: Montserrat, sans-serif;
  color:var(--brand-700);
  font-size:clamp(28px,3vw,36px);
  line-height:1.1; margin:0 0 6px;
  letter-spacing:.2px;
}
.hero p{margin:0; color:var(--gray-700)}
nav{
  max-width:1100px;margin:12px auto 0;padding:0 24px 8px;
  display:flex; gap:14px; flex-wrap:wrap;
}
nav a{
  text-decoration:none; color:var(--brand-700);
  font-weight:600; font-family: Montserrat, sans-serif;
  padding:10px 14px; border-radius:10px;
}
nav a:hover{background:#eaf3fb}
main{max-width:1100px;margin:12px auto 48px; padding:0 24px;}
.card{
  background:var(--white);
  border:1px solid var(--gray-300);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:24px; margin-top:18px;
}
h2{
  font-family: Montserrat, sans-serif;
  color:var(--brand-600); margin:0 0 12px; font-size:22px;
}
.grid{display:grid; gap:18px}
@media(min-width:860px){ .grid-2{grid-template-columns:1fr 1fr} }
.kpi{
  display:grid; gap:4px; padding:16px; border-radius:12px;
  background:linear-gradient(180deg,#ffffff, #f6f9fc);
  border:1px solid var(--gray-300);
}
.kpi .k{font-size:13px; color:var(--gray-700)}
.kpi .v{font-weight:700; color:var(--brand-700)}
.list-clean{padding-left:18px; margin:8px 0}
.list-clean li{margin:4px 0}
.map{width:100%; height:320px; border:0; border-radius:12px}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; font-weight:600; 
  background:var(--brand-700); color:var(--white);
  padding: 8px 11px; min-height: 40px; border-radius:12px;
  box-shadow:0 6px 16px rgba(14,79,139,.18);
}
.btn.alt{background:var(--white); color:var(--brand-700); border:1px solid var(--brand-700)}
footer{
  background:var(--brand-700); color:var(--white);
  padding:18px; text-align:center;
}
.small{font-size:.92rem}


@media (max-width: 640px){
  .hero{ grid-template-columns: 1fr; text-align:center; }
  .hero img{ max-width: 220px; margin: 0 auto; }
  nav{ justify-content:center; }
  .cta{ justify-content:center; }
  .map{ height: 280px; }
}
@media (min-width: 641px){
  .map{ height: 320px; }
}


/* Floating WhatsApp Button */
.whatsapp-float {
  position: fixed;
  width: 64px;
  height: 64px;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:1000;
  transition: transform .2s;
}
.whatsapp-float:hover {
  transform: scale(1.05);
}
.whatsapp-float img {
  width: 36px;
  height: 36px;
}