/* ==========================================================
   IBDC — Landing Page institucional
   Paleta extraída da própria logo:
   navy (base/texto), terracota, sálvia, dourado
   ========================================================== */

:root{
  --navy: #233248;
  --navy-soft: #3a4a63;
  --terracotta: #d99a5e;
  --sage: #8fa88a;
  --gold: #c99a4d;
  --cream: #f7f4ee;
  --paper: #ffffff;
  --ink-muted: #5b6577;
  --line: rgba(35,50,72,0.10);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--navy);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight:400;
  margin:0;
}

p{ margin:0; }

.container{
  max-width:1040px;
  margin:0 auto;
  padding:0 24px;
}

a{ color:inherit; }

/* ---------- topo ---------- */

header.site-header{
  padding:28px 0;
}

.site-header .container{
  display:flex;
  align-items:center;
  gap:14px;
}

.site-header img{
  height:200px;
  width:auto;
}

.site-header .brand-name{
  font-family:'Georgia', serif;
  font-size:15px;
  line-height:1.3;
  color:var(--navy);
}

.site-header .brand-name strong{
  display:block;
  font-size:16px;
}

/* ---------- hero ---------- */

.hero{
  padding:36px 0 72px;
  text-align:left;
  border-bottom:1px solid var(--line);
}

.hero h1{
  font-size:clamp(28px, 4vw, 44px);
  line-height:1.2;
  max-width:820px;
  color:var(--navy);
}

.hero .subtitle{
  margin-top:18px;
  font-size:19px;
  color:var(--terracotta);
  font-family:'Georgia', serif;
  font-style:italic;
}

.hero .lede{
  margin-top:28px;
  max-width:640px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.hero .lede p{
  font-size:16px;
  line-height:1.75;
  color:var(--ink-muted);
}

/* ---------- seções genéricas ---------- */

section{
  padding:64px 0;
}

section + section{
  border-top:1px solid var(--line);
}

.section-title{
  font-size:clamp(24px, 3vw, 32px);
  color:var(--navy);
  margin-bottom:16px;
}

.section-lead{
  max-width:640px;
  color:var(--ink-muted);
  font-size:16px;
  line-height:1.75;
  margin-bottom:36px;
}

/* ---------- pilares ---------- */

.pilares{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}

.pilar{
  background:var(--paper);
  border-radius:10px;
  padding:30px 26px;
  box-shadow:0 6px 24px rgba(35,50,72,0.06);
  position:relative;
  overflow:hidden;
}

.pilar::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:4px;
}

.pilar[data-tone="terracotta"]::before{ background:var(--terracotta); }
.pilar[data-tone="sage"]::before{ background:var(--sage); }
.pilar[data-tone="gold"]::before{ background:var(--gold); }

.pilar .dot{
  width:14px;
  height:14px;
  border-radius:50%;
  margin-bottom:16px;
}

.pilar[data-tone="terracotta"] .dot{ background:var(--terracotta); }
.pilar[data-tone="sage"] .dot{ background:var(--sage); }
.pilar[data-tone="gold"] .dot{ background:var(--gold); }

.pilar h3{
  font-size:20px;
  color:var(--navy);
  margin-bottom:10px;
}

.pilar p{
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-muted);
}

/* ---------- serviços ---------- */

.servicos-lista{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px 32px;
}

.servicos-lista li{
  display:flex;
  align-items:baseline;
  gap:12px;
  font-size:15.5px;
  color:var(--navy);
  padding:14px 0;
  border-bottom:1px solid var(--line);
}

.servicos-lista li::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--terracotta);
  flex:none;
  transform:translateY(-2px);
}

/* ---------- sorocaba (destaque) ---------- */

.sorocaba{
  background:var(--navy);
  color:var(--cream);
  border-radius:14px;
  padding:48px;
}

.sorocaba .section-title{ color:var(--paper); }

.sorocaba .eyebrow{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:11.5px;
  color:var(--terracotta);
  margin-bottom:14px;
}

.sorocaba p{
  max-width:680px;
  font-size:16px;
  line-height:1.75;
  color:rgba(247,244,238,0.85);
}

.sorocaba p + p{
  margin-top:16px;
}

/* ---------- propósito ---------- */

.proposito{
  text-align:center;
  padding:80px 0;
}

.proposito .section-title{
  max-width:720px;
  margin:0 auto 20px;
}

.proposito p{
  max-width:600px;
  margin:0 auto;
  font-size:17px;
  line-height:1.8;
  color:var(--ink-muted);
}

/* ---------- rodapé ---------- */

footer.site-footer{
  border-top:1px solid var(--line);
  padding:36px 0;
  text-align:center;
}

footer.site-footer .tagline{
  font-family:'Georgia', serif;
  font-style:italic;
  color:var(--terracotta);
  font-size:16px;
  margin-bottom:8px;
}

footer.site-footer .contact-info{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 16px;
  font-size:13px;
  color:var(--navy);
  margin-bottom:14px;
}

footer.site-footer .contact-info span{
  white-space:nowrap;
}

footer.site-footer .contact-info .sep{
  color:var(--line);
}

footer.site-footer .copyright{
  font-size:12px;
  color:var(--ink-muted);
}

/* ---------- responsivo ---------- */

@media (max-width: 760px){
  .pilares{ grid-template-columns:1fr; }
  .servicos-lista{ grid-template-columns:1fr; }
  .sorocaba{ padding:32px 24px; }
  .proposito{ padding:56px 0; }
}

/* ---------- acessibilidade ---------- */

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--terracotta);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}