:root{
  --green:#07966b;
  --green-dark:#057a58;
  --green-light:#e7f8f2;
  --navy:#102033;
  --text:#566173;
  --bg:#f5fbf9;
  --white:#ffffff;
  --border:#dfeae6;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--navy);
}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
header{
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:10;
}
.nav{
  max-width:1100px;
  margin:auto;
  padding:16px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{
  font-size:25px;
  font-weight:800;
  color:var(--green);
}
.brand span{color:var(--navy)}
nav{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
nav a{
  color:var(--navy);
  font-size:14px;
  font-weight:600;
}
.container{
  max-width:1000px;
  margin:auto;
  padding:55px 22px;
}
.hero{
  text-align:center;
  padding:85px 20px;
}
.hero h1{
  margin:0;
  font-size:62px;
  color:var(--green);
}
.hero h2{
  margin:10px 0 18px;
  font-size:34px;
}
.hero p{
  max-width:720px;
  margin:10px auto;
  color:var(--text);
  font-size:19px;
  line-height:1.7;
}
.badge{
  display:inline-block;
  margin-top:22px;
  background:var(--green-light);
  color:var(--green-dark);
  padding:12px 22px;
  border-radius:30px;
  font-weight:700;
}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:35px;
}
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:25px;
  box-shadow:0 8px 24px rgba(0,0,0,.04);
}
.card h3{margin-top:0}
.page{
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:35px;
  box-shadow:0 8px 30px rgba(0,0,0,.04);
}
.page h1{color:var(--green);margin-top:0}
.page h2{margin-top:30px}
.page p,.page li{
  color:var(--text);
  line-height:1.75;
}
.button{
  display:inline-block;
  background:var(--green);
  color:#fff;
  padding:13px 20px;
  border-radius:10px;
  font-weight:700;
  margin-top:10px;
}
.button:hover{
  background:var(--green-dark);
  text-decoration:none;
}
.notice{
  background:var(--green-light);
  border-left:4px solid var(--green);
  padding:16px;
  border-radius:10px;
  margin:20px 0;
}
footer{
  margin-top:60px;
  background:#102033;
  color:#dce5ea;
}
.footer{
  max-width:1100px;
  margin:auto;
  padding:30px 22px;
  text-align:center;
  line-height:1.8;
}
.footer a{color:#b9f0dd}
@media(max-width:750px){
  .nav{flex-direction:column}
  nav{justify-content:center}
  .hero{padding:55px 15px}
  .hero h1{font-size:48px}
  .hero h2{font-size:28px}
  .grid{grid-template-columns:1fr}
  .page{padding:24px}
}

.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin:25px 0;
}
.contact-box{
  background:#f8fcfa;
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
}
.contact-box h3{
  margin:0 0 10px;
  color:var(--green);
}
.contact-box p{
  margin:5px 0;
}
.contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}
.whatsapp-button{
  display:inline-block;
  background:#159c68;
  color:#fff;
  padding:13px 20px;
  border-radius:10px;
  font-weight:700;
}
.call-button{
  display:inline-block;
  background:#102033;
  color:#fff;
  padding:13px 20px;
  border-radius:10px;
  font-weight:700;
}
.map-button{
  display:inline-block;
  background:#eef4f2;
  color:#102033;
  padding:13px 20px;
  border-radius:10px;
  font-weight:700;
}
.whatsapp-button:hover,
.call-button:hover,
.map-button:hover{
  text-decoration:none;
  opacity:.9;
}

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