/* Fato & Ordem — identidade visual oficial 2026 */
:root{
  --fo-black:#050505;
  --fo-charcoal:#0d0d0e;
  --fo-charcoal-2:#141416;
  --fo-white:#f7f7f5;
  --fo-muted:#8f9095;
  --fo-line:rgba(255,255,255,.11);
  --fo-orange:#ff5a00;
  --fo-orange-soft:#ff6a1a;
  --fo-shadow:0 24px 70px rgba(0,0,0,.34);
}

/* Unifica todas as campanhas na nova identidade preto/branco/laranja. */
body.campaign,
body.campaign.theme-orange,
body.campaign.theme-blue,
body.campaign.theme-green,
body.campaign.theme-violet{
  --accent:var(--fo-orange)!important;
  --accent2:var(--fo-orange-soft)!important;
  --accent-rgb:255,90,0!important;
  --bg:var(--fo-black)!important;
  --panel:var(--fo-charcoal)!important;
  --panel-2:var(--fo-charcoal-2)!important;
  --text:var(--fo-white)!important;
  --muted:var(--fo-muted)!important;
  --line:var(--fo-line)!important;
  background:var(--fo-black)!important;
}

body.sales-page{
  --bg:var(--fo-black)!important;
  --panel:var(--fo-charcoal)!important;
  --panel2:var(--fo-charcoal-2)!important;
  --line:var(--fo-line)!important;
  --text:var(--fo-white)!important;
  --muted:var(--fo-muted)!important;
  --orange:var(--fo-orange)!important;
  --red:var(--fo-orange-soft)!important;
  --grad:linear-gradient(100deg,var(--fo-orange),var(--fo-orange-soft))!important;
  background:var(--fo-black)!important;
}

/* Marca principal: mantém o nome acessível no HTML, mas troca o desenho visual. */
.wordmark,
.brand{
  position:relative!important;
  display:inline-block!important;
  width:218px!important;
  min-width:218px!important;
  height:44px!important;
  padding:0!important;
  margin:0!important;
  background:url('/assets/logo-fato-ordem-on-dark.svg') left center/contain no-repeat!important;
  font-size:0!important;
  line-height:0!important;
  letter-spacing:0!important;
  text-decoration:none!important;
  flex:none!important;
}
.wordmark small,
.brand small,
.brand-mark{display:none!important}
.brand>span:not(.brand-mark){font-size:0!important;line-height:0!important}

.site-header,
.topbar{
  background:rgba(5,5,5,.94)!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  backdrop-filter:blur(18px)!important;
}
.site-header{min-height:78px!important}
.topbar .shell{min-height:76px!important}

.nav a:not(.button):not(.btn){color:#b2b2b5!important}
.nav a:not(.button):not(.btn):hover{color:#fff!important}

.button,
.btn{
  border-radius:8px!important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease!important;
}
.button.primary,
.btn.primary{
  background:var(--fo-orange)!important;
  color:#fff!important;
  border:1px solid var(--fo-orange)!important;
  box-shadow:0 12px 30px rgba(255,90,0,.18)!important;
}
.button.primary:hover,
.btn.primary:hover{
  transform:translateY(-1px)!important;
  background:#ff6818!important;
  border-color:#ff6818!important;
  box-shadow:0 16px 34px rgba(255,90,0,.24)!important;
}
.button.secondary,
.btn.ghost{
  background:#0a0a0b!important;
  border-color:rgba(255,255,255,.18)!important;
}
.button.secondary:hover,
.btn.ghost:hover{border-color:rgba(255,90,0,.58)!important}

/* Hero com geometria inspirada no novo símbolo. */
body.sales-page .hero,
body.campaign .hero{
  position:relative!important;
  background:
    linear-gradient(120deg,rgba(255,90,0,.07),transparent 34%),
    radial-gradient(circle at 78% 18%,rgba(255,90,0,.08),transparent 28rem),
    #060606!important;
}
body.sales-page .hero:after,
body.campaign .hero:after{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  right:4vw!important;
  top:46px!important;
  width:128px!important;
  height:128px!important;
  border-top:24px solid rgba(255,90,0,.15)!important;
  border-left:24px solid rgba(255,90,0,.15)!important;
  pointer-events:none!important;
}
body.sales-page .hero-grid,
body.campaign .hero-grid{position:relative!important;z-index:1!important}

.kicker,
.eyebrow{
  border-radius:4px!important;
  color:#ff7a32!important;
  border-color:rgba(255,90,0,.45)!important;
  background:rgba(255,90,0,.055)!important;
}
.gradient,
.hero h1 em{
  color:var(--fo-orange)!important;
  background:none!important;
  -webkit-text-fill-color:initial!important;
}

/* Painéis e cartões: mais editoriais, menos “app genérico”. */
.experience,
.visual,
.dashboard,
.exam-callout,
.whatsapp-card,
.conversion,
.plan.featured{
  border-color:rgba(255,90,0,.28)!important;
  box-shadow:var(--fo-shadow)!important;
}
.experience{background:linear-gradient(135deg,var(--fo-orange),rgba(255,255,255,.10) 38%,#202024)!important}
.card,
.step,
.method article,
.features article,
.plan,
.faq details,
.flow article,
.dash-card,
.metric,
.question,
.bubble{
  border-radius:10px!important;
}
.card,
.step,
.method article,
.features article,
.plan,
.faq details{
  background:linear-gradient(150deg,#131315,#0c0c0d)!important;
}
.card,
.step,
.features article,
.method article,
.plan{position:relative!important;overflow:hidden!important}
.card:after,
.step:after,
.features article:after,
.method article:after,
.plan:after{
  content:"";
  position:absolute;
  right:-1px;
  top:-1px;
  width:28px;
  height:28px;
  border-top:4px solid rgba(255,90,0,.32);
  border-right:4px solid rgba(255,90,0,.32);
  pointer-events:none;
}

.label,
.status,
.launch{color:#ff7430!important}
.num,
.step b,
.progress i,
.bar i{background:var(--fo-orange)!important}
.card .icon{border-radius:4px!important;background:rgba(255,90,0,.10)!important;color:#ff7430!important}
.micro span:before,
.trust span:before{background:var(--fo-orange)!important;box-shadow:none!important}

/* Provas/estatísticas e alternância de seções. */
.proof{background:#090909!important}
.section.alt{background:#090909!important}
.proof strong,.proof-item strong{letter-spacing:-.02em!important}

/* Precificação: identidade alterada, valores intactos. */
.plan.featured{
  background:linear-gradient(180deg,rgba(255,90,0,.07),transparent 34%),#111112!important;
}
.plan-tag{
  color:#ff7d38!important;
  background:rgba(255,90,0,.09)!important;
  border:1px solid rgba(255,90,0,.18)!important;
}
.reference del{text-decoration-color:#ff6a1a!important}

/* Rodapé e assinatura de marca. */
.sales-footer,
.footer{background:#050505!important;border-top-color:rgba(255,255,255,.09)!important}
.sales-footer:before,
.footer:before{
  content:"";
  display:block;
  width:44px;
  height:5px;
  margin:0 0 24px;
  background:var(--fo-orange);
}

/* Foco e acessibilidade. */
a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline:3px solid rgba(255,90,0,.55)!important;
  outline-offset:3px!important;
}

@media(max-width:700px){
  .wordmark,.brand{width:174px!important;min-width:174px!important;height:36px!important}
  .site-header{min-height:66px!important}
  .topbar .shell{min-height:64px!important}
  body.sales-page .hero:after,
  body.campaign .hero:after{width:84px!important;height:84px!important;border-width:16px!important;right:-18px!important;top:24px!important}
}