/* Paleta do Papo de Intercâmbio (a mesma do site.papodeintercambio.com). */
:root{
  --dourado:#f8ae00; --dourado-claro:#ffd76b; --teal:#077881; --teal-escuro:#045b62;
  --azul:#009fe3; --tinta:#0d2a2d; --tinta-fraca:#5c7477; --papel:#fff;
  --areia:#fdf8ef; --linha:#e7eceb; --verde:#1f9d55; --vermelho:#c0392b;
  --sombra:0 1px 2px rgba(13,42,45,.06), 0 10px 30px rgba(13,42,45,.07);
  --fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --raio:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:16px/1.6 var(--fonte);overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.15;letter-spacing:-.4px;margin:0 0 10px}
h1{font-size:clamp(28px,7vw,46px)} h2{font-size:clamp(22px,5vw,30px)} h3{font-size:18px}
p{margin:0 0 12px}
a{color:var(--teal)}
img{max-width:100%}
.oculto{display:none!important}
.envolve{max-width:1040px;margin:0 auto;padding:0 16px}
.estreito{max-width:640px;margin:0 auto;padding:0 16px}
.fraco{color:var(--tinta-fraca)} .pequeno{font-size:13px}

/* topo */
.topo{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-bottom:1px solid var(--linha);position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);z-index:30}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);min-width:0}
.marca img{width:38px;height:38px;border-radius:50%;flex:none}
.marca span{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.marca b{font-size:15px;white-space:nowrap}
.marca small{font-size:11px;color:var(--teal);font-weight:600;white-space:nowrap}
.nav{display:flex;gap:6px;align-items:center}
.nav a.link{color:var(--tinta);text-decoration:none;font-size:14px;font-weight:600;padding:8px 10px;border-radius:10px}
.nav a.link:hover{background:var(--areia)}
@media (max-width:720px){.nav a.link{display:none}}

/* botões */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;background:var(--teal);color:#fff;text-decoration:none;font:700 16px var(--fonte);padding:14px 22px;border-radius:999px;min-height:48px;transition:transform .1s,background .15s}
.botao:hover{background:var(--teal-escuro)} .botao:active{transform:scale(.98)}
.botao.dourado{background:var(--dourado);color:var(--tinta)} .botao.dourado:hover{background:#e39f00}
.botao.claro{background:var(--papel);color:var(--teal);border:2px solid var(--teal)}
.botao.claro:hover{background:var(--areia)}
.botao.mini{font-size:13px;padding:8px 14px;min-height:36px}
.botao[disabled]{opacity:.55;cursor:default}
.botao-topo{background:var(--teal);color:#fff;text-decoration:none;font-weight:700;font-size:13px;padding:9px 14px;border-radius:999px;white-space:nowrap}

/* capa */
.capa{padding:34px 0 22px;text-align:center;background:radial-gradient(1200px 380px at 50% -80px,rgba(255,246,224,.95) 0%,rgba(255,246,224,0) 70%)}
.selo{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 14px;border-radius:999px;background:var(--teal);color:#fff;font-size:12px;font-weight:700}
.capa p.sub{font-size:18px;color:var(--tinta-fraca);max-width:600px;margin:0 auto 22px}
.capa .acoes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.destaque{color:var(--teal)}
.sublinha{background:linear-gradient(transparent 62%,var(--dourado-claro) 62%)}

section{padding:34px 0}
section.areia{background:var(--areia);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.titulo-secao{text-align:center;max-width:640px;margin:0 auto 22px}

/* régua das fases */
.regua{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:760px){.regua{grid-template-columns:repeat(2,1fr)}}
.fase-card{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:14px;text-decoration:none;color:var(--tinta);box-shadow:var(--sombra);display:block}
.fase-card .num{font-size:12px;color:var(--teal);font-weight:800}
.fase-card .ico{font-size:24px;display:block;margin:4px 0}
.fase-card b{display:block;font-size:15px;line-height:1.25}
.fase-card small{color:var(--tinta-fraca);font-size:13px;line-height:1.35;display:block;margin-top:4px}

/* grades e cartões */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.cartao{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:18px;box-shadow:var(--sombra)}
.cartao h3{display:flex;align-items:center;gap:8px}
.cartao ul{margin:6px 0 0;padding-left:18px}
.cartao li{margin:3px 0}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--areia);color:var(--teal-escuro);border:1px solid var(--linha);margin:2px 4px 2px 0}
.tag.ouro{background:#fff4d6;color:#7a5400;border-color:#f7dd9a}
.tag.verde{background:#e8f6ee;color:#15693a;border-color:#bfe3cd}
.tag.vermelha{background:#fdecea;color:#8e2a1f;border-color:#f4c4bd}

.passos3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:p}
@media (max-width:760px){.passos3{grid-template-columns:1fr}}
.passos3 .cartao::before{counter-increment:p;content:counter(p);display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--dourado);color:var(--tinta);font-weight:800;margin-bottom:8px}

.rodape{padding:28px 16px;text-align:center;color:var(--tinta-fraca);font-size:13px;border-top:1px solid var(--linha)}

/* formulário em passos */
.form-palco{min-height:calc(100vh - 60px);display:flex;flex-direction:column}
.barra-prog{height:6px;background:var(--linha)}
.barra-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--azul));width:0;transition:width .3s}
.etapa{flex:1;display:flex;align-items:flex-start;padding:28px 0 40px}
.etapa .estreito{width:100%}
.etapa h2{font-size:clamp(22px,5.5vw,30px)}
.etapa .dica{color:var(--tinta-fraca);margin-bottom:18px}
.opcoes{display:grid;gap:10px;margin:14px 0}
.opcoes.duas{grid-template-columns:1fr 1fr}
@media (max-width:480px){.opcoes.duas{grid-template-columns:1fr}}
.opcao{display:flex;align-items:center;gap:12px;text-align:left;width:100%;background:var(--papel);border:2px solid var(--linha);border-radius:14px;padding:14px 16px;font:600 16px/1.3 var(--fonte);color:var(--tinta);cursor:pointer;min-height:56px}
.opcao:hover{border-color:var(--teal)}
.opcao.sel{border-color:var(--teal);background:#eaf6f6}
.opcao .ico{font-size:22px;flex:none}
.opcao small{display:block;font-weight:400;color:var(--tinta-fraca);font-size:13px;margin-top:2px}
.campo{display:block;margin:12px 0}
.campo span{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
input,select,textarea{width:100%;font:16px var(--fonte);padding:14px;border:2px solid var(--linha);border-radius:12px;background:var(--papel);color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal)}
.linha-botoes{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:20px}
.voltar{background:none;border:0;color:var(--tinta-fraca);font:600 15px var(--fonte);cursor:pointer;padding:10px 4px}
.erro{color:var(--vermelho);font-weight:600;font-size:14px;min-height:20px;margin-top:8px}
.aceite{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin-top:12px}
.aceite input{width:22px;height:22px;flex:none;margin-top:2px}

/* área logada */
.painel-topo{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-escuro) 100%);color:#fff;padding:22px 0 64px}
.painel-topo h1{font-size:clamp(24px,6vw,34px);margin-bottom:6px}
.painel-topo .fraco{color:rgba(255,255,255,.8)}
.resumo{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:-46px}
@media (max-width:760px){.resumo{grid-template-columns:repeat(2,1fr)}}
.numero{background:var(--papel);border:1px solid var(--linha);border-radius:14px;padding:14px;box-shadow:var(--sombra)}
.numero b{display:block;font-size:22px;color:var(--teal);line-height:1.1}
.numero span{font-size:13px;color:var(--tinta-fraca)}
.progresso{height:10px;background:var(--linha);border-radius:99px;overflow:hidden;margin:6px 0}
.progresso i{display:block;height:100%;background:linear-gradient(90deg,var(--dourado),var(--teal));border-radius:99px}

.trilha{display:flex;gap:6px;overflow-x:auto;padding:16px 0 6px;scrollbar-width:thin}
.trilha .pt{flex:1 0 96px;text-align:center;font-size:12px;color:var(--tinta-fraca);position:relative}
.trilha .pt .bola{width:40px;height:40px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;background:var(--linha);font-size:18px;border:3px solid var(--linha)}
.trilha .pt.feita .bola{background:#e8f6ee;border-color:var(--verde)}
.trilha .pt.atual .bola{background:var(--dourado);border-color:var(--dourado);box-shadow:0 0 0 5px rgba(248,174,0,.25)}
.trilha .pt.atual{color:var(--tinta);font-weight:800}

.abas{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--linha);margin:22px 0 16px;scrollbar-width:none}
.abas button{background:none;border:0;border-bottom:3px solid transparent;padding:12px 14px;font:700 15px var(--fonte);color:var(--tinta-fraca);cursor:pointer;white-space:nowrap}
.abas button.sel{color:var(--teal);border-bottom-color:var(--teal)}

.bloco-fase{margin:0 0 18px}
.bloco-fase > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;background:var(--areia);border:1px solid var(--linha);border-radius:14px;font-weight:800}
.bloco-fase > summary::-webkit-details-marker{display:none}
.bloco-fase[open] > summary{border-radius:14px 14px 0 0}
.bloco-fase .corpo{border:1px solid var(--linha);border-top:0;border-radius:0 0 14px 14px;padding:6px 12px 12px}
.bloco-fase.atual > summary{background:#fff4d6;border-color:#f7dd9a}
.passo{display:flex;gap:12px;padding:12px 4px;border-bottom:1px solid var(--linha)}
.passo:last-child{border-bottom:0}
.passo input{width:24px;height:24px;flex:none;margin-top:2px;accent-color:var(--teal);cursor:pointer}
.passo b{display:block;line-height:1.3}
.passo p{margin:4px 0 0;font-size:14px;color:var(--tinta-fraca)}
.passo.feito b{text-decoration:line-through;color:var(--tinta-fraca)}
.passo a{font-size:13px;font-weight:700}

.caixa-fase{background:var(--areia);border:1px solid var(--linha);border-radius:var(--raio);padding:16px;margin-bottom:16px}
.caixa-fase ul{margin:6px 0 0;padding-left:18px}

.caminho{position:relative}
.caminho .pontos{position:absolute;top:14px;right:14px;font-size:12px;font-weight:800;color:var(--teal)}
.caminho.top{border:2px solid var(--dourado)}
.custo{font-weight:800;color:var(--tinta);font-size:15px}

table.comp{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
table.comp th,table.comp td{text-align:left;padding:10px;border-bottom:1px solid var(--linha);vertical-align:top}
table.comp th{background:var(--areia);position:sticky;top:0}
.rolagem{overflow-x:auto;border:1px solid var(--linha);border-radius:14px}

.aviso{background:#eaf6f6;border:1px solid #bfe0e1;border-radius:14px;padding:12px 14px;font-size:14px;margin:12px 0}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--tinta);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;z-index:99;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.ver{opacity:1}

/* admin */
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.filtros select,.filtros input{width:auto;min-width:150px;padding:10px;font-size:16px}
.funil{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
@media (max-width:760px){.funil{grid-template-columns:repeat(2,1fr)}}
.funil .numero{cursor:pointer}
.funil .numero.sel{outline:3px solid var(--dourado)}
.linha-pessoa{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px;border-bottom:1px solid var(--linha);cursor:pointer}
.linha-pessoa:hover{background:var(--areia)}
.barras{display:flex;align-items:flex-end;gap:4px;height:90px;margin-top:10px}
.barras i{flex:1;background:var(--teal);border-radius:4px 4px 0 0;min-height:2px;position:relative}
.barras i span{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:11px;font-style:normal;color:var(--tinta-fraca)}
dl.ficha{display:grid;grid-template-columns:140px 1fr;gap:6px 12px;font-size:14px;margin:0}
dl.ficha dt{color:var(--tinta-fraca)} dl.ficha dd{margin:0;font-weight:600;word-break:break-word}
@media (max-width:480px){.abas button{padding:12px 10px;font-size:14px}.numero b{font-size:20px}}
