@charset "utf-8";
/*
Site: Fabio Servando Arquiteto
Layout principal — paleta inspirada no cartão de visitas.
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
@import url("homepage.css");
@import url("navi.css");
@import url("forms.css");
@import url("tables.css");

:root{
  --navy-900:#0f2347;
  --navy-800:#16315f;
  --navy-700:#1f3a6b;
  --navy-600:#2a4d7f;
  --navy-300:#a4b5cc;
  --navy-100:#e7ecf3;
  --bg:#ffffff;
  --bg-soft:#f6f7f9;
  --bg-muted:#eef1f5;
  --text:#1a1f2e;
  --text-muted:#5b6471;
  --line:#e3e7ec;
  --shadow-sm:0 1px 3px rgba(15,35,71,.06), 0 1px 2px rgba(15,35,71,.04);
  --shadow-md:0 8px 24px rgba(15,35,71,.08);
  --shadow-lg:0 18px 50px rgba(15,35,71,.12);
  --radius:14px;
  --radius-lg:22px;
  --container:1200px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-y:scroll;}
body{
  margin:0; padding:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:15px; line-height:1.6;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%; height:auto; display:block; border:0;}
a{color:var(--navy-700); text-decoration:none; transition:color .2s ease;}
a:hover{color:var(--navy-900);}

.justify{text-align:justify;}
.bold{font-weight:600;}
.center{text-align:center;}
.right{text-align:right;}
.nostart{margin:0; padding:0; list-style:none;}
.clear{clear:both;}
br.clear{clear:both; margin-top:0;}
.fl_left,.imgl{float:left;}
.fl_right,.imgr{float:right;}
.imgl,.imgr{border:1px solid var(--line); padding:6px; background:var(--bg-soft); border-radius:8px;}
.imgl{margin:0 16px 12px 0; clear:left;}
.imgr{margin:0 0 12px 16px; clear:right;}

/* ---------- Wrapper rows ---------- */
div.wrapper{display:block; width:100%; margin:0; text-align:left;}
.col1{background:var(--bg); color:var(--text); border-bottom:1px solid var(--line);}
.col2{background:var(--bg); color:var(--text);}
.col2 a{color:var(--navy-700);}
.col3,.col4{background:var(--bg); color:var(--text);}
.col5{background:var(--navy-900); color:#cdd7e7;}

/* ---------- Header ---------- */
#head{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:var(--container);
  height:auto; min-height:84px;
  margin:0 auto; padding:18px 24px;
  z-index:100;
  top:auto; left:auto;
}
#head h1{margin:0; padding:0; font-size:0; line-height:0;}
#head h1 a{
  display:flex; align-items:center; gap:14px;
  position:static;
  font-size:22px; font-weight:700; letter-spacing:-0.01em;
  color:var(--navy-700); background:transparent;
  font-family:'Inter',sans-serif;
}
#head h1 a::before{
  content:""; display:block;
  width:48px; height:48px;
  background:url(../../images/hero/logo.png) center/contain no-repeat;
  flex:0 0 48px;
}
#head p{
  display:none;
}
#head .auto-style1,#head img.favicon{display:none;}
#head img[src*="favicon"]{display:none;}

/* ---------- Breadcrumb ---------- */
#breadcrumb{
  width:100%; max-width:var(--container);
  margin:0 auto; padding:18px 24px;
  font-size:13px; color:var(--text-muted);
}
#breadcrumb ul{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px;}
#breadcrumb ul li{display:inline-flex; align-items:center;}
#breadcrumb ul li a{color:var(--text-muted); font-weight:500;}
#breadcrumb ul li a:hover{color:var(--navy-700);}
#breadcrumb ul li.first{color:var(--text); font-weight:600;}
#breadcrumb ul li.current a{color:var(--navy-700); font-weight:600;}

/* ---------- Container ---------- */
#container{
  width:100%; max-width:var(--container);
  margin:0 auto; padding:48px 24px 64px;
  display:flex; gap:48px; flex-wrap:wrap;
}
#container h1,#container h2,#container h3,#container h4,#container h5,#container h6{
  margin:0 0 18px;
  font-family:'Inter',sans-serif; letter-spacing:-0.015em;
  font-weight:700; line-height:1.2; color:var(--navy-900);
  border:none; padding:0;
}
#container h1{font-size:34px; padding-bottom:14px; border-bottom:3px solid var(--navy-700); display:inline-block;}
#container h2{font-size:22px;}
#container h3{font-size:18px;}
#container p{margin:0 0 14px;}
#container a{background:transparent;}
#container a:hover{text-decoration:underline;}

/* ---------- Content & Column ---------- */
#content{display:block; flex:1 1 640px; min-width:0; float:none; width:auto;}
#column{display:block; flex:0 0 320px; max-width:320px; float:none; width:auto;}

