:root{
  --blue-top:#0e4670;
  --blue-bottom:#0e67a8;
  --ink:#0e2030;
  --text:#12202a;
  --muted:#5a6a78;
  --card:#ffffff;
  --shadow: 0 10px 25px rgba(7,33,60,.12);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
}
.container{width:min(1160px, 92vw); margin-inline:auto}
header.nav{
  position:sticky; top:0; z-index:30;
  background:#fff;
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
}
.nav .container{display:flex;gap:28px;align-items:center;justify-content:flex-end;padding:14px 0}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;opacity:.85}
.nav a:hover{opacity:1}
/* HERO */
.hero{
  background: linear-gradient(180deg, #103f66 0%, #145c96 100%);
  color:#fff;
  padding: 70px 0 56px;
}
.hero .brand{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px }
.hero .logo{ width:min(860px, 85vw); height:auto }
.hero h1{
  font-family: Georgia, 'Times New Roman', serif;
  font-weight:700; letter-spacing:.4px;
  font-size: clamp(20px, 2.1vw, 26px);
  text-align:center; margin: 22px 0 6px;
}
.hero p.tagline{
  font-size: clamp(13px, 1.5vw, 16px);
  opacity:.92;
  text-align:center; margin:0
}

/* Quem Somos */
.section{ padding: 60px 0 }
.grid{
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 38px;
}
.card{
  background:var(--card); border-radius:20px; box-shadow: var(--shadow);
  overflow:hidden;
}
.card img, .card svg{ display:block; width:100%; height:auto }
h2{font-family:Georgia, 'Times New Roman', serif; font-size: clamp(24px, 2.6vw, 32px); margin:0 0 14px; color:var(--ink)}
p{margin:0 0 14px}
.btn{ display:inline-block; background:#0e67a8; color:#fff; padding:10px 16px; border-radius:10px; font-weight:700; text-decoration:none; box-shadow: var(--shadow)}
.btn:hover{filter:brightness(1.05)}

/* Áreas */
.areas{ padding: 24px 0 70px }
.areas h2{ text-align:center; margin-bottom:28px }
.cards{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px;
}
.area{
  background:#fff; border-radius:18px; box-shadow: var(--shadow); overflow:hidden; display:flex; flex-direction:column;
}
.area .pad{ padding:16px 18px 20px }
.area .cap{ height:84px; background:linear-gradient(180deg, #0f4670, #0f6db2); }
.area h3{ margin:8px 0 8px; font-size:18px; color:var(--ink)}
.area p{ color:#415564; font-size:14px; min-height:66px }
.area .cta{ margin-top:auto }
.area .cta .btn{ font-size:13px; padding:8px 12px }
.area.equalize{ min-height: 240px }

/* Contato */
.contact .container{ max-width:780px }
form .row{ display:flex; gap:12px; }
input, textarea{
  width:100%; border:1px solid #e5e9ef; border-radius:10px; padding:12px 14px; outline:none;
  transition:border .2s ease, box-shadow .2s ease; font: inherit;
}
textarea{ min-height:160px; resize:vertical }
input:focus, textarea:focus{ border-color:#0f6db2; box-shadow: 0 0 0 3px rgba(15,109,178,.12) }
footer{ color:#90a0ad; font-size:13px; padding:22px 0; text-align:center; border-top:1px solid #eef2f6; margin-top:38px }

/* responsive */
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .nav .container{ justify-content:center }
  .hero{ padding: 56px 0 44px }
  .cards{ grid-template-columns: 1fr; }
}