/* ============================================================
   RADAR DE CARTÕES PJ — estilos próprios do app
   A base (tokens, botões, quiz, carregamento) vem de base.css,
   a mesma do funil. Aqui só o que é do Radar.
   ============================================================ */

.palco{outline:none}
.topo-in{grid-template-columns:1fr auto 1fr}
.topo-produto{justify-self:end;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acao-claro)}

/* ---------- início ---------- */
.inicio{max-width:520px;margin:0 auto}
.ini-selo{
  display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;
  background:var(--acao-suave);color:var(--acao-txt);font-size:11.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
}
.ini-selo .ico{width:16px;height:16px}
.ini-h1{margin:14px 0 0;font-size:clamp(27px,7vw,36px);line-height:1.12}
.ini-h1 .destaque-txt{color:var(--acao-txt);white-space:nowrap}
.ini-sub{margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--txt-2)}

.ini-entregas{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.ini-entregas li{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
  background:#fff;border:1px solid var(--borda);box-shadow:var(--sombra);
  font-size:15px;font-weight:700;color:var(--navy);line-height:1.35;
  animation:sobe 300ms cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i) * 70ms);
}
.ini-ic{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;background:var(--navy);color:var(--acao-claro)}
.ini-ic .ico{width:18px;height:18px}

.ini-assina{display:flex;align-items:center;gap:11px;margin:20px 0 0;padding:12px 14px;border-radius:14px;background:var(--bg-2)}
.ini-assina img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--acao);flex:0 0 auto}
.ini-assina > span{display:flex;flex-direction:column;line-height:1.3;font-size:13px;color:var(--txt-2)}
.ini-assina b{font-size:15px;color:var(--navy);font-weight:900}

.ini-cnpj{margin-top:22px;padding:18px 16px;border-radius:18px;background:#fff;border:1.5px solid var(--borda);box-shadow:var(--sombra)}
.ini-cnpj label{display:block;font-size:14px;font-weight:800;color:var(--navy);margin-bottom:8px}
.ini-cnpj label span{font-weight:500;color:var(--txt-2)}
.ini-cnpj input{
  width:100%;min-height:56px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--borda-forte);
  font:inherit;font-size:19px;font-weight:700;letter-spacing:.02em;text-align:center;color:var(--navy);background:#fff;
}
.ini-cnpj input:focus{outline:none;border-color:var(--acao);box-shadow:0 0 0 4px rgba(0,134,86,.16)}
.campo-ajuda{display:flex;gap:7px;align-items:flex-start;margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--txt-2)}
.campo-ajuda .ico{width:15px;height:15px;color:var(--acao-icone);margin-top:1px}
.campo-erro{margin:10px 0 0;font-size:13.5px;font-weight:700;color:var(--erro)}
.ini-cnpj .acao{margin-top:14px}

.empresa-mini{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;
  padding:14px 16px;border-radius:14px;background:#fff;border:1.5px solid var(--acao);box-shadow:var(--sombra);
}
.empresa-mini-txt{display:flex;flex-direction:column;min-width:0}
.empresa-mini-txt b{font-size:15.5px;font-weight:900;color:var(--navy);overflow-wrap:anywhere}
.empresa-mini-txt span{font-size:12.5px;color:var(--txt-2)}
.empresa-mini-trocar{font-size:13px;font-weight:700;color:var(--acao-txt);text-decoration:underline;text-underline-offset:3px;flex:0 0 auto}

/* ---------- pergunta ---------- */
.pergunta{max-width:520px;margin:0 auto}
.perg-topo{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:10px;row-gap:8px;margin-bottom:16px}
.perg-voltar{grid-row:1 / span 2;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--bg-2);color:var(--navy)}
.perg-voltar .ico{width:20px;height:20px}
.perg-contador{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2)}
.perg-barra{display:block;height:6px;border-radius:99px;background:var(--bg-2);overflow:hidden}
.perg-barra i{display:block;height:100%;border-radius:99px;transform-origin:left;background:linear-gradient(90deg,var(--acao-txt),var(--acao-claro));transition:transform 380ms cubic-bezier(.2,.7,.3,1)}
.perg-apoio{margin:10px 0 0;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.72)}

