@charset "utf-8";
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color: #2e2a27; text-decoration-color: rgba(0,0,0,.18)}
a:hover{text-decoration-thickness:2px}
.container{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(16px,3vw,28px)}
.stack{display:flex; flex-direction:column; gap:var(--space)}
.grid{display:grid; gap:var(--gap)}

header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding-block:12px}
.brand{display:flex; align-items:center; gap:16px; text-decoration:none; color:inherit}
.logo-img{height:136px; width:auto; object-fit:contain}
.brand-name{font-weight:800; letter-spacing:.2px}
.menu{display:flex; gap:14px; align-items:center}
.menu a{padding:8px 10px; border-radius:10px}
.menu a:hover{background:var(--pill)}
.cta{display:flex; gap:10px; align-items:center}
.btn{appearance:none; border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:700; box-shadow:0 2px 0 rgba(0,0,0,.05)}
.btn.primary{background:var(--accent-2); border-color:var(--accent-2); color:#fff}
.burger{display:none; background:none; border:0; padding:10px; border-radius:8px}
.burger svg path{stroke:#5A5047}
@media (max-width: 980px){
  .menu{display:none}
  .burger{display:inline-grid; place-items:center}
  .drawer{display:none; position:absolute; left:0; right:0; top:calc(100% + 0px); background:#fff; border-bottom:1px solid var(--line)}
  .drawer a{display:block; padding:14px 20px; border-top:1px solid var(--line)}
  .drawer.open{display:block}
  .logo-img{height:80px}
}

.hero{ position:relative; overflow:hidden; padding-block:clamp(28px, 8vw, 96px) }
.hero .bg{ position:absolute; inset:0; z-index:-1; opacity:.28; background:#000 }
.hero .bg img{ width:100%; height:100%; object-fit:cover; opacity:.34 }
.hero h1{ font-size:var(--h1); margin:0 0 10px 0; color: var(--ink); font-weight:900; letter-spacing:.2px }
.lead{ font-size:var(--lead); color: var(--muted); max-width:70ch }
.badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }
.pill{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-size:12.5px; color: var(--muted) }
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px }
.hero-cta .btn{ min-width:220px }
@media (max-width:740px){ .hero-cta .btn{ width:100%; justify-content:center } }

section{scroll-margin-top:110px}
.section{ padding-block:clamp(28px, 7vw, 80px) }
.section h2{ font-size:var(--h2); margin:0 0 10px 0; color: var(--ink); font-weight:800 }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,1) 100%);
  border:1px solid var(--line); border-radius:var(--radius); padding:clamp(16px, 2.8vw, 24px);
  box-shadow:var(--shadow);
}

.areas{grid-template-columns: repeat(auto-fit, minmax(min(280px,100%), 1fr))}
.areas .item h3{ font-size:var(--h3); margin:0 0 8px 0; color: var(--ink) }
.areas .item p{ margin:0; color: var(--muted) }

.diff{grid-template-columns: repeat(auto-fit, minmax(min(260px,100%), 1fr))}
.diff .item{ display:grid; grid-template-columns:40px 1fr; gap:10px; align-items:start }
.icon{ width:40px; height:40px; border-radius:10px; background:var(--soft); display:grid; place-items:center; border:1px solid var(--line); font-size:20px }

.bio{grid-template-columns: 1fr 1.4fr}
@media (max-width:900px){ .bio{ grid-template-columns:1fr } }
.avatar{
  width:min(200px, 38vw); aspect-ratio:1; border-radius:14px; border:1px solid var(--line);
  background:linear-gradient(135deg, var(--accent), var(--soft)); display:grid; place-items:center; color:#4e4135; font-weight:800;
  box-shadow:var(--shadow);
}

#contato .grid{ grid-template-columns: 1.1fr 1fr }
@media (max-width:900px){ #contato .grid{ grid-template-columns:1fr } #contato .card{ margin-block:8px } }
form{ display:grid; gap:12px }
input,textarea,select{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:#fff; font:inherit; color:inherit }
textarea{ min-height:120px; resize:vertical }
.two{ display:grid; gap:12px; grid-template-columns:1fr 1fr }
@media (max-width:720px){ .two{ grid-template-columns:1fr } }
.form-note{ color: var(--muted); font-size:13px }

.faq{ grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr)) }
details{ border:1px solid var(--line); border-radius:12px; background:#fff; padding:12px 14px }
details summary{ cursor:pointer; font-weight:700; color: var(--ink) }
details[open]{ background:var(--soft) }

footer{ border-top:1px solid var(--line); background: #fff }
.footgrid{ display:grid; gap:var(--gap); grid-template-columns:1.4fr 1fr 1fr }
@media (max-width:900px){ .footgrid{ grid-template-columns:1fr } }
.copyright{ color: var(--muted); font-size:13px; padding-block:16px; text-align:center }

:is(a,button,input,textarea,select,.btn):focus{ outline:3px solid var(--accent-2); outline-offset:2px }
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important }
}