/* panel-contato.css — /panel/contato/. Dono: chat MOOBY PANEL.

   Carrega DEPOIS do panel.css, que ja traz o tema azul/branco (tokens
   redefinidos em `body.painel`), o header, o rodape e a janela `.pn-app`.
   Aqui fica so o que e do formulario — nada de repetir o bloco de tokens. */

/* ---------- topo ---------- */
.pc-topo { padding-block: clamp(7rem, 13vw, 9rem) clamp(1.5rem, 3vw, 2.5rem); }
.pc-topo h1 {
  margin-top: 1rem; font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  letter-spacing: -.035em; line-height: 1.1; max-width: 20ch;
}
.pc-topo h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--azul), var(--ciano));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pc-topo__linha { color: var(--texto-suave); margin-top: 1rem; max-width: 58ch; font-size: 1.04rem; line-height: 1.65; }
.pc-topo > .container > * { animation: pn-sobe .7s cubic-bezier(.16,1,.3,1) backwards; }
.pc-topo > .container > *:nth-child(2) { animation-delay: .08s; }
.pc-topo > .container > *:nth-child(3) { animation-delay: .16s; }

/* ---------- grade ---------- */
.pc-corpo { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.pc-grade { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .pc-grade { grid-template-columns: 1.35fr .65fr; } }

/* ---------- formulario ---------- */
.pc-form {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-g); padding: clamp(1.3rem, 3vw, 2.4rem);
  box-shadow: 0 24px 60px rgba(12, 26, 48, .09);
  animation: pn-sobe .8s cubic-bezier(.16,1,.3,1) .1s backwards;
}
.pc-bloco { border: 0; padding: 0; margin: 0 0 1.8rem; }
.pc-bloco:last-of-type { margin-bottom: 1.2rem; }

.pc-legenda {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1rem; font-weight: 700; color: var(--texto);
  letter-spacing: -.01em; margin-bottom: .9rem; padding: 0;
}
.pc-legenda span {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(31, 95, 224, .11); border: 1px solid rgba(31, 95, 224, .22);
  color: var(--ciano); font-size: .8rem; font-weight: 700;
}
.pc-ajuda { color: var(--texto-fraco); font-size: .86rem; margin: -.4rem 0 .9rem; }

.pc-dupla { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .pc-dupla { grid-template-columns: 1fr 1fr; } }

.pc-campo { position: relative; display: grid; gap: .35rem; margin: 0 0 .9rem; }
.pc-campo--curto { max-width: 26rem; }
.pc-campo label { font-size: .88rem; font-weight: 600; color: var(--texto); }
.pc-campo label b { color: var(--azul); }

.pc-campo input, .pc-campo select, .pc-campo textarea {
  width: 100%; padding: .72rem .9rem;
  border: 1px solid var(--borda-viva); border-radius: var(--raio-p);
  background: var(--superficie-alta); color: var(--texto); font-size: .95rem;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.pc-campo textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }
.pc-campo input:focus, .pc-campo select:focus, .pc-campo textarea:focus {
  outline: none; background: var(--superficie);
  border-color: var(--azul); box-shadow: 0 0 0 4px rgba(31, 95, 224, .13);
}
/* o campo ja mostra o foco na propria caixa: o contorno global desenharia um
   segundo retangulo dentro dele */
.pc-campo input:focus-visible, .pc-campo select:focus-visible, .pc-campo textarea:focus-visible { outline: none; }