#column .holder,
#column #featured{display:block; width:auto; margin-bottom:28px;}
#column .holder{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow-sm);
}
#column .holder h2{
  margin:14px 0 10px; padding:0;
  font-size:17px; color:var(--navy-900);
}
#column .holder p{line-height:1.6; color:var(--text-muted); margin:0 0 8px;}
#column div.imgholder{
  display:block; width:auto; margin:0 0 14px;
  padding:0; border:none; background:transparent; border-radius:10px; overflow:hidden;
}
#column div.imgholder img{width:100%; height:auto;}
#column .holder p.readmore,
#column #featured p.more{
  display:block; width:100%; font-weight:600; text-align:right; margin-top:10px;
}
#column .holder p.readmore a,
#column #featured p.more a{
  color:var(--navy-700);
}

/* Featured */
#column #featured a{color:var(--navy-700); background:transparent;}
#column #featured ul{margin:0; padding:0; list-style:none;}
#column #featured li{
  display:block; width:auto; margin:0; padding:20px;
  color:var(--text); background:var(--bg-soft);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
#column #featured li h2{
  margin:0 0 10px; padding:0;
  font-size:17px; font-weight:700; color:var(--navy-900);
  border:none;
}
#column #featured li p{line-height:1.6; color:var(--text-muted);}
#column #featured li p.imgholder{
  display:block; width:100%; height:auto; margin:0 0 14px; padding:0;
  border:none; background:transparent; border-radius:10px; overflow:hidden;
}
#column #featured li p.imgholder img{width:100%; height:auto;}

/* ---------- Comments ---------- */
#comments{margin-bottom:40px;}
#comments .commentlist{margin:0; padding:0;}
#comments .commentlist li{margin:0 0 12px; padding:18px; border-radius:var(--radius); list-style:none;}
#comments .commentlist li.comment_odd{background:var(--bg-soft); color:var(--text);}
#comments .commentlist li.comment_even{background:var(--bg-muted); color:var(--text);}
#comments .commentlist .author .name{font-weight:600;}
#comments .commentlist .submitdate{font-size:13px; color:var(--text-muted);}
#comments .commentlist p{margin:8px 0;}
#comments .commentlist li .avatar{float:right; border-radius:50%; margin:0 0 0 12px;}

/* ---------- Footer ---------- */
#footer{
  width:100%; max-width:var(--container);
  margin:0 auto; padding:56px 24px 28px;
  display:flex; gap:48px; flex-wrap:wrap;
  position:relative; top:auto; left:auto;
}
#footer h2{
  margin:0 0 18px; padding:0 0 12px;
  font-size:18px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color:#fff; background:transparent;
  border:none; position:relative;
}
#footer h2::after{
  content:""; position:absolute; left:0; bottom:0;
  width:38px; height:2px; background:var(--navy-300);
}
#footer p{margin:0 0 10px;}
#footer a{color:#fff; background:transparent;}
#footer a:hover{color:var(--navy-300);}

#contactform{display:block; flex:1 1 320px; width:auto; float:none;}
#compdetails{display:block; flex:1 1 320px; width:auto; float:none;}
#contactdetails{float:none;}
#contactdetails ul{margin:0; padding:0; list-style:none;}
#contactdetails li{margin:0 0 8px; color:#cdd7e7; line-height:1.55;}
#contactdetails li.last{margin:0;}
#contactdetails a{color:#fff;}
#officialdetails{float:none;}

#copyright{
  display:block; width:100%; flex:1 1 100%;
  margin:24px 0 0; padding:22px 0 0;
  font-size:12px; color:#94a3b8;
  border-top:1px solid rgba(255,255,255,.08);
}
#copyright p{margin:0;}
#copyright a{color:#cdd7e7;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px;
  font-weight:600; font-size:14px; letter-spacing:0.01em;
  background:var(--navy-700); color:#fff !important;
  border:1px solid var(--navy-700);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
}
.btn:hover{background:var(--navy-900); border-color:var(--navy-900); transform:translateY(-1px); box-shadow:var(--shadow-md);}
.btn.btn-outline{
  background:transparent; color:var(--navy-700) !important; border-color:var(--navy-700);
}
.btn.btn-outline:hover{background:var(--navy-700); color:#fff !important;}
.btn.btn-wa{background:#25D366; border-color:#25D366; color:#fff !important;}
.btn.btn-wa:hover{background:#1ebe5d; border-color:#1ebe5d;}

/* ---------- Mobile ---------- */
@media (max-width: 900px){
  #container{flex-direction:column; gap:32px; padding:32px 18px;}
  #content,#column{flex:1 1 100%; max-width:100%;}
  #footer{flex-direction:column; gap:32px; padding:40px 18px 24px;}
  #contactform,#compdetails{flex:1 1 100%;}
  #container h1{font-size:26px;}
  #head{padding:14px 18px; min-height:72px;}
}