/* Fontes da marca, servidas pelo domínio principal do Instituto.
   Testado: respondem 200 com Access-Control-Allow-Origin: * */
@font-face{font-family:'Neology Deco';src:url('https://www.institutoharmonizese.com.br/fonts/neology-deco/Neology%20Deco%20W03%20Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Neology Deco';src:url('https://www.institutoharmonizese.com.br/fonts/neology-deco/Neology%20Deco%20W03%20Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Black Mango';src:url('https://www.institutoharmonizese.com.br/fonts/black-mango/BlackMango-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Black Mango';src:url('https://www.institutoharmonizese.com.br/fonts/black-mango/BlackMango-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Black Mango';src:url('https://www.institutoharmonizese.com.br/fonts/black-mango/BlackMango-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Black Mango';src:url('https://www.institutoharmonizese.com.br/fonts/black-mango/BlackMango-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root{
  --marrom:#564033;      /* texto e bordas — cor principal da marca */
  --marrom-claro:#764a2d;
  --nude:#d5c8bc;
  --bege:#f4f0ed;
  --creme:#fcfce7;
  --branco:#ffffff;
  --texto:#3f342c;
  --muted:#7a6b60;
  /* No site, Black Mango e Neology Deco são fontes de TÍTULO (40-50px e 32px).
     O corpo do site usa a sans do sistema — aqui é igual, por legibilidade. */
  --display:'Black Mango',Georgia,'Times New Roman',serif;
  --sub:'Neology Deco',-apple-system,'Segoe UI',Roboto,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bege); color:var(--texto);
  font:400 16px/1.7 var(--sans);
}

/* ---------- topo ---------- */
.topbar{background:var(--marrom); padding:22px 24px; text-align:center}
.topbar a{display:inline-block; line-height:0}
.topbar img{height:34px; width:auto}

.hero{
  background:linear-gradient(180deg,var(--nude) 0%,var(--bege) 100%);
  padding:56px 24px 44px; text-align:center;
  border-bottom:1px solid var(--nude);
}
.hero .eyebrow{
  font-family:var(--sub); font-size:12.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--marrom); margin:0 0 14px; font-weight:600;
}
.hero h1{
  font-family:var(--display); font-weight:700; color:var(--marrom);
  font-size:40px; line-height:1.15; margin:0 0 14px; letter-spacing:.01em;
}
.hero .meta{color:var(--muted); font-size:14px; margin:0}

/* ---------- corpo ---------- */
.wrap{max-width:780px; margin:0 auto; padding:8px 24px 96px}
.card{
  background:var(--branco); border:1px solid var(--nude);
  border-radius:14px; padding:44px 44px 52px; margin-top:-20px;
  box-shadow:0 1px 3px rgba(86,64,51,.06);
}

h2{
  font-family:var(--display); font-weight:700; color:var(--marrom);
  font-size:23px; line-height:1.3; margin:46px 0 16px; scroll-margin-top:20px;
  padding-bottom:10px; border-bottom:1px solid var(--bege);
}
h2:first-of-type{margin-top:8px}
h3{
  font-family:var(--sans); font-weight:600; color:var(--marrom);
  font-size:15.5px; margin:28px 0 8px; letter-spacing:.01em;
}
p{margin:0 0 15px}
ul{margin:0 0 17px; padding-left:22px}
li{margin-bottom:8px}
a{color:var(--marrom-claro); text-decoration:underline; text-underline-offset:3px}
a:hover{color:var(--marrom)}
strong{font-weight:600; color:var(--marrom)}

.tablewrap{overflow-x:auto; margin:0 0 24px; border:1px solid var(--nude); border-radius:10px}
table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:480px}
th,td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--bege); vertical-align:top}
th{background:var(--bege); font-weight:600; color:var(--marrom); white-space:nowrap; font-size:13.5px; letter-spacing:.02em}
tr:last-child td{border-bottom:0}

.callout{
  background:var(--creme); border-left:3px solid var(--marrom);
  padding:16px 20px; margin:0 0 22px; border-radius:0 8px 8px 0;
}
.callout p:last-child{margin-bottom:0}

/* ---------- rodapé ---------- */
.sitefooter{background:var(--marrom); color:var(--bege); padding:40px 24px; text-align:center}
.sitefooter .inner{max-width:780px; margin:0 auto; font-size:14px; line-height:1.8}
.sitefooter a{color:var(--nude); text-decoration:underline; text-underline-offset:3px}
.sitefooter a:hover{color:var(--branco)}
.sitefooter .rule{height:1px; background:rgba(213,200,188,.25); margin:22px auto; max-width:220px}
.sitefooter .fine{color:var(--nude); font-size:12.5px}

@media (max-width:640px){
  .hero{padding:40px 20px 34px}
  .hero h1{font-size:29px}
  .wrap{padding:8px 14px 64px}
  .card{padding:28px 22px 36px; border-radius:12px}
  h2{font-size:20px; margin:36px 0 14px}
}