@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --papel:#F4F6FB; --papel-2:#FFFFFF; --tinta:#161B2C; --tinta-2:#4A5170; --tinta-3:#848CA6;
  --marca:#2A4A85; --marca-2:#3E62A8;
  --ok:#1B8E52; --ok-bg:#EAF6EF;
  --ambar:#D9A013; --ambar-bg:#FCF5DE;
  --erro:#BC3A2B; --erro-bg:#FBEDEA;
  --linha:#DDE3F0; --raio:14px;
  --tema-vermelho:#A6291F; --tema-vermelho-2:#C63B2E;
  --tema-amarelo:#F5B90D; --tema-amarelo-2:#946D00; --tema-amarelo-texto:#3D2E00;
  --disp:'Fraunces',Georgia,serif; --corpo:'Inter',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--corpo);background:var(--papel);color:var(--tinta);line-height:1.68;font-size:17.5px}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}
a{color:inherit}

nav.topo{background:var(--marca);color:#EFF3F9;padding:0;position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(255,255,255,.1)}
nav.topo .wrap{display:flex;align-items:center;gap:24px;height:62px}
nav.topo .logo{font-family:var(--disp);font-weight:600;font-size:19px;color:#fff;text-decoration:none;white-space:nowrap;display:flex;align-items:center}
nav.topo .fases{display:flex;gap:4px;flex-wrap:wrap}
nav.topo .fase-item{
  font-family:var(--mono);font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  padding:9px 15px;border-radius:8px;text-decoration:none;color:#D3DDF2;white-space:nowrap;
}
nav.topo .fase-item:hover{background:rgba(255,255,255,.1)}
nav.topo .fase-item.inativa{opacity:.5}

header.hero{background:var(--marca);color:#F4F6FC;padding:46px 0 50px}
header.hero .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#B7C7E8;margin-bottom:16px}
header.hero h1{font-family:var(--disp);font-weight:600;font-size:clamp(28px,4.6vw,42px);line-height:1.18;max-width:26ch}
header.hero p{margin-top:14px;max-width:66ch;color:#DAE3F5;font-size:17.5px}

main{padding:46px 0 100px}

.grade-fases{display:grid;grid-template-columns:1fr;gap:18px;margin-top:8px}
.cartao-fase{background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--raio);padding:26px 28px}
.cartao-fase.destaque{border:2px solid var(--marca);box-shadow:0 4px 20px rgba(42,74,133,.08)}
.cartao-fase.inativa{opacity:.55}
.cartao-fase .topo-cartao{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.cartao-fase .num{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ambar);display:block;margin-bottom:7px}
.cartao-fase h2{font-family:var(--disp);font-weight:600;font-size:24px}
.cartao-fase .resumo{margin-top:9px;color:var(--tinta-2);font-size:16.5px;max-width:70ch}
.badge-status{font-family:var(--mono);font-size:11px;text-transform:uppercase;padding:5px 11px;border-radius:99px;white-space:nowrap}
.badge-status.ativa{background:var(--ok-bg);color:var(--ok)}
.badge-status.inativa{background:#EEECE6;color:var(--tinta-3)}

.grade-subs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:20px}
.cartao-sub{
  display:block;text-decoration:none;color:inherit;background:var(--papel);border:1px solid var(--linha);
  border-radius:12px;padding:20px 22px;transition:border-color .15s;
}
.cartao-sub:hover{border-color:var(--marca-2)}
.cartao-sub .nome-sub{font-family:var(--disp);font-weight:600;font-size:19.5px;margin-bottom:7px}
.cartao-sub .subtitulo{font-size:15px;color:var(--tinta-2);margin-bottom:13px}
.barra-mini{height:6px;border-radius:99px;background:var(--linha);overflow:hidden}
.barra-mini .fill{height:100%;background:var(--ok)}
.cartao-sub .contagem{font-family:var(--mono);font-size:11.5px;color:var(--tinta-3);margin-top:9px}

.status-global{font-family:var(--mono);font-size:14px;color:var(--tinta-2);margin-top:6px}

.etapa{margin-top:28px;background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--raio);padding:26px 28px;position:relative}
.etapa.travada{opacity:.5}
.etapa .cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.etapa .rotulo-etapa{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ambar);letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px;display:block}
.etapa h3{font-family:var(--disp);font-weight:600;font-size:21.5px}
.selo{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:99px;white-space:nowrap}
.selo.pendente{background:var(--ambar-bg);color:#8a6a2b}
.selo.travado{background:#EFEAE0;color:var(--tinta-3)}
.selo.concluido{background:var(--ok-bg);color:var(--ok)}

.bloco-exp{margin-top:16px;display:grid;gap:10px}
.exp{display:flex;gap:10px;background:var(--papel);border-radius:9px;padding:12px 14px;font-size:15.5px;color:var(--tinta-2)}
.exp .tag{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--marca-2);font-weight:600;padding-top:2px;min-width:88px}
.exp.acao{background:var(--ambar-bg)} .exp.acao .tag{color:#8a6a2b}
.exp.acao a, .exp.fonte a{color:inherit;font-weight:600}
.exp.fonte{background:var(--ok-bg)} .exp.fonte .tag{color:var(--ok)}
.exp.nota{background:var(--ambar-bg);color:#8a6a2b}

.lista-tarefas{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:9px}
.lista-tarefas li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}
.lista-tarefas form{display:contents}
.lista-tarefas button.checkbox-btn{
  flex:0 0 auto;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--tinta-3);background:#fff;cursor:pointer;
  margin-top:3px;padding:0;display:flex;align-items:center;justify-content:center;
}
.lista-tarefas button.checkbox-btn.marcado{background:var(--ok);border-color:var(--ok);color:#fff;font-size:12px}
.lista-tarefas .texto{cursor:default}
.lista-tarefas li.marcado .texto{color:var(--tinta-3);text-decoration:line-through}
.tag-tipo{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;background:var(--ambar-bg);color:#8a6a2b;border-radius:5px;padding:2px 7px;margin-right:6px}
.tag-tipo.atencao,.tag-tipo.compliance{background:var(--erro-bg);color:var(--erro)}

footer{padding:34px 0;color:var(--tinta-3);font-size:14px;text-align:center}

/* --- conteudo rico (intro/extra de fase e sub-etapa) --- */
.bloco-intro{margin-bottom:8px}
.bloco-intro .lede{margin-top:12px;max-width:74ch;color:var(--tinta-2);font-size:17px}
.bloco-intro .lede + .lede{margin-top:14px}
.bloco-intro h2{font-family:var(--disp);font-weight:600;font-size:clamp(23px,3vw,30px);line-height:1.25;margin-top:30px;margin-bottom:6px;max-width:32ch}
.bloco-intro h2:first-child{margin-top:0}
.rotulo-secao{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--marca-2);margin:26px 0 8px}
.rotulo-secao::before{content:"";width:22px;height:2px;background:var(--ambar)}
.rotulo-secao:first-child{margin-top:0}

.cartao-info{margin-top:16px;background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--raio);padding:20px 24px;font-size:16px}
.cartao-info h4{font-family:var(--disp);font-size:18.5px;margin-bottom:9px}
.cartao-info p{color:var(--tinta-2)}
.cartao-info p b{color:var(--tinta)}

.impasse{margin-top:16px;background:var(--erro-bg);border:1px solid #EFC7BE;border-radius:var(--raio);padding:17px 20px;font-size:15.5px;color:var(--tinta);display:flex;gap:12px;align-items:flex-start}
.impasse .marca-x{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--erro);flex:0 0 auto}
.impasse b{color:var(--erro)}

.grade-resumo{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px}
.card-resumo{background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--raio);padding:19px 21px}
.card-resumo h4{font-family:var(--disp);font-size:17.5px;margin-bottom:10px;display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.selo-conf{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:99px;white-space:nowrap;flex:0 0 auto;margin-top:2px}
.selo-conf.confirmado{background:var(--ok-bg);color:var(--ok)}
.selo-conf.parcial{background:var(--ambar-bg);color:#8a6a2b}
.card-resumo .ludico{display:flex;gap:9px;background:var(--papel);border-radius:9px;padding:11px 13px;margin-bottom:10px;font-size:14.5px;color:var(--tinta-2);font-style:italic;line-height:1.6}
.card-resumo .tecnico{font-size:14.5px;color:var(--tinta-2);line-height:1.6}
.card-resumo .tecnico b{color:var(--tinta);font-weight:600}
@media(max-width:760px){.grade-resumo{grid-template-columns:1fr}}

.lista-ordem{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:9px;counter-reset:ordem}
.lista-ordem li{display:flex;gap:13px;align-items:flex-start;background:var(--papel-2);border:1px solid var(--linha);border-radius:10px;padding:13px 16px;font-size:15.5px;color:var(--tinta-2);counter-increment:ordem}
.lista-ordem li::before{content:counter(ordem);flex:0 0 auto;width:23px;height:23px;border-radius:99px;background:var(--marca);color:#fff;font-family:var(--mono);font-size:11.5px;font-weight:600;display:flex;align-items:center;justify-content:center}
.lista-ordem li b{color:var(--tinta)}

.comparativo-lista{list-style:none;margin-top:16px;display:grid;gap:10px}
.comparativo-lista li{background:var(--papel-2);border:1px solid var(--linha);border-radius:10px;padding:13px 17px;font-size:15.5px}
.comparativo-lista b{display:block;color:var(--tinta);margin-bottom:3px}
.comparativo-lista span{color:var(--tinta-2)}

/* --- guia / dica de uso do sistema --- */
.dica-sistema{
  display:flex;gap:11px;align-items:flex-start;background:#EAF0FB;border:1px solid #CBDAF3;
  border-radius:10px;padding:14px 18px;font-size:15.5px;color:var(--tinta-2);margin:20px 0;
}
.dica-sistema .ic{flex:0 0 auto;font-size:17px}
.dica-sistema b{color:var(--marca)}

.legenda-status{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:14.5px;color:var(--tinta-2)}
.legenda-status span{display:inline-flex;align-items:center;gap:7px}
.legenda-status .pt{width:9px;height:9px;border-radius:99px;display:inline-block}
.legenda-status .pt.pendente{background:var(--ambar)}
.legenda-status .pt.travado{background:var(--tinta-3)}
.legenda-status .pt.concluido{background:var(--ok)}

.icone-carteira{font-size:20px;margin-right:6px}

/* --- tema por sub-etapa (Shopee = vermelho, Mercado Livre = amarelo) --- */
body.tema-vermelho header.hero{background:var(--tema-vermelho)}
body.tema-vermelho .rotulo-secao{color:var(--tema-vermelho-2)}
body.tema-vermelho .rotulo-secao::before{background:var(--tema-vermelho)}
body.tema-vermelho .bloco-exp .exp .tag{color:var(--tema-vermelho-2)}
body.tema-vermelho .lista-ordem li::before{background:var(--tema-vermelho)}
body.tema-vermelho .etapa .rotulo-etapa{color:var(--tema-vermelho-2)}
body.tema-vermelho .cartao-sub:hover{border-color:var(--tema-vermelho)}

body.tema-amarelo header.hero{background:var(--tema-amarelo);color:var(--tema-amarelo-texto)}
body.tema-amarelo header.hero .eyebrow{color:#6B5000}
body.tema-amarelo header.hero p{color:#4A3800}
body.tema-amarelo header.hero .status-global{color:#4A3800 !important}
body.tema-amarelo .rotulo-secao{color:var(--tema-amarelo-2)}
body.tema-amarelo .rotulo-secao::before{background:var(--tema-amarelo-2)}
body.tema-amarelo .bloco-exp .exp .tag{color:var(--tema-amarelo-2)}
body.tema-amarelo .lista-ordem li::before{background:var(--tema-amarelo-2)}
body.tema-amarelo .etapa .rotulo-etapa{color:var(--tema-amarelo-2)}
body.tema-amarelo .cartao-sub:hover{border-color:var(--tema-amarelo-2)}