.pc-campo--ok input, .pc-campo--ok textarea { border-color: #37a06b; }
.pc-campo--erro input, .pc-campo--erro textarea { border-color: #c0392b; background: #fdf3f2; }

.pc-erro { display: none; font-size: .82rem; color: #a5281c; }
.pc-campo--erro .pc-erro { display: block; animation: pc-treme .3s; }
@keyframes pc-treme {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); } 75% { transform: translateX(4px); }
}

.pc-conta {
  position: absolute; right: .2rem; top: .1rem;
  font-family: var(--fonte-mono); font-size: .74rem; color: var(--texto-fraco);
}

/* ---------- honeypot: fora da tela, mas nao display:none ----------
   Robo que le CSS ignora campo escondido com display:none; fora da tela ele
   preenche. Continua fora do Tab por causa do tabindex="-1" no HTML. */
.pc-armadilha {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; margin: 0;
}

/* ---------- modulos: pilulas que marcam ---------- */
.pc-mods { display: flex; flex-wrap: wrap; gap: .5rem; }
.pc-mods label {
  cursor: pointer; user-select: none;
  font-size: .87rem; font-weight: 600; color: var(--texto-suave);
  padding: .5rem 1rem; border-radius: 100px;
  background: var(--superficie-alta); border: 1px solid var(--borda);
  transition: color .25s, background .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.pc-mods label:hover { color: var(--texto); border-color: var(--borda-viva); transform: translateY(-1px); }
.pc-mods input:checked + label {
  color: #fff; background: linear-gradient(120deg, var(--azul), var(--ciano));
  border-color: transparent; box-shadow: var(--brilho-azul);
}
.pc-mods input:focus-visible + label { outline: 2.5px solid var(--ciano); outline-offset: 3px; }

/* ---------- hospedagem: tres cartoes ---------- */
.pc-radios { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .pc-radios { grid-template-columns: repeat(3, 1fr); } }
.pc-radios label {
  cursor: pointer; display: grid; gap: .2rem;
  padding: .8rem .95rem; border-radius: var(--raio-p);
  background: var(--superficie-alta); border: 1px solid var(--borda);
  transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
}
.pc-radios label b { font-size: .9rem; color: var(--texto); }
.pc-radios label i { font-style: normal; font-size: .78rem; color: var(--texto-fraco); line-height: 1.4; }
.pc-radios label:hover { border-color: var(--borda-viva); transform: translateY(-2px); }
.pc-radios input:checked + label {
  border-color: var(--azul); background: rgba(31, 95, 224, .07);
  box-shadow: 0 6px 18px rgba(31, 95, 224, .13);
}
.pc-radios input:focus-visible + label { outline: 2.5px solid var(--ciano); outline-offset: 3px; }

/* ---------- envio ---------- */
.pc-envio { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.pc-botao { position: relative; overflow: hidden; min-width: 11rem; justify-content: center; }
/* brilho que atravessa o botao a cada 6s: e a unica coisa que se move sozinha
   deste lado da pagina */
.pc-botao::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-18deg); animation: pc-brilho 6s ease-in-out infinite;
}
@keyframes pc-brilho {
  0%, 64% { transform: skewX(-18deg) translateX(0); }
  94%, 100% { transform: skewX(-18deg) translateX(520%); }
}
.pc-botao[data-enviando="sim"]::after { display: none; }
.pc-botao:disabled { cursor: progress; opacity: .8; }
.pc-nota { font-size: .82rem; color: var(--texto-fraco); line-height: 1.5; max-width: 30ch; }

/* ---------- resultado ----------
   `display:grid` venceria o atributo `hidden` — o painel nasceria visivel
   dizendo que a pessoa enviou algo antes de escrever. Armadilha ja registrada
   pelo chat CONTATO; a regra abaixo e o que impede. */
.pc-resultado {
  display: grid; gap: .4rem; margin-top: 1.4rem;
  padding: 1rem 1.2rem; border-radius: var(--raio-p);
  background: rgba(31, 95, 224, .07); border: 1px solid rgba(31, 95, 224, .24);
  animation: pn-sobe .5s cubic-bezier(.16,1,.3,1);
}
.pc-resultado[hidden] { display: none; }
.pc-resultado h2 { font-size: 1.05rem; letter-spacing: -.01em; }
.pc-resultado p { font-size: .9rem; color: var(--texto-suave); line-height: 1.6; }
.pc-resultado--falhou { background: #fdf3f2; border-color: #f0cfc9; }
.pc-resultado--falhou h2 { color: #a5281c; }

/* ═════════ LATERAL ═════════ */
.pc-lado { display: grid; gap: 1rem; }
@media (min-width: 980px) { .pc-lado { position: sticky; top: 6rem; } }

/* ---------- previa: o mini portal ----------
   Disposicao tirada do CrediHub (o portal real que a Mooby construiu): topo
   escuro com faixa colorida correndo, menu lateral colapsado em icones que
   expande no hover, etiqueta do telefone colada na borda, e a tela inicial com
   capa + tiles + quadros. So a disposicao veio de la — cores, marca e dados
   sao do Panel e ficticios.

   Cada modulo marcado entra no menu e na tela: `:has()` no ancestral comum,
   porque a previa esta fora do <form>. SEM JavaScript. */
.pc-previa {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-g); padding: 1.1rem;
  animation: pn-sobe .8s cubic-bezier(.16,1,.3,1) .2s backwards;
}
.pc-previa__rotulo {
  display: flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-fraco); margin-bottom: .7rem;
}
/* ponto verde: "no ar" */
.pc-previa__vivo {
  width: 7px; height: 7px; border-radius: 50%; background: #22a06b;
  animation: pn-toca 1.8s ease-out infinite;
}
.pc-previa__nota { margin-top: .8rem; font-size: .78rem; color: var(--texto-fraco); line-height: 1.5; }

/* janela */
.mp {
  border-radius: var(--raio); overflow: hidden;
  border: 1px solid var(--borda); background: #f4f7fc;
  box-shadow: 0 18px 40px rgba(12, 26, 48, .12);
  font-size: 12px; line-height: 1.35;
}
.mp .pn-app__url span { color: var(--azul); font-weight: 600; }

/* ---------- mostrar / esconder por modulo ----------
   Tudo que depende de modulo nasce escondido; cada peca declara em `--on` a
   exibicao que tem quando aparece (flex, block, grid). Assim uma regra so por
   modulo acende menu, tile, quadro e etiqueta juntos. */
.mp [data-m] { display: none; }
/* `display: flex` aqui, e nao so no `--on`: o item "Pagina inicial" nao depende
   de modulo, entao nunca passava pela regra que acende — ficava como <span> em
   linha, sem altura, e a faixa de destaque saia torta. */
.mp-lat__item { display: flex; --on: flex; }
.mp-tile, .mp-q { --on: block; }
.mp-fone, .mp-sino__selo { --on: grid; }

.pc-grade:has(#m-fluxos:checked)      .mp [data-m~="fluxos"],
.pc-grade:has(#m-fone:checked)        .mp [data-m~="fone"],
.pc-grade:has(#m-estoque:checked)     .mp [data-m~="estoque"],
.pc-grade:has(#m-chamados:checked)    .mp [data-m~="chamados"],
.pc-grade:has(#m-planilha:checked)    .mp [data-m~="planilha"],
.pc-grade:has(#m-integracao:checked)  .mp [data-m~="integracao"],
.pc-grade:has(#m-organograma:checked) .mp [data-m~="organograma"],
.pc-grade:has(#m-indicadores:checked) .mp [data-m~="indicadores"],
.pc-grade:has(#m-outro:checked)       .mp [data-m~="outro"] {
  display: var(--on);
  animation: mp-entra .45s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes mp-entra { from { opacity: 0; transform: scale(.85); } }

/* com qualquer modulo marcado, o aviso de vazio sai */
.pc-grade:has(.pc-mods input:checked) .mp-vazio { display: none; }

/* ---------- topo ---------- */
.mp-topo {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: .75rem .8rem .6rem; color: #fff;
  background: linear-gradient(120deg, #0a2f7a, #133fa8);
}
/* a faixa que corre, como no CrediHub — aqui nos azuis do Panel */
.mp-topo::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, #5b90f5, #22d3ee, #1f5fe0, #7ab6ff, #5b90f5);
  background-size: 200% 100%; animation: mp-faixa 9s linear infinite;
}
@keyframes mp-faixa { to { background-position: 200% 0; } }

.mp-topo__marca {
  display: flex; align-items: center; gap: .45rem; min-width: 0;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px;
}
.mp-topo__marca > i {
  flex: none; width: 16px; height: 16px; border-radius: 5px;
  background: linear-gradient(140deg, #7ab6ff, #22d3ee);
}
.mp-topo__marca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-topo__acoes { display: flex; align-items: center; gap: .55rem; flex: none; }

.mp-sino { position: relative; display: grid; }
.mp-sino svg { width: 17px; height: 17px; fill: none; stroke: #dce9ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mp-sino__selo {
  position: absolute; top: -5px; right: -6px; min-width: 13px; height: 13px; padding: 0 3px;
  place-items: center; border-radius: 99px; background: #22d3ee; color: #0a2f7a;
  font-size: 8px; font-weight: 800; box-shadow: 0 0 0 1.5px #0f3791;
}
.mp-eu {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
  font-size: 9.5px; font-weight: 700;
}

/* ---------- corpo: menu lateral + tela ---------- */
.mp-corpo { position: relative; min-height: 20rem; }

/* menu colapsado em icones; expande sobre a tela no hover */
.mp-lat {
  position: absolute; left: 0; top: .7rem; z-index: 3;
  width: 38px; padding: .35rem 0;
  background: linear-gradient(180deg, #1f5fe0, #133fa8);
  border-radius: 0 11px 11px 0; box-shadow: 0 6px 18px rgba(10, 47, 122, .25);
  overflow: hidden; transition: width .2s ease;
}
.mp:hover .mp-lat { width: 132px; }
.mp-lat__item {
  position: relative; align-items: center; gap: .6rem;
  height: 30px; padding: 0 10px; white-space: nowrap; color: #fff;
}
.mp-lat__item svg {
  flex: none; width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.mp-lat__item em {
  font-style: normal; font-size: 11px; opacity: 0; transform: translateX(-4px);
  transition: opacity .16s, transform .16s;
}
.mp:hover .mp-lat__item em { opacity: 1; transform: none; }
.mp-lat__item--ativo { background: rgba(255,255,255,.2); font-weight: 700; }
/* selo de pendencia encostado no canto do icone — igual ao do CrediHub */
.mp-lat__selo {
  position: absolute; left: 19px; top: 3px; min-width: 11px; height: 11px; padding: 0 2px;
  display: grid; place-items: center; border-radius: 99px;
  background: #22d3ee; color: #0a2f7a; font-size: 7px; font-weight: 800;
  box-shadow: 0 0 0 1.5px #1f5fe0;
}

/* etiqueta do telefone: colada na borda esquerda, perto do rodape */
.mp-fone {
  position: absolute; left: 0; bottom: .8rem; z-index: 4;
  width: 30px; height: 30px; place-items: center;
  border-radius: 0 9px 9px 0; background: #22a06b; color: #fff;
  box-shadow: 0 4px 12px rgba(0, 60, 30, .3);
  animation: mp-entra .45s cubic-bezier(.2, 1.4, .4, 1), mp-balanca 3.2s ease-in-out 1s infinite;
}
.mp-fone svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
@keyframes mp-balanca { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-12deg); } 95% { transform: rotate(10deg); } }

.mp-tela { padding: .7rem .7rem .9rem 48px; display: grid; gap: .6rem; align-content: start; }

/* ---------- capa ---------- */
.mp-capa {
  display: flex; align-items: center; gap: .65rem;
  padding: .65rem .7rem; border-radius: 11px; color: #fff;
  background: linear-gradient(135deg, #0a2f7a 0%, #133fa8 55%, #1f5fe0 100%);
}
.mp-capa__anel {
  position: relative; flex: none; width: 38px; height: 38px;
  display: grid; place-items: center; place-content: center; text-align: center; line-height: 1;
}
.mp-capa__anel::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, #22d3ee, #7ab6ff, #1f5fe0, #22d3ee);
  animation: pn-gira 14s linear infinite;
}
.mp-capa__anel::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #0c2b6e; }
.mp-capa__anel b, .mp-capa__anel span { position: relative; z-index: 1; }
.mp-capa__anel b { font-size: 13px; font-weight: 800; }
.mp-capa__anel span { font-size: 7.5px; text-transform: uppercase; letter-spacing: .08em; color: #bcd3ff; }
.mp-capa__tit { font-size: 13.5px; font-weight: 800; }
.mp-capa__sub { font-size: 10px; color: #bcd3ff; margin-top: .1rem; }

/* ---------- tiles ---------- */
.mp-tiles { display: flex; flex-wrap: wrap; gap: .35rem; }
.mp-tiles:empty { display: none; }
.mp-tile {
  flex: 1 1 60px; padding: .35rem .5rem; border-radius: 8px;
  background: #fff; border: 1px solid var(--borda);
  font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-fraco);
}
.mp-tile b { display: block; font-size: 14px; color: var(--texto); letter-spacing: -.01em; }
.mp-tile--alerta b { color: #b5540d; }

/* ---------- quadros ---------- */
.mp-grade { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.mp-q {
  position: relative; overflow: hidden;
  padding: .55rem .55rem .5rem; border-radius: 9px;
  background: #fff; border: 1px solid var(--borda);
  box-shadow: 0 2px 6px rgba(12, 26, 48, .05);
}
.mp-q::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--azul); }
.mp-q__cab { display: flex; align-items: center; gap: .35rem; font-weight: 800; font-size: 10.5px; color: var(--texto); margin-bottom: .35rem; }
.mp-q__i {
  flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  background: rgba(31, 95, 224, .12);
}
.mp-q__i svg { width: 12px; height: 12px; fill: none; stroke: var(--azul); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mp-q__linha { font-size: 10px; color: var(--texto); }
.mp-q__det { display: flex; align-items: center; gap: .3rem; font-size: 9px; color: var(--texto-fraco); margin-top: .3rem; }
.mp-q__lin2 { display: flex; justify-content: space-between; align-items: center; gap: .4rem; font-size: 9.5px; color: var(--texto-suave); padding: .12rem 0; }
.mp-q__lin2 span:first-child { display: flex; align-items: center; gap: .25rem; }
.mp-mono { font-family: var(--fonte-mono); font-size: 9px; }

.mp-vivo {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #22a06b;
  animation: pn-toca 1.6s ease-out infinite;
}

/* fluxos: bolinhas de etapa, a atual pulsa */
.mp-etapas { display: flex; align-items: center; gap: 4px; margin-top: .3rem; }
.mp-etapas i { width: 9px; height: 9px; border-radius: 50%; background: var(--borda); }
.mp-etapas i.ok { background: var(--azul); }
.mp-etapas i.agora { background: #fff; border: 2px solid var(--azul); animation: pn-toca 1.6s ease-out infinite; }

/* estoque: barras de nivel */
.mp-barra { width: 40px; height: 5px; border-radius: 9px; background: var(--borda); overflow: hidden; }
.mp-barra i { display: block; height: 100%; border-radius: 9px; }
.mp-barra i.ok { width: 80%; background: #22a06b; }
.mp-barra i.baixo { width: 14%; background: #e07b39; }

/* chamados: tres colunas, a do meio "anda" */
.mp-kb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.mp-kb span {
  display: grid; text-align: center; padding: .25rem 0; border-radius: 5px;
  background: var(--superficie-alta); font-size: 7.5px; text-transform: uppercase; color: var(--texto-fraco);
}
.mp-kb b { font-size: 12px; color: var(--texto); }
.mp-kb__mov { background: rgba(31, 95, 224, .1); animation: mp-respira 3s ease-in-out infinite; }
@keyframes mp-respira { 50% { transform: translateY(-2px); } }

/* planilha colaborativa: cada coluna e de um setor; a da diretoria e so
   leitura para os outros. Uma celula esta sendo digitada; o cadeado fecha. */
.mp-trava { margin-left: auto; display: grid; }
.mp-trava svg { width: 13px; height: 13px; fill: none; stroke: #b5540d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mp-trava__arco { animation: mp-fecha 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes mp-fecha { 0%, 30% { transform: translateY(-3px); } 45%, 100% { transform: none; } }
.mp-cel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.mp-cel i {
  height: 11px; border-radius: 3px; background: var(--superficie-alta); border: 1px solid var(--borda);
  font-style: normal; font-size: 7px; font-weight: 700; color: var(--texto-fraco); text-align: center; line-height: 9px;
}
.mp-cel i.ok { background: rgba(31, 95, 224, .14); border-color: rgba(31, 95, 224, .25); }
.mp-cel i.so-ler { background: repeating-linear-gradient(135deg, #fff4ec, #fff4ec 3px, #fbe4d3 3px, #fbe4d3 6px); border-color: #f2d2bb; color: #b5540d; }
.mp-cel i.digitando { border-color: var(--azul); animation: mp-digita 1.4s steps(2) infinite; }
@keyframes mp-digita { 50% { background: rgba(31, 95, 224, .22); } }

/* integracao: um pulso vai e volta entre os sistemas */
.mp-sync { display: flex; align-items: center; gap: 3px; }
.mp-sync b {
  font-size: 8px; padding: .15rem .3rem; border-radius: 5px;
  background: var(--superficie-alta); border: 1px solid var(--borda); color: var(--texto-suave);
}
.mp-sync i { position: relative; flex: 1; height: 2px; background: var(--borda); overflow: hidden; border-radius: 2px; }
.mp-sync i::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 40%;
  background: var(--azul); animation: mp-vai 1.8s ease-in-out infinite alternate;
}
@keyframes mp-vai { to { transform: translateX(150%); } }

/* organograma: arvore de cargos, como arvore genealogica. As linhas sao
   pseudo-elementos sobre caixas aninhadas (mesma ideia do organograma do
   CrediHub): o desenho se ajusta sozinho a qualquer numero de filhos.
   Ocupa a linha inteira da grade — arvore precisa de largura para ler. */
.mp-q--org { grid-column: 1 / -1; }
.mp-org { display: flex; flex-direction: column; align-items: center; padding: .15rem 0 .1rem; }
.mp-org__no {
  position: relative; z-index: 1;
  padding: .12rem .45rem; border-radius: 5px; white-space: nowrap;
  background: #fff; border: 1px solid rgba(31, 95, 224, .35);
  font-size: 8.5px; font-weight: 700; color: var(--texto);
  animation: mp-brota .4s cubic-bezier(.2, 1.4, .4, 1) .15s backwards;
}
.mp-org__no--topo { background: var(--azul); border-color: var(--azul); color: #fff; animation-delay: 0s; }

/* cada nivel: descida do pai ate a barra, barra horizontal, descida ate o filho */
.mp-org__fil { position: relative; display: flex; justify-content: center; padding-top: 7px; }
.mp-org__fil::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 7px; background: rgba(31, 95, 224, .45);
}
.mp-org__ramo {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 7px .25rem 0;
}
.mp-org__ramo::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 7px; background: rgba(31, 95, 224, .45);
}
.mp-org__ramo::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(31, 95, 224, .45);
}
.mp-org__ramo:first-child::after { left: 50%; }
.mp-org__ramo:last-child::after { right: 50%; }
.mp-org__ramo:only-child::after { display: none; }

/* terceiro nivel: pessoas, entram por ultimo */
.mp-org__ramo .mp-org__ramo .mp-org__no,
.mp-org__pessoa { animation-delay: .3s; }
.mp-org__pessoa {
  display: block; width: 11px; height: 11px; border-radius: 50%;
  background: linear-gradient(140deg, #dbe7fb, #b9cdf0); border: 1px solid rgba(31, 95, 224, .35);
  animation: mp-brota .4s cubic-bezier(.2, 1.4, .4, 1) .3s backwards;
}
@keyframes mp-brota { from { opacity: 0; transform: scale(.6); } }

/* indicadores: barras que crescem */
.mp-gr { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.mp-gr i { flex: 1; border-radius: 2px 2px 1px 1px; background: linear-gradient(180deg, var(--azul), #0b4fd0); animation: pn-cresce .9s cubic-bezier(.16,1,.3,1) both; }
.mp-gr i:nth-child(1) { --h: 40%; } .mp-gr i:nth-child(2) { --h: 65%; animation-delay: .06s; }
.mp-gr i:nth-child(3) { --h: 50%; animation-delay: .12s; } .mp-gr i:nth-child(4) { --h: 85%; animation-delay: .18s; }
.mp-gr i:nth-child(5) { --h: 70%; animation-delay: .24s; } .mp-gr i:nth-child(6) { --h: 95%; animation-delay: .3s; }

.mp-q--outro { border-style: dashed; background: transparent; }
.mp-q--outro::before { display: none; }

.mp-vazio {
  padding: .7rem; border: 1px dashed var(--borda-viva); border-radius: 9px;
  font-size: 10.5px; color: var(--texto-fraco); text-align: center; line-height: 1.45;
}

/* menos movimento: o que cresce por animacao precisa do estado final */
@media (prefers-reduced-motion: reduce) {
  .mp-gr i { height: var(--h); }
}

/* ---------- o que acontece depois ---------- */
.pc-passos { list-style: none; padding: 0; display: grid; gap: .6rem; margin: 0; }
.pc-passos li {
  display: grid; grid-template-columns: 28px 1fr; gap: .1rem .7rem;
  align-items: start;
  padding: .85rem 1rem; border-radius: var(--raio-p);
  background: var(--superficie); border: 1px solid var(--borda);
}
.pc-passos__n {
  grid-row: span 2; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(31, 95, 224, .11); border: 1px solid rgba(31, 95, 224, .22);
  color: var(--ciano); font-size: .8rem; font-weight: 700;
}
.pc-passos b { font-size: .9rem; color: var(--texto); }
.pc-passos i { font-style: normal; font-size: .8rem; color: var(--texto-fraco); line-height: 1.5; }

/* ---------- ponte para o outro lado da Mooby ---------- */
.pc-outro {
  padding: 1.1rem; border-radius: var(--raio-g);
  background: linear-gradient(158deg, #1a56d6 0%, #133fa8 52%, #0a2f7a 100%);
  color: #eaf1ff; box-shadow: 0 20px 44px rgba(10, 47, 122, .22);
}
.pc-outro p { font-size: .88rem; line-height: 1.55; color: #cfe0ff; }
.pc-outro p b { color: #fff; }
.pc-outro p + p { margin-top: .4rem; }
/* mesma armadilha de especificidade da chamada da landing: o override de tema
   `body.painel .btn--fantasma` precisa ser vencido a partir de `body.painel` */
body.painel .pc-outro .btn--fantasma {
  margin-top: .9rem; border-color: rgba(255,255,255,.45); color: #fff;
  padding: .6rem 1.2rem; font-size: .88rem;
}
body.painel .pc-outro .btn--fantasma:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }

/* ---------- tela estreita ---------- */
@media (max-width: 620px) {
  .pc-form { padding: 1.1rem; }
  .pc-envio { gap: .7rem; }
  .pc-botao { width: 100%; }
  .pc-nota { max-width: none; }
}