@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* =========================================================
   SERVENTIAX DESIGN SYSTEM — CAMADA OFICIAL
   Referência visual aprovada em 07/08/2026.
   Esta camada padroniza toda a plataforma sem alterar a lógica.
   ========================================================= */

:root{
  --sx-midnight:#0D1B2A;
  --sx-midnight-2:#10263A;
  --sx-midnight-3:#173A55;
  --sx-gold:#C99A5D;
  --sx-gold-light:#E2BA7D;
  --sx-gold-dark:#95652F;
  --sx-graphite:#1F2328;
  --sx-ivory:#F7F6F2;
  --sx-teal:#0EA5A8;
  --sx-line:#E3E4E2;
  --sx-muted:#69737D;
  --sx-shadow:0 14px 38px rgba(13,27,42,.07);
}

html body,
html button,
html input,
html select,
html textarea{font-family:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}

html body{background:var(--sx-ivory);color:var(--sx-graphite)}

/* Marca oficial aplicada de maneira consistente */
.brand{
  position:relative!important;
  min-height:42px!important;
  padding-left:42px!important;
  font-family:'Manrope',sans-serif!important;
  font-weight:600!important;
  letter-spacing:-.8px!important;
}
.brand::before{
  content:'';
  position:absolute;
  left:0;
  top:-8px;
  width:31px;
  height:42px;
  background:url('/serventiax-symbol.svg') center/contain no-repeat;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.16));
}
.brand span{color:var(--sx-gold)!important;font-weight:700!important}
.brand small{font-family:'Manrope',sans-serif!important;letter-spacing:1.55px!important;color:#C9D0D6!important;font-weight:500!important}

/* ONBOARDING — fundo institucional com símbolo grande e linhas geométricas */
.onboarding{background:var(--sx-ivory)!important}
.hero{
  position:relative!important;
  isolation:isolate!important;
  background:
    radial-gradient(circle at 18% 12%,rgba(201,154,93,.10),transparent 26%),
    linear-gradient(145deg,#071522 0%,var(--sx-midnight) 52%,#102A40 100%)!important;
  border-right:1px solid rgba(201,154,93,.18)!important;
}
.hero::before{
  content:''!important;
  display:block!important;
  position:absolute!important;
  width:360px!important;
  height:480px!important;
  right:-72px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  background:url('/serventiax-symbol.svg') center/contain no-repeat!important;
  opacity:.115!important;
  z-index:-1!important;
  border:0!important;
  border-radius:0!important;
}
.hero::after{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  left:0!important;
  bottom:0!important;
  border:0!important;
  border-radius:0!important;
  pointer-events:none!important;
  z-index:-2!important;
  background:
    linear-gradient(90deg,transparent 0 13%,rgba(201,154,93,.18) 13% 13.12%,transparent 13.12% 34%,rgba(201,154,93,.12) 34% 34.1%,transparent 34.1% 100%),
    linear-gradient(0deg,transparent 0 24%,rgba(201,154,93,.12) 24% 24.12%,transparent 24.12% 62%,rgba(201,154,93,.09) 62% 62.1%,transparent 62.1% 100%),
    linear-gradient(135deg,transparent 0 23%,rgba(201,154,93,.14) 23% 23.12%,transparent 23.12% 100%),
    radial-gradient(circle at 13% 49%,transparent 0 115px,rgba(201,154,93,.20) 116px 117px,transparent 118px)!important;
}
.hero>.brand,.hero-copy,.hero>.trust{position:relative!important;z-index:2!important}
.hero h1{font-weight:600!important;letter-spacing:-2.4px!important}
.hero-copy>p:last-child{font-weight:400!important;color:#D0D6DB!important}
.eyebrow{font-family:'Manrope',sans-serif!important;color:var(--sx-gold)!important;letter-spacing:1.8px!important}

.form{
  background:
    linear-gradient(90deg,rgba(201,154,93,.08) 0 1px,transparent 1px) 0 0/100% 100%,
    var(--sx-ivory)!important;
}
.form h2{font-weight:650!important;color:var(--sx-midnight)!important}
.form input,.form select,.search input{
  font-family:'Manrope',sans-serif!important;
  border-color:#D9DDDE!important;
  border-radius:9px!important;
  box-shadow:0 1px 0 rgba(13,27,42,.015)!important;
}
.form input:focus,.form select:focus,.search input:focus{
  border-color:var(--sx-gold)!important;
  box-shadow:0 0 0 3px rgba(201,154,93,.13)!important;
}
.specialties button{
  border-radius:11px!important;
  border-color:#DEE1E1!important;
  box-shadow:0 8px 22px rgba(13,27,42,.035)!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
.specialties button:hover{transform:translateY(-2px);border-color:rgba(201,154,93,.65)!important;box-shadow:0 12px 28px rgba(13,27,42,.065)!important}
.specialties button.selected{
  background:linear-gradient(145deg,var(--sx-midnight),#153650)!important;
  border-color:rgba(201,154,93,.32)!important;
  box-shadow:inset 3px 0 0 var(--sx-gold),0 12px 28px rgba(13,27,42,.11)!important;
}
.primary{
  border-radius:9px!important;
  background:linear-gradient(135deg,var(--sx-midnight),#163A55)!important;
  box-shadow:0 9px 24px rgba(13,27,42,.14)!important;
  font-weight:700!important;
}

/* DASHBOARD — estrutura de produto da mesma família visual */
.dashboard{background:var(--sx-ivory)!important}
.dashboard aside{
  position:sticky!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 15% 5%,rgba(201,154,93,.08),transparent 22%),
    linear-gradient(180deg,#081725 0%,var(--sx-midnight) 62%,#091927 100%)!important;
  border-right:1px solid rgba(201,154,93,.16)!important;
}
.dashboard aside::before{
  content:'';
  position:absolute;
  width:225px;
  height:300px;
  left:-92px;
  bottom:105px;
  background:url('/serventiax-symbol.svg') center/contain no-repeat;
  opacity:.055;
  z-index:-1;
}
.dashboard aside::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    linear-gradient(90deg,transparent 0 35%,rgba(201,154,93,.10) 35% 35.3%,transparent 35.3%),
    linear-gradient(145deg,transparent 0 67%,rgba(201,154,93,.09) 67% 67.25%,transparent 67.25%);
}
.nav{border-radius:8px!important;font-family:'Manrope',sans-serif!important;font-weight:600!important}
.nav.active,.nav:hover{background:linear-gradient(90deg,rgba(201,154,93,.17),rgba(255,255,255,.045))!important}
.nav.active{box-shadow:inset 3px 0 0 var(--sx-gold)!important}
.nav-title{color:#8698A7!important;letter-spacing:1.6px!important}
.office-mini{border-color:rgba(201,154,93,.25)!important;background:rgba(255,255,255,.025)!important;border-radius:10px!important}

.workspace{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:
    linear-gradient(180deg,#FBFBF9 0%,var(--sx-ivory) 280px)!important;
}
.workspace::before{
  content:'';
  position:absolute;
  width:430px;
  height:570px;
  right:-115px;
  top:-165px;
  background:url('/serventiax-symbol.svg') center/contain no-repeat;
  opacity:.025;
  z-index:-2;
  pointer-events:none;
}
.workspace::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-3;
  background:
    linear-gradient(90deg,transparent 0 82%,rgba(201,154,93,.08) 82% 82.07%,transparent 82.07%),
    linear-gradient(155deg,transparent 0 19%,rgba(201,154,93,.045) 19% 19.07%,transparent 19.07%);
}
.workspace>*{position:relative;z-index:1}
.topbar{padding-bottom:22px!important;border-bottom:1px solid rgba(13,27,42,.075)!important}
.workspace h1{font-weight:600!important;color:var(--sx-midnight)!important;letter-spacing:-1.4px!important}
.trust.light{background:rgba(255,255,255,.82)!important;backdrop-filter:blur(8px);border-radius:9px!important}

.summary-grid article{
  position:relative!important;
  overflow:hidden!important;
  border-radius:11px!important;
  border-color:rgba(13,27,42,.085)!important;
  box-shadow:0 8px 22px rgba(13,27,42,.035)!important;
}
.summary-grid article::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--sx-gold-light),var(--sx-gold-dark));
}
.summary-grid strong{font-family:'Manrope',sans-serif!important;color:var(--sx-midnight)!important;font-weight:700!important}

.section-head h2{font-weight:650!important;color:var(--sx-midnight)!important}
.cards article{
  position:relative!important;
  overflow:hidden!important;
  border-radius:12px!important;
  border-color:rgba(13,27,42,.085)!important;
  box-shadow:var(--sx-shadow)!important;
  transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease!important;
}
.cards article:hover{transform:translateY(-3px);border-color:rgba(201,154,93,.48)!important;box-shadow:0 18px 42px rgba(13,27,42,.09)!important}
.cards article::after{
  content:'';
  position:absolute;
  width:110px;height:145px;
  right:-40px;bottom:-48px;
  background:url('/serventiax-symbol.svg') center/contain no-repeat;
  opacity:.018;
  pointer-events:none;
}
.cards .icon,.icon.large{border-radius:10px!important;background:#F1EBE1!important;color:#966A37!important}
.cards article:nth-child(3n+2) .icon{background:#E6F5F5!important;color:#087E81!important}
.cards button{color:#8D632F!important;font-weight:700!important}

.compliance-banner{
  position:relative!important;
  overflow:hidden!important;
  border-radius:12px!important;
  background:
    linear-gradient(100deg,var(--sx-midnight),#143852)!important;
  border:1px solid rgba(201,154,93,.19)!important;
}
.compliance-banner::after{
  content:'';
  position:absolute;
  width:150px;height:200px;
  right:20px;top:-55px;
  background:url('/serventiax-symbol.svg') center/contain no-repeat;
  opacity:.075;
}
.compliance-banner> *{position:relative;z-index:1}

/* Modais e componentes */
.module-modal{border-radius:16px!important;border:1px solid rgba(13,27,42,.08)!important;box-shadow:0 30px 90px rgba(7,20,32,.25)!important}
.feature-list div{border-radius:9px!important}
.status-box{border:1px solid #E5E5E1!important;background:#FAF9F5!important;border-radius:10px!important}

/* Acessibilidade de movimento */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

@media(max-width:860px){
  .hero::before{width:260px!important;height:350px!important;right:-75px!important;opacity:.08!important}
  .workspace::before{width:300px;height:400px;right:-110px;top:-120px}
  .dashboard aside{position:static!important}
}