/* Protótipo — Área do Cliente Agência PUBLI. Dados fictícios, uso local. */
:root{
  --preto:#121110; --preto-2:#1b1917; --preto-3:#242019;
  --dourado:#ddbd37; --dourado-forte:#8f7a24;
  --papel:#f6f4ef; --card:#ffffff; --linha:#e6e1d6; --linha-forte:#d6cfc0;
  --ink:#1e1d1b; --ink-soft:#55514a; --ink-faint:#8a8377;
  --dark-ink:#ece9e1; --dark-ink-mut:#a8a294; --dark-line:rgba(255,255,255,.12);
  --ok:#2f7d55; --ok-bg:#e7f3ec; --espera:#9a6b12; --espera-bg:#fbf1de; --producao:#2b5f8f; --producao-bg:#e6eef6;
  --shadow:0 1px 2px rgba(19,18,16,.05), 0 16px 38px -24px rgba(19,18,16,.22);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:clip;width:100%;max-width:100%}
/* reserva o espaço da barra de rolagem sempre — sem isso a página "samba"
   pros lados quando o conteúdo cresce e a barra aparece/some */
html{scrollbar-gutter:stable}
body{
  background:var(--papel); color:var(--ink);
  font-family:"Hanken Grotesk","Segoe UI",system-ui,Arial,sans-serif;
  font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
h1,h2,h3{font-family:"Archivo","Hanken Grotesk",system-ui,Arial,sans-serif; letter-spacing:-.015em; margin:0}
a{color:var(--dourado-forte)}

/* faixa de protótipo */
.proto-bar{
  background:repeating-linear-gradient(45deg,#2a2621,#2a2621 12px,#211d19 12px,#211d19 24px);
  color:var(--dourado); text-align:center; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; padding:7px 12px;
}

/* header escuro */
.top{background:var(--preto); color:var(--dark-ink); border-bottom:1px solid var(--dark-line)}
.top .in{max-width:1240px; margin:0 auto; padding:18px 24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.top img.logo{height:26px; width:auto; display:block}
.top .divisor{width:1px; height:26px; background:var(--dark-line)}
.top .rot{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dark-ink-mut)}
.top .cliente{margin-left:auto; display:flex; align-items:center; gap:14px; font-size:13.5px; color:var(--dark-ink-mut)}
.top .cliente b{color:var(--dark-ink); font-weight:600}
.btn-sair{background:transparent; border:1px solid var(--dark-line); color:var(--dark-ink-mut); border-radius:999px; padding:5px 14px; font:inherit; font-size:12.5px; cursor:pointer}
.btn-sair:hover{border-color:var(--dourado); color:var(--dourado)}

/* topo no celular: 1 linha só — logo menor à esquerda, "Sair" à direita.
   O nome do cliente some (ele já aparece grande no H1 logo abaixo). */
@media (max-width:600px){
  .top .in{padding:16px 18px; gap:10px; flex-wrap:nowrap}
  .top img.logo{height:20px}
  .top .divisor{display:none}
  .top .rot{font-size:9px; letter-spacing:.1em}
  .top .cliente{gap:0}
  .top .cliente > span:first-child{display:none}
  .btn-sair{padding:4px 12px; font-size:12px; white-space:nowrap}
}

.wrap{max-width:1240px; margin:0 auto; padding:34px 24px 40px}
/* telas pequenas: menos gutter lateral, mais espaço pro conteúdo */
@media (max-width:480px){ .wrap{padding-left:16px; padding-right:16px} }

/* cabeçalho da página do portal */
.portal-head{margin-bottom:6px}
.portal-head h1{font-size:30px; font-weight:800}
.portal-head .sub{color:var(--ink-faint); font-size:13.5px; margin-top:4px}

/* faixa de status — "está tudo certo?" num relance. Todos os chips têm a
   MESMA formatação; só a cor do ponto muda, e só pra sinalizar estado
   (verde = ok, âmbar = atenção, cinza = informação). */
.status-faixa{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.status-faixa[hidden]{display:none}
.status-item{display:inline-flex; align-items:center; gap:7px; background:var(--card);
  border:1px solid var(--linha); border-radius:999px; padding:6px 13px;
  font-size:12.5px; color:var(--ink-soft); box-shadow:var(--shadow)}
.status-item .pt{width:7px; height:7px; border-radius:50%; background:var(--ink-faint); flex:none}
.status-item.ok .pt{background:var(--ok)}
.status-item.att .pt{background:var(--espera)}
.status-item b{color:var(--ink); font-weight:700}
/* no celular os chips empilham como lista — não sobra 1 solto na 2ª linha */
@media (max-width:600px){
  .status-faixa{flex-direction:column; align-items:stretch; gap:6px}
  .status-item{border-radius:10px; padding:9px 13px}
}

/* seções */
.secao{margin-top:40px}
.secao > h2{
  font-size:21px; font-weight:800; color:var(--ink); letter-spacing:-.02em;
  display:flex; align-items:center; gap:11px;
  padding-bottom:8px; border-bottom:2px solid var(--preto);
}
.secao > h2::before{content:""; width:4px; height:19px; background:var(--dourado); border-radius:3px; flex:none}
.secao .hint{color:var(--ink-faint); font-size:13px; margin:11px 0 14px}

/* lista de itens, agrupada por semana */
.lista-semanas{display:flex; flex-direction:column; gap:20px}
.semanas-extra{display:flex; flex-direction:column; gap:20px}
.semanas-extra[hidden]{display:none}
.ver-mais-semanas{align-self:flex-start; background:transparent; border:1px solid var(--linha-forte); border-radius:999px; padding:8px 16px; font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer}
.ver-mais-semanas:hover{border-color:var(--dourado-forte); color:var(--dourado-forte)}
.semana-rot{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 8px}
.item-vazio{grid-template-columns:1fr !important; color:var(--ink-faint); font-weight:400}
.itens{background:var(--card); border:1px solid var(--linha); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.item{display:grid; grid-template-columns:104px 128px 1fr auto; gap:16px; align-items:center; padding:15px 20px; border-top:1px solid var(--linha)}
.item:first-child{border-top:0}
.item .data{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12.5px; color:var(--ink-faint)}
.item .tipo{font-size:12px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em}
.item .titulo{font-weight:600; color:var(--ink)}
.item .titulo small{display:block; font-weight:400; color:var(--ink-faint); font-size:12.5px; margin-top:2px}
.badge{font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:4px 10px; border-radius:7px; white-space:nowrap}
.badge.ok{background:var(--ok-bg); color:var(--ok)}
.badge.espera{background:var(--espera-bg); color:var(--espera)}
.badge.producao{background:var(--producao-bg); color:var(--producao)}
.badge.agendado{background:#ece7db; color:var(--ink-soft)}
.badge.grav{background:#efe3c8; color:#8a6410}
/* item de "gravação" (Semana 0 do 1º cronograma) — sem coluna de data/tipo */
.item.item-grav{grid-template-columns:auto 1fr; gap:14px; background:#f4efe3}
.item.item-grav .titulo small{color:#7a5c14}
@media (max-width:720px){
  .item{grid-template-columns:1fr auto; gap:4px 12px}
  .item .data{grid-column:1}
  .item .tipo{grid-column:1}
  .item .titulo{grid-column:1/-1; order:3}
  .item .badge{grid-row:1; grid-column:2}
  /* gravação: badge e título empilhados e alinhados à esquerda (a regra
     genérica acima jogava o badge pra 2ª coluna e desalinhava) */
  .item.item-grav{grid-template-columns:1fr; gap:6px}
  .item.item-grav .badge{grid-column:1; grid-row:auto; justify-self:start}
  .item.item-grav .titulo{grid-column:1; order:2}
}

/* card CTA de anúncio */
.cta{margin-top:36px; background:var(--preto); color:var(--dark-ink); border-radius:16px; padding:26px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.cta h3{font-size:19px; font-weight:800; color:#fff}
.cta p{margin:6px 0 0; color:var(--dark-ink-mut); font-size:13.5px; max-width:52ch}
.btn-dourado{background:var(--dourado); color:#1a1712; border:0; border-radius:10px; padding:12px 22px; font:inherit; font-weight:700; font-size:14.5px; cursor:pointer; text-decoration:none; display:inline-block}
.btn-dourado:hover{background:#e6c877}

/* card "em breve" */
.embreve{margin-top:14px; border:1px dashed var(--linha-forte); border-radius:14px; padding:18px 20px; color:var(--ink-faint); font-size:13.5px; background:#fbfaf7}

/* resultados dos anúncios */
.res-resumo{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:6px}
@media (max-width:820px){.res-resumo{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.res-resumo{grid-template-columns:1fr}}
.res-kpi{background:var(--card); border:1px solid var(--linha); border-radius:12px; padding:15px 18px; box-shadow:var(--shadow)}
.res-kpi .v{font-family:"Archivo",sans-serif; font-weight:800; font-size:23px; color:var(--ink); line-height:1.1}
.res-kpi .l{font-size:12px; color:var(--ink-faint); margin-top:4px; line-height:1.35}
.res-spark{display:block; width:100%; height:26px; margin-top:10px}
.res-tendencia-aviso{font-size:12px; color:var(--ink-faint); margin:10px 0 0; font-style:italic}
.res-nota{
  position:relative;
  background:#f2efe6; border:1px solid var(--linha-forte); border-left:3px solid var(--ink-soft);
  border-radius:10px; padding:12px 15px 12px 40px; margin:14px 0 0;
  font-size:13px; line-height:1.55; color:var(--ink-soft);
}
.res-nota::before{
  content:"i"; position:absolute; left:13px; top:12px;
  width:18px; height:18px; border-radius:50%;
  background:var(--ink-soft); color:#fff; font-family:"Archivo",sans-serif; font-weight:800;
  font-size:11px; line-height:18px; text-align:center;
}
.res-nota b{color:var(--ink)}
.res-sub{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:24px 0 10px}
.res-sub:first-child{margin-top:0}
.res-lista{background:var(--card); border:1px solid var(--linha); border-radius:12px; box-shadow:var(--shadow); overflow:hidden}
.res-item{padding:13px 18px; border-top:1px solid var(--linha)}
.res-item:first-child{border-top:0}
.res-item .l1{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.res-item .l1 .nome{font-weight:600; color:var(--ink); font-size:14px; overflow-wrap:anywhere}
.res-item .l1 .plat{font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 7px; border-radius:5px; background:#eef1f5; color:#3a4a5c}
.res-item .per{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; color:var(--ink-faint); margin-top:3px}
/* números da campanha em 3 colunas alinhadas (não amontoados à esquerda) */
.res-item .nums{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:10px}
.res-item .nums span{display:flex; flex-direction:column; gap:1px; font-size:11.5px; color:var(--ink-faint); line-height:1.3}
.res-item .nums b{font-family:"Archivo",sans-serif; font-weight:800; color:var(--ink); font-size:15px; margin:0}
@media (max-width:440px){.res-item .nums{gap:8px}.res-item .nums b{font-size:13.5px}.res-item .nums span{font-size:10.5px}}
.res-vazio{border:1px dashed var(--linha-forte); border-radius:14px; padding:18px 20px; color:var(--ink-faint); font-size:13.5px; background:#fbfaf7}
.res-frase{background:#fffdf6; border:1px solid var(--dourado); border-left:4px solid var(--dourado); border-radius:12px; padding:13px 17px; margin:0 0 18px; font-size:14.5px; font-weight:500; line-height:1.5; color:var(--ink)}
.nota-semana{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:11px 0 16px}

/* Seus materiais — lista de PDFs */
.docs{background:var(--card); border:1px solid var(--linha); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.doc-item{display:flex; align-items:center; gap:8px 12px; width:100%; text-align:left; font:inherit; cursor:pointer;
  background:transparent; border:0; border-top:1px solid var(--linha); padding:15px 20px; color:var(--ink)}
.doc-item:first-child{border-top:0}
.doc-item:hover{background:#fbf9f3}
/* só o NOME quebra linha se faltar espaço; a tag e "Baixar PDF" ficam fixos */
.doc-item .doc-nome{font-weight:600; font-size:14.5px; min-width:0; overflow-wrap:anywhere}
.doc-item .doc-tag{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--dourado-forte); background:#fbf1de; border:1px solid var(--dourado); border-radius:999px; padding:3px 9px; white-space:nowrap; flex:none}
.doc-item .doc-tag.neutra{color:var(--ink-soft); background:#efece4; border-color:var(--linha-forte)}
.doc-item .doc-baixar{font-weight:700; font-size:12.5px; color:var(--dourado-forte); white-space:nowrap; margin-left:auto; flex:none}
/* só em celular BEM estreito (<=365px, tipo Android de 360): "Baixar PDF"
   desce pra própria linha pra o nome não quebrar no meio da palavra
   ("Contrat/o"). Acima disso segue tudo em 1 linha (preferência do usuário). */
@media (max-width:365px){
  .doc-item{flex-wrap:wrap}
  .doc-item .doc-baixar{flex-basis:100%; margin-left:0; margin-top:6px}
}

/* grupos em "Seus materiais": documentos do contrato + bloco de Bônus */
.grupo-rot{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); margin:22px 0 9px}
.grupo-rot:first-child{margin-top:0}

.bloco-bonus{background:#fbf1de; border:1px solid var(--dourado); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden}
.bonus-topo{display:flex; align-items:center; gap:10px; padding:15px 20px 13px; border-bottom:1px solid #ecdcb4}
.bonus-selo{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:#1a1500; background:var(--dourado);
  border-radius:999px; padding:4px 11px; flex:none}
.bonus-topo p{margin:0; font-size:12.5px; color:#7a5c14; line-height:1.4}
.bloco-bonus .doc-item{border-top:1px solid #ecdcb4}
.bloco-bonus .doc-item:first-of-type{border-top:0}
.bloco-bonus .doc-item:hover{background:#f7ead0}
.bloco-bonus .doc-baixar{color:#8a6410}

/* bloqueio leve — contrato encerrado / acesso inativo */
.acesso-inativo{max-width:460px; margin:70px auto; text-align:center; padding:32px 24px}
.acesso-inativo h1{font-size:22px; font-weight:800; margin-bottom:14px}
.acesso-inativo p{color:var(--ink-soft); font-size:14px; margin:0 0 10px}
.acesso-inativo .btn-sair{margin-top:22px; color:var(--ink-soft); border:1px solid var(--linha-forte); background:#fff}
.acesso-inativo .btn-sair:hover{border-color:var(--dourado-forte); color:var(--dourado-forte)}

.rodape{max-width:1240px; margin:16px auto 0; padding:0 24px; color:var(--ink-faint); font-size:12.5px}
.rodape .retrato{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ---------- login ---------- */
.login-page{min-height:100vh; display:flex; flex-direction:column; background:var(--preto)}
.login-box{margin:auto; width:100%; max-width:394px; padding:0 24px}
.login-box img.logo{height:30px; display:block; margin:0 auto 30px}
.login-card{background:var(--preto-2); border:1px solid var(--dark-line); border-radius:16px; padding:30px 28px}
.login-card h1{color:#fff; font-size:21px; font-weight:800; margin-bottom:4px}
.login-card .sub{color:var(--dark-ink-mut); font-size:13px; margin-bottom:22px}
.campo{margin-bottom:15px}
.campo label{display:block; font-size:12.5px; color:var(--dark-ink-mut); margin-bottom:6px; letter-spacing:.02em}
.campo input,.campo select,.campo textarea{
  width:100%; max-width:100%; background:var(--preto-3); border:1px solid var(--dark-line); color:var(--dark-ink);
  border-radius:9px; padding:11px 13px; font:inherit; font-size:16px; /* 16px = iOS não dá zoom */
}
/* input de data no iOS/Safari fica com altura maluca — normaliza */
.campo input[type="date"]{
  -webkit-appearance:none; appearance:none; min-height:46px; line-height:1.2;
  display:block; text-align:left;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none; border-color:var(--dourado)}
.login-card .btn-dourado{width:100%; text-align:center; margin-top:6px; padding:13px}
.login-erro{background:#3a221f; border:1px solid #6b3a34; color:#f0c4bd; font-size:13px; border-radius:9px; padding:10px 13px; margin-bottom:15px; display:none}
.login-demo{margin-top:20px; font-size:12px; color:var(--dark-ink-mut); line-height:1.7}
.login-demo b{color:var(--dourado)}
.login-demo code{background:var(--preto-3); border:1px solid var(--dark-line); border-radius:5px; padding:1px 6px; font-family:"IBM Plex Mono",ui-monospace,monospace; color:var(--dark-ink)}

/* ---------- formulário de anúncio (claro, estilo briefing) ---------- */
.form-wrap{max-width:720px; margin:0 auto; padding:34px 20px 80px}
@media (max-width:520px){
  .form-wrap{padding:22px 14px 70px}
  .form-card{padding:18px 16px}
}
.form-wrap h1{font-size:25px; font-weight:800; margin-bottom:6px}
.form-wrap .lead{color:var(--ink-soft); margin-bottom:26px}
.form-card{background:var(--card); border:1px solid var(--linha); border-radius:16px; box-shadow:var(--shadow); padding:28px}
.form-card .campo label{color:var(--ink-soft); font-weight:600; font-size:13px}
.form-card .campo input,.form-card .campo select,.form-card .campo textarea{
  background:#fff; border:1px solid var(--linha-forte); color:var(--ink);
}
.form-card .campo input:focus,.form-card .campo select:focus,.form-card .campo textarea:focus{border-color:var(--dourado-forte)}
.form-card .campo .ajuda{font-size:12px; color:var(--ink-faint); margin-top:4px}
.form-card fieldset{border:0; padding:0; margin:0 0 15px}
.form-card .linha2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){.form-card .linha2{grid-template-columns:1fr}}
.radio-linha{display:flex; gap:18px; flex-wrap:wrap; margin-top:4px}
.radio-linha label{display:flex; align-items:center; gap:7px; font-weight:400; color:var(--ink); font-size:14px}
.check-lista{display:grid; grid-template-columns:1fr; gap:11px; margin-top:4px}
.check-lista label{display:flex; align-items:flex-start; gap:10px; font-weight:400; color:var(--ink); font-size:14.5px; line-height:1.4}
.check-lista input{margin-top:3px; flex:none; width:17px; height:17px}
#intencao-outro-wrap{margin-top:11px; display:none}

/* multi-seleção que abre ao tocar (nativo: <details>) — enxuto no celular */
.multi{border:1px solid var(--linha-forte); border-radius:9px; background:#fff; margin-top:4px}
.multi > summary{
  list-style:none; cursor:pointer; padding:12px 13px; font-size:14.5px; color:var(--ink-faint);
  display:flex; align-items:center; justify-content:space-between; gap:8px; user-select:none;
}
.multi > summary::-webkit-details-marker{display:none}
.multi > summary::after{content:"⌄"; color:var(--ink-faint); font-size:17px; line-height:1; transition:transform .15s}
.multi[open] > summary{color:var(--ink); border-bottom:1px solid var(--linha)}
.multi[open] > summary::after{transform:rotate(180deg)}
.multi > summary.tem-selecao{color:var(--ink); font-weight:600}
.multi .multi-corpo{padding:13px}
@media (min-width:520px){ .multi .check-lista{grid-template-columns:1fr 1fr; gap:11px 22px} }
.condicional{border-left:3px solid var(--dourado); background:#fdf9f0; padding:14px 16px; border-radius:0 10px 10px 0; margin:6px 0 15px}
.so-link{font-size:12.5px; color:var(--ink-faint); margin:8px 0 0}

/* mensagem em destaque: mandar arquivos pelo WhatsApp */
.destaque-wpp{display:flex; gap:12px; align-items:flex-start; background:#eaf6ee; border:1px solid #b9e0c6; border-radius:10px; padding:14px 16px; margin-top:14px}
.destaque-wpp .ic{font-size:20px; line-height:1.2}
.destaque-wpp .tx{font-size:13.5px; color:#1f5c3a; line-height:1.5}
.destaque-wpp .tx b{color:#154029}

/* ícone de ajuda com dica no hover/foco */
.ajuda-icone{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%;
  background:var(--linha-forte); color:var(--ink-soft);
  font-size:11px; font-weight:700; cursor:help; margin-left:6px;
  position:relative; vertical-align:middle; font-family:"Hanken Grotesk",sans-serif;
}
.ajuda-icone:hover,.ajuda-icone:focus{background:var(--dourado-forte); color:#fff; outline:none}
.ajuda-icone::after{
  content:attr(data-dica);
  position:absolute; left:0; bottom:calc(100% + 9px);
  width:max-content; max-width:min(250px, calc(100vw - 44px)); white-space:normal;
  background:var(--preto); color:var(--dark-ink); font-size:12px; font-weight:400;
  line-height:1.45; text-align:left; padding:9px 12px; border-radius:8px;
  box-shadow:0 10px 28px -10px rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .12s; z-index:20;
}
.ajuda-icone::before{
  content:""; position:absolute; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--preto);
  opacity:0; transition:opacity .12s; z-index:20;
}
.ajuda-icone:hover::after,.ajuda-icone:focus::after,
.ajuda-icone:hover::before,.ajuda-icone:focus::before{opacity:1}

/* aviso de antecedência no banner e no form — dourado em destaque */
.aviso-24h{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:#e8c877;
  margin-top:14px; padding-left:11px; border-left:2px solid #e8c877;
}
.form-wrap .aviso-24h{
  color:#8a6410; border-left-color:#c99b2e; background:#fdf6e6;
  padding:9px 12px; border-radius:0 8px 8px 0; margin:0 0 22px;
}
.form-card .btn-dourado{width:100%; text-align:center; padding:14px; margin-top:8px}
.form-ok{display:none; text-align:center; padding:34px 20px}
.form-ok .tick{width:54px; height:54px; border-radius:50%; background:var(--ok-bg); color:var(--ok); display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 16px}
.form-ok h2{font-size:20px; font-weight:800; margin-bottom:8px}
.form-ok p{color:var(--ink-soft)}

/* ============ Portal do Parceiro (parceiro.html) ============ */
.wrap h1{font-family:"Archivo",sans-serif; font-weight:800; font-size:26px; margin:0 0 6px}
.lead-parceiro{color:var(--ink-faint); font-size:13.5px; margin:0 0 14px; max-width:62ch; line-height:1.55}

/* aviso importante (confidencial) — destaque leve, nunca texto solto */
.aviso-confidencial{display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  background:#fbf1de; border:1px solid var(--dourado); border-radius:10px;
  padding:11px 15px; margin:0 0 28px}
.aviso-confidencial > span:first-child{font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#1a1500; background:var(--dourado); border-radius:999px; padding:3px 10px; flex:none}
.aviso-confidencial-txt{font-size:12.5px; color:#7a5c14; line-height:1.45}

/* aceite do termo */
.termo{background:var(--card); border:1px solid var(--linha); border-radius:14px; box-shadow:var(--shadow); padding:22px 24px; margin:0 0 18px}
.termo h2{font-family:"Archivo",sans-serif; font-weight:800; font-size:16px; color:var(--ink); margin:0 0 12px; letter-spacing:-.01em}
.termo p{font-size:14px; color:var(--ink-soft); margin:0 0 10px}
.termo ol{margin:0; padding-left:20px}
.termo ol li{font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:9px}
.termo strong{color:var(--ink)}
.aceite-check{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ink); margin:0 0 16px; line-height:1.45}
.aceite-check input{margin-top:3px; flex:none; width:17px; height:17px}
#btn-aceitar{display:inline-block; width:auto; padding:12px 24px}
#btn-aceitar:disabled{opacity:.5; cursor:not-allowed}

/* lista por cliente — cada empresa é um <details>, abre/fecha com a seta
   (2026-09-16, pedido do usuário: antes vinha tudo aberto de uma vez) */
.cli-p{background:var(--card); border:1px solid var(--linha); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; margin-bottom:16px}
.cli-p-topo{
  padding:16px 22px; border-bottom:1px solid var(--linha); display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  cursor:pointer; list-style:none; user-select:none;
}
.cli-p-topo::-webkit-details-marker{display:none}
.cli-p-topo:hover{background:#fbf9f3}
.cli-p[open] .cli-p-seta{transform:rotate(90deg)}
.cli-p-seta{flex:none; width:16px; height:16px; color:var(--ink-faint); transition:transform .15s ease}
/* nome + ramo sempre empilhados (padrão, 2026-09-16) — nunca lado a lado,
   pra não quebrar torto quando o ramo é um texto longo */
.cli-p-titulos{display:flex; flex-direction:column; gap:2px; min-width:0}
.cli-p-nome{font-family:"Archivo",sans-serif; font-weight:800; font-size:17px; color:var(--ink); letter-spacing:-.01em}
.cli-p-ramo{font-size:12px; color:var(--ink-faint)}

/* período do cronograma que gerou o roteiro/guia mostrados — só isso, sem
   empilhar versão antiga (decisão do usuário: fica só a atual na tela) */
.periodo-ref{
  margin:12px 22px 2px; padding:0;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.04em;
  color:var(--ink-soft); font-weight:600;
}

.doc-p{display:flex; align-items:center; gap:12px; width:100%; text-align:left; font:inherit; cursor:pointer;
  background:transparent; border:0; padding:12px 22px 12px 44px; color:var(--ink)}
.doc-p:hover{background:#fbf9f3}
.doc-p-nome{font-weight:600; font-size:14.5px}
.doc-p-nome small{display:block; font-weight:400; font-size:11.5px; color:var(--ink-faint); margin-top:1px}
.doc-p-baixar{margin-left:auto; font-weight:700; font-size:12.5px; color:var(--dourado-forte); white-space:nowrap; flex:none}
.doc-p.indisp{color:var(--ink-faint); cursor:default}
.doc-p.indisp .doc-p-baixar{color:var(--ink-faint); font-weight:500}

/* rodapé exclusivo do Portal do Parceiro, com a marca PubliHub — não usa
   .rodape/.retrato (isso é da Área do Cliente, Agência PUBLI-branded, intocado) */
.rodape-parceiro{background:var(--preto); margin-top:32px; padding:26px 24px 22px}
.rodape-parceiro-in{max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.rodape-parceiro-marca{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.rodape-parceiro-produto{font-family:"Archivo",sans-serif; font-weight:800; font-size:17px; color:var(--dark-ink); letter-spacing:-.01em}
.rodape-parceiro-produto .rodape-parceiro-ia{color:var(--dourado)}
.rodape-parceiro-slogan{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dark-ink-mut)}
.rodape-parceiro-aviso{margin:0; font-size:12px; color:var(--dark-ink-mut)}
@media (max-width:600px){ .rodape-parceiro-in{flex-direction:column; align-items:flex-start} }