/* ============ tokens ============ */
:root{
  color-scheme: light;
  --bg:#fbf7f5; --surface:#ffffff; --surface2:#f3edeb; --border:#e4dbda;
  --fg:#131318; --muted:#5c525a; --faint:#726770;
  --acao:#c42465; --pulso:#e8317a; --brasa:#ff5a36;
  --amora:#b03a72; --rascunho:#d8b6c6; --gota:#00d5c4;
  --ok:#16a34a; --warn:#d97706; --err:#dc2626; --info:#2563eb;
  --t300:#5c525a; --t400:#5c525a;
  --r:12px;
  --maxw:1180px;
}
.breu{
  --bg:#fbf7f5; --surface:#ffffff; --surface2:#f3edeb; --border:#e4dbda;
  --fg:#131318; --muted:#5c525a; --faint:#726770;
  --acao:#e8317a; --amora:#b03a72; --rascunho:#d8b6c6;
  --ok:#16a34a; --warn:#d97706; --err:#dc2626; --info:#2563eb;
  background:var(--bg); color:var(--fg);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Open Sans",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit}
button{font:inherit; color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px; width:100%}
.narrow{max-width:820px}

/* ============ tipografia ============ */
.ov{
  font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.18em;
  color:var(--acao); margin:0 0 14px;
}
h1{
  font-family:"Unbounded",sans-serif; font-weight:800;
  font-size:clamp(30px,5.2vw,58px); line-height:1.04; letter-spacing:-.025em;
  margin:0 0 20px; max-width:17ch;
}
h2{
  font-family:"Unbounded",sans-serif; font-weight:600;
  font-size:clamp(24px,3.6vw,40px); line-height:1.12; letter-spacing:-.02em;
  margin:0 0 16px; max-width:22ch;
}
h3{
  font-family:"Unbounded",sans-serif; font-weight:600;
  font-size:clamp(20px,2.2vw,24px); line-height:1.2; letter-spacing:-.015em;
  margin:0 0 10px;
}
h4{
  font-family:"Red Hat Display",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; font-size:13px;
  margin:0 0 8px; color:var(--fg);
}
.lead{font-size:clamp(16px,1.5vw,19px); color:var(--muted); margin:0; max-width:62ch}
.rosa{color:var(--acao)}
.num{
  font-family:"Exo 2",sans-serif; font-weight:700; font-style:italic;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.mono-nota{font-size:12.5px; color:var(--faint)}

/* ============ nav ============ */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(251,247,245,.86); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent; transition:border-color .2s ease, background .2s ease;
}
.nav.fix{border-bottom-color:var(--border)}
.nav-in{display:flex; align-items:center; gap:20px; height:64px}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.marca svg{width:26px; height:26px}
.marca b{font-family:"Unbounded",sans-serif; font-weight:600; font-size:20px; letter-spacing:-.02em}
.nav-links{display:flex; gap:22px; margin-left:auto; align-items:center}
.nav-links a{
  text-decoration:none; font-size:14px; color:var(--muted); font-weight:600;
  padding:6px 0; border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
}
.nav-links a:hover{color:var(--fg); border-bottom-color:var(--pulso)}
/* `.nav-links a` tem especificidade 0-1-1 e atropelava `.btn-1` e `.btn-sm`,
   que são 0-1-0: o CTA do topo herdava a cor cinza do link de menu e perdia o
   padding lateral, então o texto encostava na borda da pílula. Reponha os três
   valores num seletor da mesma força. */
.nav-links a.btn{padding:8px 15px; border-bottom:0}
.nav-links a.btn-1,.nav-links a.btn-1:hover{color:#fff}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; border:1px solid transparent; text-decoration:none;
  font-weight:700; font-size:14px; padding:11px 20px; cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-1{background:var(--acao); color:#fff}
.btn-1:hover{background:#a91d55}
.breu .btn-1{background:var(--acao); color:#fde7ef}
.breu .btn-1:hover{background:#ff5a97}
.btn-2{background:transparent; color:var(--fg); border-color:var(--border)}
.btn-2:hover{border-color:var(--fg)}
.btn-sm{padding:8px 15px; font-size:13px}
.nav-cta{margin-left:6px}
.burger{
  display:none; margin-left:auto; width:40px; height:40px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface); cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.burger i{display:block; width:16px; height:2px; background:var(--fg); border-radius:2px}

/* ============ hero ============ */
.hero{position:relative; overflow:hidden; padding:64px 0 0}
/* Bloco de cima do hero: é ele que a Faixa preenche. Existe para separar a
   área do grafismo da barra de conectores, que fica no mesmo <section>. */
.hero-topo{position:relative; overflow:hidden}
.faixa-capa{
  position:absolute; right:0; bottom:0; width:min(33%,470px); height:76%;
  opacity:.9; pointer-events:none; z-index:0;
}
/* No hero a Faixa é uma banda que atravessa a página inteira. Ancorada só no
   terço direito, o recorte cortava os traços com uma ponta reta no meio do
   creme, e o manual proíbe a Faixa terminar dentro da página: ela entra por uma
   borda e sai por outra. O recorte retrato do kit também não serve numa banda
   larga, porque `slice` amplia pela largura e sobra uma fatia de ~20 unidades
   de altura, onde só um dos três traços cabe. Geometria própria, então. */
/* `width:auto` aqui NÃO vale: SVG é elemento substituído e resolve a largura
   pela proporção intrínseca do viewBox (182 × 1440/220 = 1191px), ignorando o
   par left/right. A banda parava a 250px da borda direita. */
/* A banda do hero NÃO usa recorte. Com `slice` a altura visível do quadro muda
   a cada largura de tela (mais largo = mais zoom = menos altura), então ora
   sobrava um traço, ora ele era cortado ao meio, e a rampa saía por uma borda
   diferente em cada monitor. Em fluxo normal, com a altura saindo da proporção
   do viewBox, o grafismo é sempre o mesmo desenho inteiro: entra pela esquerda
   e sai pela direita, em qualquer largura. */
.hero .faixa-capa{position:static; display:block; width:100%; height:auto; opacity:1}
/* A banda ocupa a base do hero, e o manual proíbe texto assentado sobre o
   trecho de gradiente. O conteúdo reserva a altura dela mais uma folga. */
.hero-in{position:relative; z-index:1; display:grid; gap:34px; padding-bottom:34px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 12px}
.hero-micro{font-size:13.5px; color:var(--faint); margin:0}
.hero-faixas{display:flex; gap:8px; margin:0 0 22px}
.hero-faixas span{height:6px; border-radius:99px; display:block}

/* faixa de conectores */
.conect-bar{
  position:relative; z-index:1;
  margin-top:52px; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--surface); padding:18px 0;
}
.conect-row{display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; justify-content:center}
.conect-row span{
  font-family:"Red Hat Display",sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.conect-row span i{color:var(--t300); font-style:normal}

/* ============ seções ============ */
section{position:relative}
.sec{padding:78px 0}
.sec-tit{max-width:760px; margin-bottom:38px}
.sec-tit .lead{margin-top:14px}
.linha{height:1px; background:var(--border); border:0; margin:0}

/* três faixas */
.faixas{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:22px; position:relative; overflow:hidden;
}
.card .traco{height:6px; border-radius:99px; width:64px; margin-bottom:16px; display:block}
.card p{margin:0; color:var(--muted); font-size:14.5px}
.card .kk{font-family:"Red Hat Display",sans-serif; font-weight:900; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:6px}
.faixa-fecho{
  margin-top:18px; border:1px solid var(--border); border-radius:var(--r);
  background:var(--surface2); padding:18px 22px; font-size:15px; color:var(--muted);
}
.faixa-fecho b{color:var(--fg)}


/* ============ moldura de janela (o terminal de operação) ============ */
.mk{
  border:1px solid #e4dbda; border-radius:var(--r); overflow:hidden;
  background:#fbf7f5; color:#131318; font-size:12.5px; line-height:1.5;
}
.mk-bar{
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  background:#f3edeb; border-bottom:1px solid var(--border);
}
.mk-dots{display:flex; gap:6px; flex:none}
.mk-dots i{width:9px; height:9px; border-radius:50%; display:block; background:#d8cfd0}
.mk-dots i:nth-child(1){background:#d8cfd0}
.mk-url{
  flex:1; min-width:0; max-width:440px; margin:0 auto; text-align:center;
  background:#fbf7f5; border:1px solid #e4dbda; border-radius:999px;
  padding:4px 12px; font-size:11px; color:#5c525a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mk-tag{
  flex:none; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#726770;
}
.mk-scroll{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch}
.mk-min{min-width:900px}
.mk-min-sm{min-width:720px}
.mk-body{display:flex; align-items:stretch}

/* sidebar do produto */
.mk-side{
  width:176px; flex:none; border-right:1px solid var(--border);
  padding:12px 10px; background:#ece5e3;
}
.mk-brand{display:flex; align-items:center; gap:8px; padding:2px 6px 14px}
.mk-brand svg.sym{width:20px; height:20px}
.mk-brand b{font-family:"Red Hat Display",sans-serif; font-weight:700; font-size:13px; letter-spacing:-.01em}
.mk-i{
  display:flex; align-items:center; gap:9px; padding:5px 8px; border-radius:8px;
  color:#5c525a; font-size:12px; font-weight:700; position:relative; margin-bottom:1px;
}
.mk-i svg{width:14px; height:14px; flex:none; stroke:currentColor; fill:none; stroke-width:1.6}
/* Chevron do grupo: 14px no produto, gira 180° quando o grupo está aberto. */
.mk-i svg.chev{width:10px; height:10px; margin-left:auto; opacity:.5; stroke-width:2}
.mk-i.on svg.chev{opacity:1; transform:rotate(180deg)}
/* Cabeçalho de grupo com filho ativo: rosa + barra de acento, SEM fundo. O
   retângulo --surface-2 é só da folha de topo (Visão geral, Assistente,
   Sugestões App), por isso ele mora na classe .folha e não aqui. */
.mk-i.on{color:#c42465}
.mk-i.on.folha{background:#f3edeb}
.mk-i.on::before{
  content:""; position:absolute; left:-10px; top:6px; bottom:6px; width:3px;
  border-radius:0 3px 3px 0; background:var(--pulso);
}
/* Sub-lista: recuo de 17px, filete de 1px e 11px de respiro, como o .nav-sub. */
.mk-sub{margin:3px 0 5px 17px; padding-left:11px; border-left:1px solid #e4dbda; display:grid; gap:2px}
.mk-sub a{display:block; color:#726770; font-size:11.5px; font-weight:500; padding:2px 0; text-decoration:none}
.mk-sub a.on{color:#c42465; font-weight:700}

/* área de conteúdo */
.mk-main{flex:1; min-width:0; padding:16px 18px 18px}
.mk-head{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.mk-crumb{font-size:10.5px; color:#726770; letter-spacing:.06em; text-transform:uppercase; margin-bottom:5px}
.mk-h{font-family:"Unbounded",sans-serif; font-weight:600; font-size:20px; letter-spacing:-.02em; margin:0; text-transform:none; color:#131318}
/* Escopado no .mk de propósito: `.step p` tem especificidade 0-1-1 e atropela
   qualquer classe de 0-1-0 dentro de uma etapa, jogando todo parágrafo do
   mockup para 15,5px com max-width de 62ch. Dentro do terminal isso não vale. */
.mk .mk-sub-h{color:#5c525a; font-size:12px; margin:4px 0 0; max-width:none}
.mk-right{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.mk-cta{
  background:#e8317a; color:#fde7ef; border:0; border-radius:8px; padding:6px 12px;
  font-size:11.5px; font-weight:700; cursor:pointer;
}
.mk-ghost{
  background:transparent; color:#131318; border:1px solid #e4dbda; border-radius:8px;
  padding:6px 12px; font-size:11.5px; font-weight:600; cursor:pointer;
}
.mk-ghost:hover{border-color:#726770}

/* pílulas de estado */
.pill{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.01em; border:1px solid; white-space:nowrap;
}
.pill::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor}
.p-ok{color:#166534; border-color:rgba(74,222,128,.32); background:rgba(74,222,128,.1)}
.p-warn{color:#92400e; border-color:rgba(251,191,36,.32); background:rgba(251,191,36,.1)}
.p-err{color:#991b1b; border-color:rgba(248,113,113,.32); background:rgba(248,113,113,.1)}
.p-info{color:#1d4ed8; border-color:rgba(96,165,250,.32); background:rgba(96,165,250,.1)}
.p-mut{color:#5c525a; border-color:#e4dbda; background:#ffffff}
/* tom pink do StatusPill do kit: é ele que marca "Aprovado" na tela pública */
.p-rosa{color:#c42465; border-color:rgba(232,49,122,.34); background:rgba(232,49,122,.12)}

/* tabelas do produto */
.tb{width:100%; border-collapse:collapse; font-size:11.5px}
.tb th{
  text-align:left; font-family:"Red Hat Display",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; font-size:9.5px; color:#726770;
  padding:8px 10px; border-bottom:1px solid #e4dbda; white-space:nowrap;
}
.tb td{padding:9px 10px; border-bottom:1px solid #ffffff; vertical-align:middle; color:#3a3038}
.tb tr:hover td{background:#ffffff}
.tb .st{color:#131318; font-weight:600}
.plat{
  display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:#5c525a;
  white-space:nowrap;
}
.plat b{width:16px; height:16px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; font-size:8px; font-weight:800; color:#fbf7f5}
.b-ig{background:#5c525a}
.b-fb{background:#726770; color:#131318}
.b-li{background:#00d5c4}
.b-tt{background:#5c525a}

/* abas dentro do mockup */
.mk-tabs{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; border-bottom:1px solid #e4dbda; padding-bottom:10px}
.mk-tab{
  background:transparent; border:1px solid #e4dbda; border-radius:999px; color:#5c525a;
  padding:5px 12px; font-size:11px; font-weight:700; cursor:pointer;
}
.mk-tab[aria-pressed="true"]{background:#fde7ef; border-color:#e8317a; color:#c42465}

/* kpis dentro do mockup */
.kpis{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.kpi{border:1px solid #e4dbda; border-radius:10px; padding:11px 12px; background:#ffffff}
.kpi .lab{font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:#726770; font-family:"Red Hat Display",sans-serif; font-weight:700}
.kpi .val{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; letter-spacing:-.04em; font-size:24px; line-height:1.15; margin-top:4px}
.kpi .var{font-size:10.5px; color:#166534; font-weight:700}
.kpi .var.dn{color:#991b1b}
.kpi .var.fonte{color:#5c525a; font-weight:600}

/* ============ calculadora ============ */
.conta-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
.ctrl{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:22px;
}
.ctrl .campo{padding:16px 0; border-bottom:1px solid var(--border)}
.ctrl .campo:last-child{border-bottom:0; padding-bottom:0}
.campo-top{display:flex; align-items:baseline; gap:10px; margin-bottom:4px}
.campo-top label{font-family:"Red Hat Display",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:12px}
.campo-top .letra{
  width:22px; height:22px; border-radius:6px; background:var(--surface2); color:var(--acao);
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; font-size:12px;
}
.campo .ajuda{font-size:12.5px; color:var(--faint); margin:0 0 12px}
.campo-linha{display:flex; align-items:center; gap:14px}
.campo-linha output{
  font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; letter-spacing:-.04em;
  font-size:26px; min-width:92px; text-align:right; flex:none;
}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:99px;
  background:linear-gradient(90deg,var(--pulso) var(--pct,50%),var(--border) var(--pct,50%));
  outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid var(--acao); cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--acao); cursor:grab;
}
input[type=range]:focus-visible{outline:2px solid var(--acao); outline-offset:6px}
.moeda{display:flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:10px; padding:8px 12px; background:var(--surface2); width:170px}
.moeda span{color:var(--faint); font-size:13px; font-weight:700}
.moeda input{
  border:0; background:transparent; width:100%; font-family:"Exo 2",sans-serif; font-style:italic;
  font-weight:700; font-size:20px; letter-spacing:-.04em; color:var(--fg); outline:none;
}
.resultado{border:1px solid #e4dbda; border-radius:var(--r); overflow:hidden}
.res-top{padding:22px}
.res-l{font-family:"Red Hat Display",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:#726770}
.res-big{
  font-family:"Exo 2",sans-serif; font-style:italic; font-weight:800; letter-spacing:-.045em;
  font-size:clamp(44px,7vw,68px); line-height:1; margin:6px 0 2px;
}
.res-cols{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px}
.res-cel{border:1px solid #e4dbda; border-radius:10px; padding:14px; background:#ffffff}
.res-cel .v{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; letter-spacing:-.04em; font-size:26px; margin-top:3px}
.res-fte{
  border-top:1px solid #e4dbda; padding:16px 22px; background:#ffffff; color:#5c525a; font-size:13px;
}
.res-fte b{color:#131318}
.donde{margin-top:20px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); padding:20px 22px}
.donde ul{list-style:none; margin:12px 0 0; padding:0}
/* Mesmo padrão do kit: régua entre itens, nenhuma acima do primeiro. */
.donde li{display:flex; gap:14px; align-items:baseline; padding:8px 0; font-size:14px; color:var(--muted)}
.donde li + li{border-top:1px solid var(--border)}
.donde li b{
  font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; letter-spacing:-.04em;
  font-size:17px; color:var(--fg); flex:none; width:38px; text-align:right;
}
.donde .tot{border-top:2px solid var(--fg); color:var(--fg); font-weight:700}
.nao-mostra{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px}

/* ============ linha do tempo ============ */
.tl{display:grid; grid-template-columns:212px 1fr; gap:44px; align-items:start}
/* Item de grid nasce com min-width:auto e se RECUSA a encolher abaixo do
   min-content do que carrega. Sem este 0, a coluna das etapas trava na largura
   do mockup mais largo (1062px) e o overflow-x:auto do .mk-scroll lá dentro
   nunca chega a valer: quem estoura é a coluna, não o mockup. No celular a
   jornada inteira era cortada pelo body{overflow-x:hidden}, calada. */
.steps{min-width:0}
.rail{position:sticky; top:88px; align-self:start}
.rail-track{position:absolute; left:9px; top:12px; bottom:12px; width:2px; background:var(--border)}
.rail-fill{position:absolute; left:9px; top:12px; width:2px; background:var(--acao); height:0; transition:height .2s linear}
.rail-box{position:relative}
.rail ol{list-style:none; margin:0; padding:0}
.rail li{position:relative}
.rail button{
  display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left;
  background:none; border:0; padding:9px 0; cursor:pointer; color:var(--faint);
}
.rail .bola{
  width:20px; height:20px; border-radius:50%; border:2px solid var(--border);
  background:var(--bg); flex:none; display:flex; align-items:center; justify-content:center;
  font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; font-size:10px;
  transition:border-color .2s, background .2s, color .2s;
}
.rail .rot{font-size:12.5px; line-height:1.3}
.rail .rot b{display:block; font-size:13px; font-weight:700}
.rail .dt{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; font-size:11.5px; letter-spacing:-.03em}
.rail li.on button{color:var(--fg)}
.rail li.on .bola{border-color:var(--acao); background:var(--acao); color:#fff}
.rail li.pass .bola{border-color:var(--rascunho); background:var(--rascunho); color:#131318}
.rail-pe{margin-top:18px; padding-top:16px; border-top:1px solid var(--border); font-size:12px; color:var(--faint)}

.step{padding:0 0 72px; scroll-margin-top:92px}
.step-top{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.step-n{
  font-family:"Exo 2",sans-serif; font-style:italic; font-weight:800; letter-spacing:-.045em;
  font-size:38px; line-height:1; color:var(--t300);
}
.step-dt{
  font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; letter-spacing:-.03em;
  font-size:16px; color:var(--acao);
}
.step-tela{
  font-family:"Red Hat Display",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:11px; color:var(--faint); margin:0 0 14px;
}
.step p{color:var(--muted); margin:0 0 18px; max-width:62ch; font-size:15.5px}
.step p b{color:var(--fg)}
.holder{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease}
.holder.in{opacity:1; transform:none}

/* Sangria à direita para o mockup da jornada.
   A coluna das etapas tem 882px (1180 do wrap, menos 40 de padding, menos os
   212 do trilho e os 44 de gap), e as telas do produto precisam de 1040 a
   1080. Sem isto, 15% a 18% de cada mockup ficava escondido atrás do
   overflow-x, e o que sumia era justamente a borda direita da tabela.
   O cálculo leva o mockup até 16px da borda da janela: a calha do wrap é
   (100vw - 1180)/2, mais os 20px de padding. Só a partir de 1200px, porque
   abaixo disso o wrap já ocupa a tela inteira e a conta inverteria de sinal,
   encolhendo o mockup em vez de alargar. */
@media (min-width:1200px){
  .holder{margin-right:calc(586px - 50vw)}
}
.cap{
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  font-size:12.5px; color:var(--faint); margin-top:10px;
}
.cap b{color:var(--muted); font-weight:700}
.tl-fecho{
  border:1px solid var(--border); border-radius:var(--r); background:var(--surface);
  padding:26px; margin-top:8px;
}


/* ============ peças internas dos mockups ============ */
.fm-grid{display:grid; grid-template-columns:1.3fr .9fr; gap:14px}
.fm{border:1px solid #e4dbda; border-radius:10px; padding:11px 12px; background:#ffffff; margin-bottom:10px}
.fm:last-child{margin-bottom:0}
.lb{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:#726770;
  font-family:"Red Hat Display",sans-serif; font-weight:700; display:block; margin-bottom:5px;
}
.vl{font-size:12.5px; color:#2a242b}
.vl.sel{display:flex; justify-content:space-between; align-items:center; gap:10px}
.vl.sel span:last-child{color:#726770; font-size:10px}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  border:1px solid #e4dbda; background:#ffffff; color:#5c525a; border-radius:8px;
  padding:4px 9px; font-size:11px; font-weight:700; cursor:pointer;
}
.chip.on{background:#fde7ef; border-color:#e8317a; color:#c42465}
.chip.fixa{cursor:default; font-weight:600}
.verba{border:1px solid #e4dbda; border-radius:10px; padding:13px; background:linear-gradient(180deg,#ffffff,#ffffff)}
.verba .v{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; letter-spacing:-.04em; font-size:30px; line-height:1.1}
.mk-foot{
  margin-top:13px; padding-top:10px; border-top:1px solid #e4dbda; font-size:10.5px; color:#726770;
  display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; align-items:center;
}
.mk-foot b{color:#5c525a}
.mini-stats{display:flex; gap:10px; flex-wrap:wrap}
.ms{border:1px solid #e4dbda; border-radius:9px; padding:7px 11px; background:#ffffff}
.ms .lb{margin-bottom:2px}
.ms .v{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; letter-spacing:-.04em; font-size:17px}

/* ============ Pauta › Painel ============ */
/* O Painel tem cabeçalho próprio (.phead no produto), não o PageHeader do kit:
   overline, título display e um resumo dinâmico à esquerda; período à direita. */
.pn-head{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; margin-bottom:12px}
.pn-ov{
  font-family:"Red Hat Display",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:9.5px; color:#c42465; margin:0 0 5px;
}
.pn-h{font-family:"Unbounded",sans-serif; font-weight:600; font-size:22px; letter-spacing:-.02em; margin:0; color:#131318; text-transform:none}
.pn-resumo{color:#5c525a; font-size:11px; margin:6px 0 0; max-width:56ch; line-height:1.5}
.pn-resumo b{color:#c42465; font-weight:700}
.pn-per{margin-left:auto; text-align:right}
.segmented{display:inline-flex; gap:2px; border:1px solid #e4dbda; background:#ffffff; border-radius:9px; padding:3px}
.segmented button{
  background:transparent; border:0; border-radius:7px; color:#5c525a; font-family:inherit;
  font-size:10.5px; font-weight:700; padding:4px 10px; cursor:pointer;
}
.segmented button.on{background:#e8317a; color:#fde7ef}
.pn-ctx{font-size:10px; color:#726770; margin:7px 0 0}

.pn-kpis{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:13px}
.pn-k{
  flex:1 1 140px; min-width:140px; border:1px solid #e4dbda; border-radius:10px;
  background:#ffffff; padding:8px 11px 9px 13px; position:relative; overflow:hidden;
}
.pn-k::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c,#e8317a)}
.pn-k .v{
  font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; letter-spacing:-.04em;
  font-size:21px; line-height:1.15; margin-top:2px; color:#131318;
}
.pn-k .v small{font-family:"Open Sans",sans-serif; font-style:normal; font-weight:600; font-size:11px; color:#726770; letter-spacing:0}
.pn-k .dica{font-size:9px; color:#726770; margin-top:2px; line-height:1.35}

.pn-hero{
  border:1px solid #e4dbda; border-radius:14px; padding:14px; margin-bottom:4px;
  background:radial-gradient(78% 120% at 0% 0%, rgba(232,49,122,.16), rgba(19,19,24,0.000) 62%), #ffffff;
}
.pn-hero-top{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start; margin-bottom:12px}
.pn-hero-top h6{margin:0; font-family:"Exo 2",sans-serif; font-weight:700; font-size:13.5px; color:#131318}
.pn-hero-top p{margin:4px 0 0; font-size:10px; color:#726770; max-width:58ch; line-height:1.45}
.pn-esc{margin-left:auto; display:grid; gap:4px; justify-items:start}
.pn-esc span{display:flex; align-items:center; gap:5px; font-size:9.5px; color:#5c525a; white-space:nowrap}
.pn-esc i{width:8px; height:8px; border-radius:3px; flex:none}
.pn-esc em{font-style:normal; color:#5c525a}
.pn-quad{display:grid; grid-template-columns:1.25fr 1fr; gap:14px; align-items:start}
/* Item de grid nasce com min-width:auto: sem este 0 a coluna do quadrante trava
   na largura mínima do SVG e o mockup estoura em vez de rolar no .mk-scroll. */
.pn-quad > *{min-width:0}
.pn-leg{display:flex; gap:12px; flex-wrap:wrap; font-size:9px; color:#726770; align-items:center; margin-top:7px}
.pn-leg i{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:4px}
.pn-form{font-size:9px; color:#5c525a; margin:7px 0 0; line-height:1.45}
.pn-call{display:grid; gap:6px; margin-top:12px}
.pn-call div{
  display:flex; gap:8px; align-items:flex-start; border:1px solid #e4dbda; border-radius:9px;
  background:#ffffff; padding:7px 10px; font-size:10px; color:#5c525a; line-height:1.45;
}
.pn-call b{color:#131318; font-weight:700}
.pn-call .ic{
  width:18px; height:18px; border-radius:6px; flex:none; display:flex; align-items:center;
  justify-content:center; font-size:9px; font-weight:800; color:#fbf7f5;
}

.rk-ov{
  font-family:"Red Hat Display",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; font-size:9px; color:#726770; margin:0 0 7px;
}
.rk{
  display:grid; grid-template-columns:15px 24px 1fr auto; gap:8px; align-items:center;
  border:1px solid #e4dbda; border-radius:10px; background:#ffffff; padding:6px 9px; margin-bottom:6px;
}
.rk.lider{background:linear-gradient(90deg, rgba(74,222,128,.14), #ffffff 60%); border-color:rgba(74,222,128,.32)}
.rk .pos{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:800; font-size:13px; letter-spacing:-.04em; text-align:center}
.rk .av{
  width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:800; color:#fbf7f5;
}
.rk .nm{min-width:0}
.rk .nm b{display:block; font-size:11px; font-weight:600; color:#131318; line-height:1.2}
.rk .nm small{display:block; font-size:9px; color:#726770; margin-top:2px}
.rk .idx{text-align:right}
.rk .idx b{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; font-size:16px; letter-spacing:-.04em; display:block; line-height:1}
.rk .idx .pill{margin-top:3px; padding:1px 6px; font-size:9px}
.rk .idx .pill::before{display:none}
.est{letter-spacing:.5px; color:#166534}
.est i{color:#3a3238; font-style:normal}
.rk-nota{font-size:9px; color:#5c525a; margin:2px 0 0; line-height:1.4}

.pn-sec{display:flex; align-items:center; gap:8px; margin:14px 0 8px}
.pn-sec i{width:7px; height:7px; border-radius:50%; display:block; flex:none}
.pn-sec b{font-size:12px; color:#131318}
.pn-sec span{font-size:9.5px; color:#726770}
.pn-an{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:10px}
.pn-an > *{min-width:0}
.pn-c{border:1px solid #e4dbda; border-radius:11px; background:#ffffff; padding:11px 12px}
.pn-c h6{margin:0; font-family:"Exo 2",sans-serif; font-weight:700; font-size:12.5px; color:#131318}
.pn-c .sub{font-size:9.5px; color:#726770; margin:2px 0 10px}
.pn-anel{display:flex; gap:12px; align-items:center}
.pn-kv{display:grid; gap:5px; flex:1; min-width:0}
.pn-kv div{display:flex; justify-content:space-between; gap:8px; font-size:10px; color:#5c525a; border-bottom:1px dashed #e4dbda; padding-bottom:4px}
.pn-kv div:last-child{border-bottom:0; padding-bottom:0}
.pn-kv b{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; letter-spacing:-.03em; font-size:12px; color:#2a242b}
.pn-stack{display:flex; height:30px; border-radius:7px; overflow:hidden}
.pn-stack span{display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:#fbf7f5}
.pn-stleg{display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; margin-top:9px; font-size:9px; color:#5c525a}
.pn-stleg span{display:flex; align-items:center; gap:5px; min-width:0}
.pn-stleg i{width:8px; height:8px; border-radius:3px; flex:none}
.pn-stleg em{font-style:normal; color:#5c525a; margin-left:auto}
.pn-mix{display:grid; gap:7px}
.pn-mix div{display:grid; grid-template-columns:58px 1fr 32px; gap:7px; align-items:center; font-size:9.5px; color:#5c525a}
.pn-mix .trilho{height:7px; border-radius:99px; background:#f3edeb; overflow:hidden}
.pn-mix .trilho i{display:block; height:100%; border-radius:99px}
.pn-mix b{text-align:right; font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; font-size:11px; letter-spacing:-.03em; color:#2a242b}
.pn-solto{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.pn-lc{
  border:1px solid #e4dbda; border-left:3px solid #7c3aed; border-radius:11px; background:#ffffff;
  padding:11px 12px; display:block; text-decoration:none; color:inherit;
}
.pn-lc .top{display:flex; align-items:center; gap:8px}
.pn-lc .ic{width:20px; height:20px; border-radius:6px; flex:none; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:#fbf7f5}
.pn-lc .top b{font-size:11.5px; color:#131318}
.pn-lc .n{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:800; letter-spacing:-.045em; font-size:27px; line-height:1.1; margin-top:5px; color:#131318}
.pn-lc .n small{font-family:"Open Sans",sans-serif; font-style:normal; font-weight:600; font-size:10.5px; color:#726770; letter-spacing:0; margin-left:3px}
.pn-lc p{margin:4px 0 0; font-size:9.5px; color:#726770; line-height:1.45}
.pn-lc .acao{display:block; margin-top:7px; font-size:10px; font-weight:700; color:#c42465}

/* ============ Pauta › Carga de trabalho ============ */
.cgb{border:1px solid #e4dbda; border-radius:11px; background:#ffffff; overflow:hidden}
.cgb-h{display:flex; align-items:center; gap:9px; padding:8px 11px; background:#ffffff; border-bottom:1px solid #e4dbda; flex-wrap:wrap}
.cgb-h svg{width:13px; height:13px; stroke:#e8317a; fill:none; stroke-width:1.7; flex:none}
.cgb-h b{font-family:"Exo 2",sans-serif; font-weight:700; font-size:12.5px; color:#131318}
.cgb-h .leg{margin-left:auto; display:flex; gap:11px; flex-wrap:wrap; font-size:9px; color:#726770}
.cgb-h .leg i{width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:4px}
/* 14 dias: 5 úteis, 2 de fim de semana, 5 úteis, 2 de fim de semana. A coluna de
   fim de semana leva fração 0,34 da útil, como a densidade média do produto. */
.cg{
  display:grid;
  grid-template-columns:150px repeat(5,minmax(50px,1fr)) repeat(2,minmax(20px,.34fr))
                        repeat(5,minmax(50px,1fr)) repeat(2,minmax(20px,.34fr));
}
.cg .hd{
  font-size:8.5px; color:#726770; text-align:center; padding:5px 2px 6px;
  border-bottom:1px solid #e4dbda; border-left:1px solid #ffffff;
  font-family:"Red Hat Display",sans-serif; font-weight:700; line-height:1.25;
}
.cg .hd .dd{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; font-size:15px; letter-spacing:-.04em; color:#2a242b; display:block}
.cg .hd .mes{color:#c42465}
.cg .hd .tot{display:block; font-size:8.5px; color:#5c525a; font-weight:600}
.cg .hd.fds{background:#fbf7f5}
.cg .hd.hoje{box-shadow:inset 0 -2px 0 #e8317a}
.cg .hd.hoje .dd{color:#c42465}
.cg .canto{
  display:flex; align-items:flex-end; padding:5px 8px 6px 0; border-bottom:1px solid #e4dbda;
  font-family:"Red Hat Display",sans-serif; font-weight:700; font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:#726770;
}
.cg .pes{border-bottom:1px solid #ffffff; padding:8px 10px 8px 0; display:flex; gap:8px; align-items:flex-start}
.cg .pes .av{
  width:24px; height:24px; border-radius:7px; flex:none; display:flex; align-items:center;
  justify-content:center; font-size:9px; font-weight:800; color:#fbf7f5;
}
.cg .pes .quem{min-width:0; flex:1}
.cg .pes b{font-size:11px; display:block; color:#131318; line-height:1.2; font-weight:700}
.cg .pes b span{display:block; font-weight:600; color:#5c525a}
.cg .capl{display:flex; align-items:center; gap:6px; margin-top:4px; font-size:9px; color:#726770}
.capn{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; font-size:11px; letter-spacing:-.03em; color:#2a242b}
.cg .trilho{display:block; height:5px; border-radius:99px; background:#f3edeb; margin-top:4px; overflow:hidden}
.cg .trilho i{display:block; height:100%; border-radius:99px}
.cg .cel{
  border-bottom:1px solid #ffffff; border-left:1px solid #ffffff; padding:5px 4px;
  display:flex; flex-direction:column; gap:4px; min-height:62px;
}
.cg .cel.fds{background:#fbf7f5; align-items:center; justify-content:center; color:#4a4048; font-size:11px}
.cg .cel.hoje{background:#ffffff}
/* O chip de horas é medidor e rótulo ao mesmo tempo: barra preenchida na
   proporção da capacidade, com o número escrito por dentro. */
.hchip{
  position:relative; height:19px; border-radius:5px; background:#f3edeb; overflow:hidden; flex:none;
  display:flex; align-items:center; justify-content:flex-end; padding:0 5px;
  font-size:9px; font-weight:700; color:#131318; text-shadow:0 1px 2px rgba(19,19,24,0.108);
}
.hchip i{position:absolute; left:0; top:0; bottom:0}
.hchip span{position:relative}
.h-ocio i{background:rgba(96,165,250,.42)}
.h-ok i{background:rgba(74,222,128,.55)}
.h-lim i{background:#d97706}
.h-sob i{background:#dc2626}
.hlivre{
  height:19px; border-radius:5px; flex:none; display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(74,222,128,.3); background:rgba(74,222,128,.07);
  font-size:8.5px; font-weight:700; color:rgba(74,222,128,.75);
}
/* Barra multi-dia: a atividade atravessa as colunas em faixa. Cada coluna leva
   um pedaço e as margens negativas cobrem o filete da célula, dando emenda. */
.mdb{
  position:relative; z-index:1; height:15px; margin:0 -5px; display:flex; align-items:center; padding:0 5px; flex:none;
  background:rgba(139,92,246,.26); border-top:1px solid rgba(139,92,246,.45);
  border-bottom:1px solid rgba(139,92,246,.45);
  font-size:8px; color:#cfc2f2; white-space:nowrap; overflow:hidden;
}
.mdb.ini{margin-left:-4px; border-left:3px solid #7c3aed; border-radius:5px 0 0 5px; overflow:visible; z-index:3}
.mdb.fim{margin-right:-4px; border-right:1px solid rgba(139,92,246,.45); border-radius:0 5px 5px 0}
.acar{
  border-radius:6px; padding:4px 5px; border-left:3px solid #7c3aed;
  background:rgba(139,92,246,.16); line-height:1.25; flex:none;
}
.acar .cli{display:block; font-size:7.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; margin-bottom:2px}
.acar b{display:block; font-size:8.5px; font-weight:600; color:#131318}
.acar .hrs{display:inline-flex; align-items:center; gap:3px; margin-top:3px; font-size:8px; color:#5c525a}
.acar .hrs svg{width:8px; height:8px; stroke:currentColor; fill:none; stroke-width:2}
.acar.s-ajuste{border-left-color:#F59E0B; background:rgba(245,158,11,.16)}
.acar.s-apint{border-left-color:#E8317A; background:rgba(232,49,122,.16)}
.acar.s-apcli{border-left-color:#3B82F6; background:rgba(59,130,246,.16)}
.acar.s-aberto{border-left-color:#9CA3AF; background:rgba(156,163,175,.15)}
.cg-mais{
  border:0; background:#f3edeb; color:#5c525a; border-radius:5px; padding:2px 0; flex:none;
  font-family:inherit; font-size:8.5px; font-weight:700; cursor:pointer;
}
.cg-baixo{display:grid; grid-template-columns:2fr 1fr; gap:10px; margin-top:12px}
.cg-baixo > *{min-width:0}
.bk{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.bkc{border:1px solid #e4dbda; border-left:3px solid #9CA3AF; border-radius:8px; background:#ffffff; padding:7px 9px}
.bkc .cli{display:block; font-size:7.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; margin-bottom:2px}
.bkc b{display:block; font-size:10px; font-weight:600; color:#131318; line-height:1.3}
.bkc small{font-size:8.5px; color:#726770; display:block; margin-top:3px}
.atr{display:flex; gap:8px; align-items:flex-start; padding:7px 0; border-bottom:1px solid #ffffff}
.atr:last-child{border-bottom:0}
.atr .pt{width:7px; height:7px; border-radius:50%; margin-top:4px; flex:none}
.atr .txt{min-width:0; flex:1}
.atr b{display:block; font-size:10px; font-weight:600; color:#131318; line-height:1.3}
.atr small{font-size:8.5px; color:#726770}
.atr svg{width:12px; height:12px; flex:none; stroke:#d97706; fill:none; stroke-width:1.8; margin-top:2px}
.atr.espera svg{stroke:#726770}
.espera-h{
  font-family:"Red Hat Display",sans-serif; font-weight:700; font-size:8.5px; letter-spacing:.12em;
  text-transform:uppercase; color:#726770; border-top:1px solid #e4dbda; padding-top:8px; margin:8px 0 0;
}
.crono{
  position:absolute; right:16px; bottom:14px; display:flex; align-items:center; gap:9px;
  border:1px solid #e4dbda; border-radius:11px; background:#ffffff; padding:7px 11px;
  box-shadow:0 10px 26px rgba(19,19,24,0.083);
}
.crono .pt{width:7px; height:7px; border-radius:50%; background:#dc2626; flex:none; animation:pulsa 1.6s ease-in-out infinite}
.crono .qq{min-width:0}
.crono .ovr{font-family:"Red Hat Display",sans-serif; font-weight:700; font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:#726770; display:block}
.crono .qq b{font-size:10px; font-weight:600; color:#131318; display:block; margin-top:1px}
.crono .rel{font-family:"Exo 2",sans-serif; font-weight:800; font-size:15px; letter-spacing:-.02em; color:#131318; font-variant-numeric:tabular-nums}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.25}}

/* ============ aprovação do cliente (/aprovar/{token}) ============ */
/* Rota FORA do grupo (app): sem barra lateral, sem cabeçalho do produto. A marca
   que aparece é a da organização dona do link, nunca a da Fluimark. */
.ap-prog{height:2px; background:#f3edeb}
.ap-prog i{display:block; height:100%; background:#e8317a}
.ap-chrome{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding-bottom:12px; border-bottom:1px solid #e4dbda; margin-bottom:13px;
}
.ap-marca{flex:0 1 auto; display:flex; align-items:center; gap:10px; min-width:0}
.ap-div{width:1px; align-self:stretch; background:#f3edeb; flex:none}
/* monograma da conta: gradiente derivado do nome, com as duas iniciais */
.ap-mono{
  width:34px; height:34px; border-radius:9px; flex:none; display:flex; align-items:center;
  justify-content:center; font-family:"Red Hat Display",sans-serif; font-weight:900;
  font-size:12px; letter-spacing:.04em; color:#fef3c7; background:linear-gradient(135deg,#e9c46a,#b8862b);
}
.ap-quem{min-width:0}
.ap-quem b{display:block; font-size:13px; color:#131318; line-height:1.2}
.ap-ctx{display:flex; align-items:center; gap:5px; font-size:9.5px; color:#726770; margin-top:2px}
.ap-ctx svg{width:10px; height:10px; stroke:currentColor; fill:none; stroke-width:1.7; flex:none}
/* O centro do cabeçalho (contador do carrossel + Único/Grade) só existe quando a
   peça em tela é carrossel. A peça de 13/08 é card único, então ele não entra. */
.ap-dir{margin-left:auto; display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap}
.ap-pend{
  display:inline-flex; align-items:center; gap:5px; border:1px solid rgba(251,191,36,.34);
  background:rgba(251,191,36,.1); color:#92400e; border-radius:999px; padding:3px 10px;
  font-size:10.5px; font-weight:700; white-space:nowrap;
}
.ap-pend svg{width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:1.8}
/* a pílula do placar carrega o botão de aprovar em lote dentro dela */
.ap-placar{
  display:inline-flex; align-items:center; gap:9px; border:1px solid #e4dbda; background:#ffffff;
  border-radius:999px; padding:3px 3px 3px 11px; white-space:nowrap;
}
.ap-placar .n{display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; color:#131318}
.ap-placar .n::before{content:""; width:6px; height:6px; border-radius:50%; background:#16a34a}
.ap-placar button{
  border:0; background:#e8317a; color:#fde7ef; border-radius:999px; padding:4px 11px;
  font:inherit; font-size:10px; font-weight:700; cursor:pointer;
}
.ap-tema{
  width:26px; height:26px; border-radius:50%; border:1px solid #e4dbda; background:#ffffff;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
}
.ap-tema svg{width:12px; height:12px; stroke:#5c525a; fill:none; stroke-width:1.7}
/* o trilho de pontos colado na direita: bloco que não cabe vira cápsula, e a
   cápsula enche na proporção do que já foi aprovado naquele canal */
.ap-trilho{
  flex:none; width:36px; border-left:1px solid #ffffff; padding:16px 0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.ap-pt{width:7px; height:7px; border-radius:50%; background:#d8cfd0; flex:none}
.ap-pt.on{background:#e8317a; box-shadow:0 0 0 3px rgba(232,49,122,.22)}
.ap-cap{
  width:7px; border-radius:99px; background:#f3edeb; overflow:hidden; flex:none;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.ap-cap i{display:block; width:100%}
.ap-mais{font-size:8px; font-weight:700; color:#726770}
.ap-et{writing-mode:vertical-rl; font-size:8px; letter-spacing:.06em; color:#5c525a}
/* coluna de leitura da peça */
.ap-ov{display:flex; align-items:center; gap:7px; font-size:10px; color:#5c525a; margin-bottom:7px}
.ap-ov i{width:7px; height:7px; border-radius:50%; display:block; flex:none}
.ap-ov em{font-style:normal; color:#d8cfd0}
.ap-ov .num{margin-left:auto; color:#726770; font-variant-numeric:tabular-nums}
.ap-h{font-family:"Exo 2",sans-serif; font-weight:700; font-size:17px; line-height:1.2; margin:0 0 7px; color:#131318; text-transform:none}
.ap-meta{display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:10px; color:#726770; margin-bottom:9px}
.ap-meta em{font-style:normal; color:#c42465; font-weight:700}
.ap-com{
  display:inline-flex; align-items:center; gap:6px; border:1px solid #e4dbda; background:transparent;
  color:#5c525a; border-radius:8px; padding:8px 13px; font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
.ap-com svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.7}
.ap-com b{
  min-width:15px; height:15px; border-radius:999px; background:#f3edeb; color:#2a242b; font-size:9px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 4px;
}
.ap .ap-bloco{font-size:9.5px; color:#726770; margin:8px 0 0; text-align:center; max-width:none}
.ap{display:grid; grid-template-columns:290px 1fr; gap:18px}
/* item de grid nasce com min-width:auto: sem este 0 a coluna de leitura trava no
   min-content da overline e o mockup estoura em vez de rolar no .mk-scroll */
.ap > *{min-width:0}
.arte{border:1px solid #e4dbda; border-radius:10px; overflow:hidden; background:#ffffff}
.arte-in{
  aspect-ratio:4/5; position:relative; padding:20px; display:flex; flex-direction:column;
  justify-content:space-between;
  background:radial-gradient(130% 95% at 18% 8%,#26523c 0%,#132b1f 48%,#0c1a13 100%);
}
.cr-k{font-family:"Unbounded",sans-serif; font-weight:600; font-size:23px; line-height:1.05; color:#f2efe6; letter-spacing:-.02em}
.cr-s{font-family:"Red Hat Display",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:9px; color:#a9c4b3}
.cr-d{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:800; letter-spacing:-.04em; font-size:34px; color:#e9c46a; line-height:1}
.cr-folha{position:absolute; right:-24px; top:38%; width:130px; opacity:.5}
.legenda{border:1px solid #e4dbda; border-radius:10px; padding:12px; background:#ffffff; font-size:12px; color:#3a3038}
.legenda p{margin:0 0 8px}
.legenda .tags{color:#5c525a}
.coment{border-left:2px solid #e8317a; padding:5px 0 5px 11px; margin-top:10px; font-size:11.5px; color:#5c525a}
.coment b{color:#131318}
.ap-acao{display:flex; gap:9px; flex-wrap:wrap; margin-top:12px; align-items:center}
.bt-ok{background:#16a34a; color:#0b1f12; border:0; border-radius:8px; padding:9px 16px; font-size:12px; font-weight:700; cursor:pointer}
.bt-aj{background:transparent; color:#92400e; border:1px solid rgba(251,191,36,.45); border-radius:8px; padding:9px 16px; font-size:12px; font-weight:700; cursor:pointer}
.bt-ok:disabled,.bt-aj:disabled{opacity:.4; cursor:default}

/* A antiga faixa .pb/.dia/.log saiu junto com o mockup de Publicação: a
   agenda agora é a espinha da semana (.pu-*), e o log virou tela irmã. */
/* ============ relatório mensal (/relatorios-sociais?s=relatorio) ============ */
/* O preview não é uma lista de slides com miniatura ao lado: é uma PILHA vertical
   de cartões 16:9, brancos, com três pretos no meio. É a área que o PDF captura. */
.rl-ctrl{
  display:flex; align-items:flex-end; gap:9px; flex-wrap:wrap; margin-bottom:12px;
  border:1px solid #e4dbda; border-radius:11px; background:#ffffff; padding:10px 12px;
}
.rl-f{display:grid; gap:4px}
.rl-f .lb{margin:0}
.rl-acoes{margin-left:auto; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.pilha{display:grid; gap:10px}
.slide{
  border:1px solid #e4dbda; border-radius:6px; padding:16px 20px; aspect-ratio:16/9;
  display:flex; flex-direction:column; gap:11px; min-height:300px; position:relative;
  overflow:hidden;
}
.slide.claro{background:#fff; color:#1A1A1A; border-color:#cbbfc4}
.slide.escuro{background:#fbf7f5; color:#f7f7f7; border-color:#e4dbda}
.slide-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
/* rótulo de seção: canto superior direito de TODO slide, display light espaçada */
.sl-sec{
  font-family:"Exo 2",sans-serif; font-weight:300; text-transform:uppercase; letter-spacing:.16em;
  font-size:8.5px; color:#726770; white-space:nowrap;
}
/* prefixados com .slide para vencer o `.step p` das etapas, que é 0-1-1 */
.slide .sl-ov{
  font-family:"Red Hat Display",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:9px; color:#c42465; margin:0 0 4px; max-width:none;
}
.slide.escuro .sl-ov{color:#c42465}
.slide h5{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; font-size:23px; letter-spacing:-.03em; margin:0; line-height:1.1}
.slide h5 em{font-style:italic; color:#e8317a}
.slide.escuro h5 em{color:#c42465}
.slide .sl-per{font-size:11px; color:#5c525a; margin:8px 0 0; max-width:none}
.sl-site{margin-top:auto; font-size:9.5px; color:#726770; letter-spacing:.04em}
.sl-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:9px}
.sl-kpis > *{min-width:0}
.sl-k{border:1px solid #2a242b; border-radius:8px; padding:7px 10px 8px}
.slide.escuro .sl-k{border-color:#f3edeb}
.sl-k.dest{border-color:rgba(232,49,122,.45); background:rgba(232,49,122,.07)}
.sl-k .lab{
  display:block; font-family:"Red Hat Display",sans-serif; font-weight:700; font-size:8px;
  letter-spacing:.11em; text-transform:uppercase; color:#726770;
}
.sl-k .v{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; letter-spacing:-.04em; font-size:19px; line-height:1.2; margin-top:2px}
.sl-k .d{font-size:9px; font-weight:700; color:#16a34a}
.sl-k .d.dn{color:#dc2626}
.sl-corpo{display:grid; grid-template-columns:1.62fr .8fr; gap:12px; flex:1; min-height:0}
.sl-corpo > *{min-width:0; min-height:0}
.sl-graf{display:flex; flex-direction:column; min-width:0; min-height:0}
/* o gráfico se encolhe para caber no quadro fixo do slide: com flex e viewBox, o
   SVG escala sozinho e nunca invade os cartões de baixo */
.sl-graf .chart{flex:1 1 0; min-height:0}
.slide .sl-tt{font-family:"Exo 2",sans-serif; font-weight:700; font-size:12px; margin:0; max-width:none}
.slide .sl-st{font-size:9px; color:#6b6268; margin:1px 0 5px; max-width:none}
.sl-leg{display:flex; gap:11px; flex-wrap:wrap; font-size:8.5px; color:#6b6268; margin-top:3px; align-items:center}
.sl-leg i{width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:4px}
.sl-lat{border:1px solid #2a242b; border-radius:8px; padding:8px 10px; display:flex; flex-direction:column}
.slide.escuro .sl-lat{border-color:#f3edeb}
.sl-lat .ln{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:10px; padding:5px 0; border-bottom:1px dashed #ece3e5}
.sl-lat .ln b{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; font-size:12px; letter-spacing:-.03em}
.sl-lat .pe{margin-top:auto; border-top:1px solid #2a242b; padding-top:6px; display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.sl-lat .pe span{font-family:"Red Hat Display",sans-serif; font-weight:700; font-size:8.5px; letter-spacing:.11em; text-transform:uppercase; color:#726770}
.sl-lat .pe b{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; font-size:17px; letter-spacing:-.04em; color:#c42465}
.sl-mini{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.sl-m{border:1px solid #2a242b; border-radius:8px; padding:6px 9px; display:flex; align-items:center; gap:9px; min-width:0}
.sl-m .qq{min-width:0; flex:1}
.sl-m .v{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; font-size:14px; letter-spacing:-.04em}
/* faixa de plataforma do Desempenho da marca, com os quatro contadores */
.sl-faixa{display:flex; align-items:center; gap:9px; flex-wrap:wrap; border-bottom:1px solid #e4dbda; padding-bottom:7px}
.sl-faixa .nm{font-family:"Exo 2",sans-serif; font-weight:700; font-size:12.5px}
.sl-faixa .qt{font-size:9px; color:#726770}
.sl-faixa .cont{margin-left:auto; display:flex; gap:13px; flex-wrap:wrap; font-size:8.5px; color:#726770; align-items:baseline}
.sl-faixa .cont b{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; font-size:12px; letter-spacing:-.03em; margin-right:3px}
.slide.escuro .tb td{border-bottom-color:#e4dbda; color:#dcd6d8}
.slide.escuro .tb th{border-bottom-color:#e4dbda}
.slide.escuro .tb tr:hover td{background:#ffffff}
/* o cartão seguinte da pilha, cortado: é o que prova que o preview continua */
.slide.peek{aspect-ratio:auto; min-height:0; height:268px; overflow:hidden; padding-bottom:0}
.slide.peek::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:40px; pointer-events:none;
  background:linear-gradient(180deg,rgba(19,19,24,0.000),#fbf7f5);
}
.slide.peek.claro::after{background:linear-gradient(180deg,rgba(19,19,24,0),#fff)}
.marca-ag{display:flex; align-items:center; gap:7px; font-size:10px; color:#726770}
.marca-ag i{
  width:20px; height:20px; border-radius:6px; background:#2f7d5b; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:"Red Hat Display",sans-serif; font-size:9px; font-weight:900; letter-spacing:.04em;
  color:#f2efe6; font-style:normal;
}
.slide.claro .marca-ag{color:#5c525a}
.slide.claro .marca-ag i{background:#2f7d5b}
.chart{width:100%; height:auto; display:block}

/* miolo de mockup não muda de grade por viewport: o container tem min-width
   próprio e quem rola é o .mk-scroll, não a página. */


/* ============ Marketing 360 · o cabeçalho do módulo ============ */
/* PageHeader do kit: overline rosa, título Unbounded, subtítulo; à direita o
   SaveStatus, o botão de importar e os três selects Conta, Mês e Ano. */
.pm-head{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:11px}
.pm-ov{
  font-family:"Red Hat Display",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:9.5px; color:#c42465; margin:0 0 5px;
}
.pm-h{font-family:"Unbounded",sans-serif; font-weight:600; font-size:20px; letter-spacing:-.02em; margin:0; color:#131318; text-transform:none}
.pm-sub{color:#5c525a; font-size:11px; margin:5px 0 0}
.pm-acoes{margin-left:auto; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.save{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; color:#166534; white-space:nowrap}
.save i{width:6px; height:6px; border-radius:50%; background:currentColor; display:block}
/* Select nativo do kit: 10px de raio, fundo um degrau acima do card. */
.msel{
  display:inline-flex; align-items:center; gap:6px; border:1px solid #e4dbda; background:#ffffff;
  border-radius:10px; padding:5px 9px; font-size:11px; color:#2a242b; white-space:nowrap;
}
.msel small{
  color:#726770; font-size:8.5px; text-transform:uppercase; letter-spacing:.1em;
  font-family:"Red Hat Display",sans-serif; font-weight:700;
}
.msel svg{width:10px; height:10px; stroke:#726770; fill:none; stroke-width:2}
.mk-ghost svg,.mk-cta svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.8; vertical-align:-2px; margin-right:5px}

/* Abas do kit: filete inferior, aba ativa com traço rosa de 2px. Quebram de
   linha, nunca rolam. O contador vai em bolinha rosa; zero fica cinza. */
.mk-tabs{display:flex; gap:2px; flex-wrap:wrap; margin:0 0 13px; border-bottom:1px solid #e4dbda; padding-bottom:0}
.mk-tab{
  background:transparent; border:0; border-bottom:2px solid transparent; border-radius:0;
  color:#5c525a; padding:6px 9px 7px; font-size:11px; font-weight:700; cursor:default;
  display:inline-flex; align-items:center; gap:6px; font-family:inherit;
}
.mk-tab[aria-pressed="true"],.mk-tab.on{background:transparent; border-bottom-color:#e8317a; color:#131318}
.mk-tab .cnt{
  min-width:15px; height:15px; border-radius:999px; background:#e8317a; color:#fde7ef;
  font-size:9px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; padding:0 4px;
}
.mk-tab .cnt.zero{background:#f3edeb; color:#726770}

/* KPI do kit: faixa de acento de 3px colada na BASE do card. */
.mkpi-g{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:11px}
.mkpi-g > *{min-width:0}
.mkpi{position:relative; border:1px solid #e4dbda; border-radius:11px; background:#ffffff; padding:10px 13px 12px; overflow:hidden}
.mkpi::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--c,#e8317a)}
.mkpi .lab{display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; color:#5c525a}
.mkpi .lab svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.8; flex:none}
.mkpi .val{
  font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; letter-spacing:-.04em;
  font-size:23px; line-height:1.15; margin-top:4px; color:#131318;
}
.mkpi .val small{font-family:"Open Sans",sans-serif; font-style:normal; font-weight:600; font-size:10px; color:#726770; letter-spacing:0; margin-left:3px}
.mkpi .dica{font-size:9.5px; color:#726770; margin-top:3px; line-height:1.4}
.mkpi .duplo{display:flex; align-items:flex-end; gap:12px}
.mkpi .duplo .risco{width:1px; align-self:stretch; background:#f3edeb; margin:2px 0}
.shim{
  display:inline-block; height:11px; width:52px; border-radius:5px; vertical-align:-1px;
  background:linear-gradient(90deg,#f3edeb,#f3edeb,#f3edeb);
}

/* ============ Social Media › Plano de Conteúdo ============ */
.pl-nota{font-size:10.5px; color:#726770; margin:0 0 12px; line-height:1.55; max-width:86ch}
.pl-nota b{color:#131318}
.pl-acc{border:1px solid #e4dbda; border-radius:12px; background:#ffffff; overflow:hidden; margin-bottom:12px}
.pl-acc-h{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; font:inherit; color:#131318;
  background:#ffffff; border:0; padding:8px 12px; cursor:pointer;
}
.pl-acc-h .chev{width:11px; height:11px; stroke:#726770; fill:none; stroke-width:2; flex:none; transition:transform .15s ease}
.pl-acc-h[aria-expanded="true"] .chev{transform:rotate(180deg); stroke:#e8317a}
.pl-acc-h .pmark{width:17px; height:17px; border-radius:5px; flex:none; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:800; color:#fbf7f5}
.pl-acc-h b{font-size:12.5px; font-weight:700}
.pl-acc-h .bdg{border:1px solid rgba(232,49,122,.28); background:rgba(232,49,122,.12); color:#c42465; border-radius:6px; padding:1px 7px; font-size:10px; font-weight:700}
.pl-acc-h .bdg.mut{border-color:#e4dbda; background:#ffffff; color:#5c525a}
.pl-acc-h .ver{margin-left:auto; font-size:9.5px; color:#5c525a; font-weight:600}
.pl-corpo{border-top:1px solid #e4dbda}
.pl-acc .tb tbody tr:nth-child(odd) td{background:rgba(19,19,24,.035)}
.pl-acc .tb tbody tr:hover td{background:rgba(232,49,122,.06)}
.pl-acc .tb{table-layout:fixed}
.pl-acc .tb td{vertical-align:top; padding-top:8px; padding-bottom:8px}
.pl-acc .tb td.cent,.pl-acc .tb th.cent{text-align:center}
/* escopado no acordeão: a trilha da jornada já usa .dt para a data da etapa */
.pl-acc .dt{display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.pl-acc .dt svg{width:11px; height:11px; stroke:#726770; fill:none; stroke-width:1.7; flex:none}
.ed{display:inline-flex; align-items:center; gap:5px; border:1px solid; border-radius:999px; padding:2px 8px; font-size:10px; font-weight:700; white-space:nowrap}
.ed-inst{color:#1d4ed8; border-color:rgba(96,165,250,.34); background:rgba(96,165,250,.13)}
.ed-prod{color:#c42465; border-color:rgba(232,49,122,.34); background:rgba(232,49,122,.13)}
.ed-brand{color:#166534; border-color:rgba(74,222,128,.34); background:rgba(74,222,128,.13)}
.ed-data{color:#92400e; border-color:rgba(251,191,36,.34); background:rgba(251,191,36,.13)}
.camp{display:inline-flex; align-items:center; gap:5px; color:#5c525a; font-size:11px; white-space:nowrap}
.camp svg{width:9px; height:9px; stroke:#5c525a; fill:none; stroke-width:2; flex:none}
.ct{color:#2a242b; line-height:1.4; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ct-vazio{color:#5c525a}
/* A coluna Conteúdo cresce dentro da própria linha: vira textarea de até 220px
   e as outras colunas alinham pelo topo. Só uma linha por vez. */
.ct-open{
  border:1px solid rgba(232,49,122,.45); border-radius:8px; background:#ffffff; padding:7px 9px 20px;
  color:#131318; line-height:1.5; min-height:64px; position:relative;
}
.ct-open .recolher{
  position:absolute; right:5px; bottom:4px; border:0; background:transparent; color:#c42465;
  font:inherit; font-size:9.5px; font-weight:700; cursor:pointer;
}
.fmt{width:14px; height:14px; stroke:#5c525a; fill:none; stroke-width:1.6}
.fmt-vazio{color:#5c525a; font-weight:700}
.cifra{font-family:"Exo 2",sans-serif; font-weight:800; font-size:13px; color:#92400e; font-style:italic}
.cifra.off{color:#726770; opacity:.4}
.ent{font-size:11px; color:#5c525a; font-variant-numeric:tabular-nums}
.ent.ov{
  border:1px solid rgba(232,49,122,.26); background:rgba(232,49,122,.1); color:#c42465;
  border-radius:999px; padding:1px 7px; font-weight:700;
}
.flg{display:inline-flex; gap:4px; align-items:center}
.flg svg{width:12px; height:12px; fill:none; stroke-width:1.7}
.flg-vazio{color:#5c525a; font-weight:700}
.acoes{display:inline-flex; gap:7px; align-items:center; opacity:0}
.pl-acc .tb tr:hover .acoes,.acoes.vis{opacity:1}
.acoes svg{width:12px; height:12px; stroke:#726770; fill:none; stroke-width:1.7}
.pl-fim{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px; background:rgba(19,19,24,0.075); border-top:1px solid #e4dbda}
.pl-add{
  border:1px solid rgba(232,49,122,.42); background:transparent; color:#c42465; border-radius:8px;
  padding:4px 10px; font:inherit; font-size:10.5px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
}
.pl-add svg{width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2}
.pl-tot{
  margin-left:auto; font-family:"Red Hat Display",sans-serif; font-weight:700; font-size:9px;
  letter-spacing:.11em; text-transform:uppercase; color:#726770;
}
.pl-tot b{color:#2a242b}
.pl-ativar{
  border:1px solid #e4dbda; border-radius:11px; padding:9px 12px; display:flex; gap:9px;
  align-items:center; flex-wrap:wrap;
}
.pl-ativar .lb{margin:0}

/* ============ Social Media › Publicação ============ */
.pu-aviso{
  display:flex; gap:9px; align-items:flex-start; border:1px solid rgba(251,191,36,.32);
  background:rgba(251,191,36,.07); border-radius:11px; padding:8px 12px; font-size:10.5px;
  color:#2a242b; margin-bottom:10px; line-height:1.5;
}
.pu-aviso svg{width:13px; height:13px; stroke:#d97706; fill:none; stroke-width:1.8; flex:none; margin-top:1px}
.pu-aviso a{color:#c42465; font-weight:700; text-decoration:none}
.pu-res{display:flex; flex-wrap:wrap; border:1px solid #e4dbda; border-radius:12px; background:#ffffff; margin-bottom:12px}
.pu-res > div{padding:10px 14px; border-left:1px solid #e4dbda; min-width:0}
.pu-res > div:first-child{border-left:0}
.pu-lab{
  display:block; font-family:"Red Hat Display",sans-serif; font-weight:700; font-size:9px;
  letter-spacing:.11em; text-transform:uppercase; color:#726770; margin-bottom:6px;
}
.pu-big{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; letter-spacing:-.04em; font-size:26px; line-height:1}
.pu-big small{font-family:"Open Sans",sans-serif; font-style:normal; font-weight:600; font-size:10px; color:#726770; letter-spacing:0; display:block; margin-top:2px}
.pu-barra{display:flex; height:8px; border-radius:999px; overflow:hidden; background:#f3edeb; min-width:186px}
.pu-barra span{display:block; height:100%}
.pu-barra .mao{background-color:#f3edeb; background-image:repeating-linear-gradient(45deg,rgba(162,150,154,.55) 0 2px,transparent 2px 5px)}
.pu-leg{display:flex; gap:11px; flex-wrap:wrap; font-size:9px; color:#5c525a; margin-top:8px; align-items:center}
.pu-leg i{width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:4px; vertical-align:0}
.pu-leg em{font-style:normal; color:#5c525a}
/* rota à mão: quadrado tracejado com hachura diagonal, nunca uma cor chapada */
.hach{
  background-image:repeating-linear-gradient(45deg,rgba(162,150,154,.5) 0 2px,transparent 2px 5px);
  border:1px dashed #726770; border-radius:2px; width:8px; height:8px; display:inline-block;
  margin-right:4px; vertical-align:-1px;
}
.pu-perigo{background:rgba(248,113,113,.07); border-radius:0 12px 12px 0}
.pu-perigo b{display:block; font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; font-size:17px; color:#991b1b; letter-spacing:-.03em}
.pu-perigo p{margin:3px 0 0; font-size:9.5px; color:#5c525a; line-height:1.5}
.pu-chips{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.rchip{
  border:1px solid #e4dbda; background:#ffffff; color:#5c525a; border-radius:999px;
  padding:4px 11px; font:inherit; font-size:10.5px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.rchip b{color:#131318; font-variant-numeric:tabular-nums}
.rchip svg{width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:1.8}
.rchip.on{border-color:rgba(232,49,122,.45); background:rgba(232,49,122,.15); color:#c42465}
.rchip.on b{color:#c42465}
.rchip.perigo{border-color:rgba(248,113,113,.45); color:#991b1b}
.rchip.perigo b{color:#991b1b}
.pu-risco{width:1px; height:18px; background:#f3edeb; margin:0 3px}
.pu-sem{display:flex; align-items:center; gap:10px; margin:0 0 9px}
.pu-sem b{font-size:11.5px; color:#131318; white-space:nowrap}
.pu-sem i{flex:1; height:1px; background:#f3edeb; display:block}
.pu-sem span{font-size:9.5px; color:#726770; white-space:nowrap}
.pu-dias{position:relative}
/* a espinha da semana: filete de 1px em left:52px, com as bolinhas do trilho */
.pu-espinha{position:absolute; left:52px; top:4px; bottom:4px; width:1px; background:#f3edeb}
.pu-dia{display:grid; grid-template-columns:52px 1fr; align-items:start; position:relative}
.pu-dia > *{min-width:0}
.pu-tr{padding:6px 14px 12px 0; text-align:right; position:relative}
.pu-tr .dd{font-family:"Exo 2",sans-serif; font-weight:800; font-size:21px; letter-spacing:-.04em; line-height:1; display:block; color:#2a242b}
.pu-tr .dw{font-size:9px; color:#726770; display:block; margin-top:2px}
.pu-tr .np{font-size:8.5px; color:#5c525a; display:block}
.pu-tr .bola{position:absolute; right:-3.5px; top:9px; width:7px; height:7px; border-radius:50%; background:#d8cfd0}
.pu-dia.passado .dd{color:#726770}
.pu-dia.hoje .dd{color:#c42465}
.pu-dia.hoje .bola{background:#e8317a; box-shadow:0 0 0 3px rgba(232,49,122,.22)}
.pu-faixas{padding:0 0 11px 14px; display:grid; gap:8px}
.pu-marca-hoje{display:flex; align-items:center; gap:8px; margin:0 0 9px 66px; font-size:9.5px; font-weight:800; color:#c42465; letter-spacing:.06em}
.pu-marca-hoje i{flex:1; height:2px; border-radius:2px; background:linear-gradient(90deg,#e8317a,rgba(255,46,126,0))}
.fxw{border:1px solid #e4dbda; border-radius:10px; background:#ffffff; overflow:hidden}
.fxw.viva{border-color:rgba(232,49,122,.4)}
.fx{display:flex; align-items:center; gap:9px; padding:7px 10px 7px 0; min-width:0}
/* barra dupla de 4px: aprovação em cima, publicação embaixo */
.dbar{width:4px; height:36px; flex:none; display:grid; grid-template-rows:1fr 1fr; border-radius:0 3px 3px 0; overflow:hidden}
.fx .hora{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; font-size:13px; letter-spacing:-.03em; width:41px; flex:none; color:#131318; font-variant-numeric:tabular-nums}
.fx .hora.frio{color:#726770}
.fx .pq{width:22px; height:22px; border-radius:7px; flex:none; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:800; color:#fbf7f5}
.fx .tit{flex:1; min-width:0}
.fx .tit b{display:block; font-size:11.5px; font-weight:600; color:#131318; line-height:1.3}
.fx .tit small{font-size:9.5px; color:#726770}
.fx .tag{border:1px solid; border-radius:6px; padding:0 5px; font-size:9px; font-weight:700; margin-left:6px; white-space:nowrap}
.tag-mut{color:#5c525a; border-color:#e4dbda}
.tag-warn{color:#92400e; border-color:rgba(251,191,36,.4)}
.tag-info{color:#1d4ed8; border-color:rgba(96,165,250,.4)}
/* o controle duplo: duas pílulas coladas numa moldura só, com o nome do eixo
   escrito em cima de cada metade. A metade à mão ganha hachura. */
.cd{display:flex; border:1px solid #e4dbda; border-radius:9px; overflow:hidden; flex:none}
.cd > div{padding:3px 9px 5px; min-width:104px}
.cd > div + div{border-left:1px solid #e4dbda}
.cd .eixo{display:block; font-family:"Red Hat Display",sans-serif; font-weight:700; font-size:8px; letter-spacing:.11em; text-transform:uppercase; color:#5c525a; margin-bottom:2px}
.cd .mao{background-image:repeating-linear-gradient(45deg,rgba(162,150,154,.1) 0 3px,transparent 3px 7px)}
.cd .pill{padding:1px 7px; font-size:10px}
.fx .slot{width:86px; flex:none; text-align:right}
.fx .slot button{border:0; background:transparent; color:#c42465; font:inherit; font-size:10.5px; font-weight:700; cursor:pointer}
.fx .slot .post{color:#5c525a; display:inline-flex; align-items:center; gap:4px}
.fx .slot .post svg{width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:1.8}
.nota{border-top:1px dashed #c9bebe; padding:7px 11px; font-size:9.5px; color:#5c525a; display:flex; gap:10px; align-items:center; flex-wrap:wrap; line-height:1.55}
.nota b{color:#131318}
.nota.err{background:rgba(248,113,113,.08)}
.nota.wrn{background:rgba(251,191,36,.07)}
.nota button{margin-left:auto; border:1px solid #e4dbda; background:transparent; color:#131318; border-radius:7px; padding:3px 9px; font:inherit; font-size:9.5px; font-weight:700; cursor:pointer; white-space:nowrap}

/* ============ Performance › Super Dashboard de Mídia ============ */
.pf-mes{display:inline-flex; align-items:center; gap:6px; border:1px solid #e4dbda; border-radius:9px; background:#ffffff; padding:3px 5px}
.pf-mes button{border:0; background:transparent; color:#5c525a; font:inherit; font-size:12px; cursor:pointer; padding:1px 5px; line-height:1}
.pf-mes b{font-size:11.5px; min-width:108px; text-align:center; color:#131318}
.pf-kpis{display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin-bottom:12px}
.pf-kpis > *{min-width:0}
.fbar{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-bottom:11px}
.fsel{
  display:inline-flex; align-items:center; gap:6px; border:1px solid #e4dbda; background:#ffffff;
  border-radius:10px; padding:4px 9px; font-size:10.5px; color:#5c525a; white-space:nowrap;
}
.fsel.ativo{border-color:rgba(232,49,122,.45); color:#c42465}
.fsel svg{width:9px; height:9px; stroke:currentColor; fill:none; stroke-width:2; opacity:.7}
.fsel .cnt{width:14px; height:14px; border-radius:999px; background:#e8317a; color:#fde7ef; font-size:8.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center}
.flimpa{
  margin-left:auto; border:1px solid #e4dbda; background:#ffffff; color:#5c525a; border-radius:8px;
  padding:4px 10px; font:inherit; font-size:10.5px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
}
.flimpa svg{width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:1.8}
.pf-tb tbody tr:nth-child(odd) td{background:rgba(19,19,24,.035)}
.pf-tb tbody tr:hover td{background:rgba(232,49,122,.06)}
.pf-tb td,.pf-tb th{white-space:nowrap}
.pf-tb .dir{text-align:right}
.pf-tb .cent{text-align:center}
.grana{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; font-size:12.5px; letter-spacing:-.03em; color:#2a242b}
.grana.estouro{color:#991b1b}
.pf-pac{min-width:104px}
.pf-pac .topo{display:flex; align-items:center; gap:8px; justify-content:space-between}
.pf-pac .pct{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; font-size:12px; letter-spacing:-.03em; color:#2a242b}
.pf-pac .trilhinho{height:2px; border-radius:99px; background:#f3edeb; margin-top:5px; overflow:hidden}
.pf-pac .trilhinho i{display:block; height:100%}
.pronta{display:inline-flex; align-items:center; gap:7px; justify-content:flex-end}
.pronta .tr{width:92px; height:5px; border-radius:99px; background:#f3edeb; overflow:hidden; display:block}
.pronta .tr i{display:block; height:100%; border-radius:99px}
.bdg-n{border:1px solid #e4dbda; background:#ffffff; color:#5c525a; border-radius:6px; padding:1px 7px; font-size:10px; font-weight:700}
.bdg-n.perigo{border-color:rgba(248,113,113,.34); background:rgba(248,113,113,.12); color:#991b1b}
.icb{border:0; background:transparent; cursor:pointer; padding:0; line-height:0}
.icb svg{width:14px; height:14px; stroke:#726770; fill:none; stroke-width:1.7}
.pf-conect{border:1px solid #e4dbda; border-radius:11px; background:#ffffff; padding:10px 12px; margin-top:12px; display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.pf-conect .tt{font-family:"Exo 2",sans-serif; font-weight:700; font-size:12px; color:#131318}
.pf-conect .tt span{font-weight:400; color:#726770}
.pf-conect .ln{margin-left:auto; font-size:10px; color:#c42465; font-weight:700}


/* ============ conectores (/conectores) ============ */
/* Duas seções com overline: "Meu WhatsApp", com um cartão sozinho, e
   "Integrações da organização", com todos os outros. O cartão inteiro é o clique. */
.cn-ov{
  font-family:"Red Hat Display",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:9px; color:#c42465; margin:0 0 3px;
}
.cn-apoio{font-size:10.5px; color:#726770; margin:0 0 9px}
.cn-sec{margin-bottom:15px}
.cn-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.cn-grid > *{min-width:0}
.cn{border:1px solid #e4dbda; border-radius:12px; padding:13px; background:#ffffff; text-align:left; display:flex; flex-direction:column}
.cn-top{display:flex; align-items:center; gap:9px; margin-bottom:9px}
/* quadrado de 44px com o ícone do serviço à esquerda, pílula de status à direita */
.cn-mark{width:30px; height:30px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; background:#f3edeb; border:1px solid #e4dbda}
.cn-mark svg{width:16px; height:16px; stroke:#131318; fill:none; stroke-width:1.7}
.cn-top .pill{margin-left:auto}
.cn b{font-size:12.5px; display:block; line-height:1.25}
.cn small{color:#726770; font-size:10.5px; display:block; margin-top:3px; line-height:1.45}
.cn-pe{
  margin:7px 0 0; font-size:10px; color:#5c525a; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;
}
/* a chamada é sempre a última linha do cartão, alinhada entre os cartões da fila */
.cn-cta{
  display:flex; align-items:center; gap:5px; margin-top:auto; padding-top:12px;
  font-size:10.5px; font-weight:700; color:#c42465;
}
.cn-cta svg{width:10px; height:10px; stroke:currentColor; fill:none; stroke-width:2.2; transform:rotate(-90deg)}

/* ============ a simulação por papel ============ */
.sim-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px}
.sim-p[hidden]{display:none}
.sim-nota{margin:14px 0 0; font-size:13px; color:var(--faint)}
.solto{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.solto .n{font-family:"Exo 2",sans-serif; font-style:italic; font-weight:700; letter-spacing:-.04em; font-size:22px; color:#c42465}
.sim-cols{display:grid; grid-template-columns:1.15fr .85fr; gap:14px}

/* ============ grade dos módulos ============ */
.filtros{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px}
.filtro{
  border:1px solid var(--border); background:var(--surface); border-radius:999px;
  padding:7px 15px; font-size:13px; font-weight:700; color:var(--muted); cursor:pointer;
}
.filtro[aria-pressed="true"],
.filtro[aria-selected="true"]{background:var(--fg); border-color:var(--fg); color:#fff}
.mods{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.mod{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:20px; display:flex; flex-direction:column;
}
.mod.hide{display:none}
.mod-n{
  font-family:"Exo 2",sans-serif; font-style:italic; font-weight:800; letter-spacing:-.045em;
  font-size:26px; color:var(--t300); line-height:1;
}
.mod-tit{display:flex; align-items:baseline; gap:10px; margin-bottom:8px}
.mod h3{margin:0; font-size:20px}
.mod .ben{color:var(--muted); font-size:14px; margin:0 0 14px}
/* Lista empilhada dentro de cartão: o padrão do produto é `divide-y
   divide-border`, ou seja, régua SÓ ENTRE os itens. Não existe linha acima do
   primeiro nem abaixo do último, e não existe marcador: a régua já separa.
   O traço rosa que marcava cada item saiu porque no sistema o rosa é GRIFO
   (palavra-chave, número, decisão), como o próprio kit anota no Panel. Trinta
   marcadores rosa numa seção gastam o acento e não grifam nada. */
.mod ul{list-style:none; margin:0; padding:0}
.mod li{font-size:13.5px; color:var(--muted); padding:9px 0}
.mod li + li{border-top:1px solid var(--border)}
.mod .tag{
  margin-top:auto; padding-top:14px; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); font-family:"Red Hat Display",sans-serif;
}

/* ============ detalhes do terceiro mês ============ */
.det{display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px}
.det div{padding:18px 0; border-top:1px solid #e4dbda}
.det b{display:block; margin-bottom:4px; font-size:15px}
.det p{margin:0; color:#5c525a; font-size:14px}

/* ============ depoimento placeholder ============ */
.ph{
  border:1px dashed var(--t300); border-radius:var(--r); background:var(--surface);
  padding:24px; position:relative;
}
.ph-tag{
  position:absolute; top:-10px; left:18px; background:var(--bg); padding:0 8px;
  font-family:"Red Hat Display",sans-serif; font-weight:700; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
.ph p{margin:0; color:var(--faint); font-size:14px}
.ph-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
.ph-logos{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px}
.ph-logos i{
  height:44px; border:1px dashed var(--t300); border-radius:8px; display:flex;
  align-items:center; justify-content:center; font-style:normal; font-size:11px; color:var(--faint);
}

/* ============ faq ============ */
.faq{border-top:1px solid var(--border)}
.faq-i{border-bottom:1px solid var(--border)}
.faq-b{
  width:100%; display:flex; gap:16px; align-items:flex-start; justify-content:space-between;
  background:none; border:0; padding:20px 0; text-align:left; cursor:pointer;
}
.faq-b span{font-family:"Unbounded",sans-serif; font-weight:400; font-size:clamp(20px,2vw,24px); letter-spacing:-.015em; line-height:1.3}
.faq-b i{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--border); flex:none;
  display:flex; align-items:center; justify-content:center; font-style:normal; color:var(--acao);
  font-weight:700; transition:transform .2s ease, background .2s;
}
.faq-i.open .faq-b i{transform:rotate(45deg); background:var(--surface2)}
.faq-r{display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease}
.faq-i.open .faq-r{grid-template-rows:1fr}
.faq-r > div{overflow:hidden}
.faq-r p{margin:0 0 20px; color:var(--muted); max-width:74ch; font-size:15px}

/* ============ cta final e rodapé ============ */
.cta-final{position:relative; overflow:hidden; border-radius:16px; padding:56px 40px; background:#fbf7f5; color:#131318}
.cta-final .faixa-capa{opacity:.85; width:min(33%,410px); height:86%}
.cta-in{position:relative; z-index:1; max-width:640px}
.cta-final h2{color:#131318}
.cta-final p{color:#5c525a}
.rodape{background:#fbf7f5; color:#5c525a; padding:56px 0 28px; margin-top:78px}
.rod-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px}
.rod-marca b{font-family:"Unbounded",sans-serif; font-weight:600; font-size:22px; color:#131318; letter-spacing:-.02em}
.rod-marca p{margin:8px 0 18px; font-size:14px; max-width:34ch}
.rodape h5{
  font-family:"Red Hat Display",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; font-size:11px; color:#726770; margin:0 0 12px;
}
.rodape ul{list-style:none; margin:0; padding:0}
.rodape li{margin-bottom:9px}
.rodape a{color:#5c525a; text-decoration:none; font-size:14px}
.rodape a:hover{color:#c42465}
.rod-fim{
  border-top:1px solid #e4dbda; margin-top:38px; padding-top:20px;
  display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between; font-size:12.5px; color:#726770;
}
.rod-aviso{
  margin-top:16px; border:1px dashed #e4dbda; border-radius:10px; padding:12px 14px;
  font-size:12px; color:#726770;
}

/* ============ responsivo ============ */
@media (max-width:1000px){
  .cta-in{max-width:min(640px,60%)}
  /* .cn-grid NÃO muda de grade por viewport: ela vive dentro do .mk-scroll, que
     tem min-width próprio. Reflowar aqui deixava dois cartões esticados num
     corpo de 1000px, em vez de rolar o mockup. */
  .mods{grid-template-columns:repeat(2,1fr)}
  .tl{grid-template-columns:1fr; gap:0}
  .rail{display:none}
  .rod-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .nav-links{display:none}
  .nav-links.abre{
    display:flex; position:absolute; left:0; right:0; top:64px; flex-direction:column;
    align-items:flex-start; gap:0; background:var(--surface); border-bottom:1px solid var(--border);
    padding:10px 20px 18px;
  }
  .nav-links.abre a{padding:11px 0; width:100%; border-bottom:1px solid var(--border)}
  .nav-links.abre .btn{margin:12px 0 0; width:100%}
  .burger{display:flex}
  .nav-links.abre a.btn{border-bottom:0}
  /* A Faixa sai de cena antes de o texto encostar no trecho de gradiente */
  .faixa-capa{display:none}
  .cta-in{max-width:100%}
  .faixas{grid-template-columns:1fr}
  .conta-grid{grid-template-columns:1fr}
  .det{grid-template-columns:1fr}
  .nao-mostra{grid-template-columns:1fr}
  .ph-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .sec{padding:52px 0}
  .mods{grid-template-columns:1fr}
  .ph-logos{grid-template-columns:repeat(2,1fr)}
  .rod-grid{grid-template-columns:1fr}
  .cta-final{padding:38px 22px; border-radius:12px}
  .res-cols{grid-template-columns:1fr}
  .step-n{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .holder{opacity:1; transform:none; transition:none}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
:focus-visible{outline:2px solid var(--acao); outline-offset:2px; border-radius:4px}
.pula{position:absolute; left:-9999px; top:0}
.pula:focus{left:12px; top:12px; z-index:99; background:var(--fg); color:#fff; padding:10px 16px; border-radius:8px}


/* sem JS a página continua inteira: mockup visível, FAQ aberto, simulação empilhada */
.holder{opacity:1; transform:none}
.faq-r{grid-template-rows:1fr}
.sim-p[hidden]{display:block}
.sim-tabs{display:none}

/* a tela vira o documento inteiro: sem moldura, sem barra de URL, sem rolagem própria */
html,body{margin:0; background:#fbf7f5; overflow:hidden}
:root{--ok:#166534; --warn:#92400e; --err:#991b1b; --info:#1d4ed8}
.mk{background:#fbf7f5; color:#131318}
body{width:1200px}
.mk{border:0; border-radius:0}
.mk-bar{display:none}
.mk-scroll{overflow:hidden}
/* a casca ocupa a janela inteira mesmo quando o miolo é curto (senão o menu e o véu de modal acabam no meio) */
.mk-body{min-width:1200px !important; min-height:780px}