/* ---------- resultado ---------- */
.resultado-radar{max-width:600px;margin:0 auto}
.res-cabeca h1{margin:14px 0 0;font-size:clamp(25px,6.6vw,33px);line-height:1.15}
.res-num{color:var(--verde)}
.res-sub{margin:10px 0 0;font-size:15.5px;color:var(--txt-2)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.chip{padding:6px 11px;border-radius:99px;background:var(--bg-2);border:1px solid var(--borda);font-size:12.5px;font-weight:700;color:var(--navy)}
.res-vazio{margin-top:20px;padding:18px;border-radius:16px;background:var(--bg-2)}
.res-vazio h2{font-size:19px}
.res-vazio p{margin:8px 0 0;color:var(--txt-2)}

.bloco{margin-top:30px}
.bloco-titulo{font-size:clamp(20px,5.2vw,24px);line-height:1.2}
.bloco-sub{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--txt-2)}

/* plano de pedidos */
.plano{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;position:relative}
.plano-item{
  display:flex;gap:14px;padding:16px;border-radius:18px;background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:#fff;box-shadow:0 12px 30px rgba(6,28,45,.16);
  animation:sobe 320ms cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i) * 90ms);
}
.plano-n{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--acao);color:var(--acao-ink);font-weight:900;font-size:17px;
}
.plano-txt{display:flex;flex-direction:column;min-width:0}
.plano-papel{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acao-claro)}
.plano-nome{margin-top:3px;font-size:17px;font-weight:900;color:#fff;text-decoration:none;letter-spacing:-.01em;line-height:1.25}
.plano-nome:hover{text-decoration:underline}
.plano-emissor{font-size:13px;color:rgba(255,255,255,.7)}
.plano-txt p{margin:8px 0 0;font-size:14px;line-height:1.45;color:rgba(255,255,255,.88)}

/* dicas */
.dicas{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.dicas li{display:flex;gap:12px;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--borda);box-shadow:var(--sombra)}
.dica-ic{width:36px;height:36px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;background:var(--acao-suave);color:var(--acao-txt)}
.dica-ic .ico{width:19px;height:19px}
.dicas b{font-size:15px;color:var(--navy);font-weight:800}
.dicas p{margin:3px 0 0;font-size:13.5px;line-height:1.45;color:var(--txt-2)}

/* arte do cartão */
.arte{
  position:relative;width:100%;aspect-ratio:1.586;border-radius:12px;padding:10px 11px;
  background:linear-gradient(135deg,#0E273F,#061323 60%,#1A3552);color:#fff;overflow:hidden;
  box-shadow:0 8px 18px rgba(6,28,45,.22);
}
.arte::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%)}
.arte.dourada{background:linear-gradient(135deg,#2FA86B,#008656 55%,#0C6C43);color:#fff}
.arte-emissor{display:block;font-size:9.5px;font-weight:900;letter-spacing:.04em;line-height:1.15;max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arte-chip{position:absolute;left:11px;top:44%;width:20px;height:15px;border-radius:4px;background:linear-gradient(135deg,#E9D2A7,#B48A55)}
.arte.dourada .arte-chip{background:linear-gradient(135deg,#EAF6F0,#A9CFBC)}
.arte-bandeira{position:absolute;right:10px;bottom:8px;left:10px;font-size:9px;font-weight:900;
  letter-spacing:.06em;text-transform:uppercase;opacity:.85;text-align:right;line-height:1.1}
/* bandeiras longas ("Mastercard ou Visa") quebravam em duas linhas e caiam em
   cima do chip. Na arte pequena o rotulo vem abreviado (bandeiraCurta) e aqui
   fica travado em uma linha so. */
.arte.pequena .arte-bandeira{font-size:8px;letter-spacing:.02em;bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arte.pequena{width:92px;flex:0 0 auto}

/* cartão do resultado */
.cc-lista{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.cc{
  padding:16px;border-radius:20px;background:#fff;border:1.5px solid var(--borda);box-shadow:var(--sombra);
  animation:sobe 320ms cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(min(var(--i),6) * 60ms);
  scroll-margin-top:calc(var(--hdr) + 16px);
}
.cc.destaque{border-color:var(--verde);box-shadow:0 2px 6px rgba(12,108,67,.06),0 14px 34px rgba(12,108,67,.12)}
.cc-topo{display:flex;gap:14px;align-items:flex-start}
.cc-titulo{display:flex;flex-direction:column;gap:3px;min-width:0}
.cc-emissor{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cc-titulo h3{font-size:17px;line-height:1.25;font-weight:900;color:var(--navy);letter-spacing:-.015em;overflow-wrap:anywhere}
.selo-faixa{align-self:flex-start;margin-top:4px;padding:4px 9px;border-radius:7px;font-size:10.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.selo-faixa.alta{background:var(--verde);color:#fff}
.selo-faixa.media{background:var(--verde-suave);color:var(--verde)}
.selo-faixa.baixa{background:var(--bg-2);color:var(--txt-2)}
.tag-exemplo{display:inline-block;margin-left:6px;vertical-align:middle;font-style:normal;padding:2px 6px;border-radius:5px;background:#FFF1D6;color:#8A5A00;font-size:9.5px;font-weight:900;letter-spacing:.08em}

.cc-fatos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.cc-fato{padding:9px 10px;border-radius:11px;background:var(--bg-2);display:flex;flex-direction:column;gap:3px;min-width:0}
.cc-fato span{font-size:10.5px;font-weight:700;color:var(--txt-2);text-transform:uppercase;letter-spacing:.05em}
.cc-fato b{font-size:13px;line-height:1.25;color:var(--navy);font-weight:800;overflow-wrap:anywhere}

.cc-motivos{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.cc-motivos li{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.4;color:var(--txt)}
.cc-motivos .ico{width:16px;height:16px;margin-top:2px;flex:0 0 auto}
.cc-motivos li.ok .ico{color:var(--verde)}
.cc-motivos li.aviso{color:#7A5200}
.cc-motivos li.aviso .ico{color:var(--atencao)}

.cc-det{margin-top:14px;border-top:1px solid var(--borda);padding-top:4px}
.cc-det summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;
  padding:10px 0;font-size:14.5px;font-weight:800;color:var(--acao-txt);
}
.cc-det summary::-webkit-details-marker{display:none}
.cc-det summary .ico{width:18px;height:18px;transition:transform var(--trans)}
.cc-det[open] summary .ico{transform:rotate(45deg)}
.cc-rot{margin:10px 0 6px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2)}
.cc-passos{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14.5px;line-height:1.45;color:var(--txt)}
.cc-passos li::marker{color:var(--acao-txt);font-weight:900}
.cc-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cc-tags li{padding:5px 10px;border-radius:8px;background:var(--bg-2);font-size:12.5px;font-weight:700;color:var(--navy)}
.cc-obs{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#FBF6EE;font-size:13px;line-height:1.45;color:var(--txt-2)}
.btn.cc-link{margin-top:14px;min-height:48px;font-size:14px}
.btn.secundaria{animation:none}
.cc-fonte{margin:10px 0 0;font-size:11.5px;color:var(--txt-2)}

/* fora do perfil */
details.fora{border:1.5px dashed var(--borda-forte);border-radius:18px;padding:4px 16px 14px}
details.fora summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:12px 0;font-size:16px;font-weight:800;color:var(--navy)}
details.fora summary::-webkit-details-marker{display:none}
details.fora summary .ico{width:18px;height:18px;color:var(--txt-2)}
.fora-lista{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.fora-lista li{padding:12px;border-radius:12px;background:var(--bg-2)}
.fora-lista b{display:block;font-size:14.5px;color:var(--navy)}
.fora-lista span{font-size:12.5px;color:var(--txt-2)}
.fora-lista p{margin:6px 0 0;font-size:13px;font-weight:700;color:var(--erro)}

.res-acoes{display:grid;gap:10px;margin-top:30px}
.aviso-exemplo{display:flex;gap:8px;align-items:flex-start;margin:22px 0 0;padding:12px 14px;border-radius:12px;background:#FFF6E3;border:1px dashed var(--atencao);font-size:13px;line-height:1.45;color:#7A5200;font-weight:600}
.aviso-exemplo .ico{width:17px;height:17px;flex:0 0 auto;margin-top:1px}
.legal{margin:18px 0 0;font-size:11.5px;line-height:1.55;color:var(--txt-2)}

@media (min-width:620px){
  .arte.pequena{width:110px}
  .res-acoes{grid-template-columns:1fr 1fr}
}

/* ---------- impressão / PDF ---------- */
@media print{
  .topo,.res-acoes,.btn-texto,.cc-link,.perg-voltar,.aviso-exemplo{display:none !important}
  body{background:#fff}
  .palco{max-width:none;padding:0}
  .cc,.plano-item,.dicas li{break-inside:avoid;box-shadow:none;animation:none}
  .cc-det{display:block}
  .cc-det > *{display:block}
  details.fora > *{display:block}
  .plano-item{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
  .plano-nome,.plano-txt p{color:var(--navy)}
  .plano-emissor{color:var(--txt-2)}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (prefers-reduced-motion:reduce){
  .ini-entregas li,.plano-item,.cc{animation:none}
}
.cc-fato.largo{grid-column:1 / -1}
.cc-fato.largo b{font-weight:700}
/* com um fato longo, os curtos dividem a linha em dois */
.cc-fatos:has(.largo){grid-template-columns:1fr 1fr}