/* Página Jornada IA Brizmo. Usa os tokens de brizmo.css. */

/* Hero */
.ji-hero { position: relative; overflow: hidden; padding: var(--s-7) 0 var(--s-9); color: #d9d4f5;
  background: radial-gradient(900px 520px at 85% 0%, rgba(255,216,77,.16), transparent 60%),
              radial-gradient(1100px 700px at 0% 100%, rgba(125,97,244,.55), transparent 60%),
              linear-gradient(135deg, #1d1838 0%, #2b1f63 45%, #3d2a9c 100%); }
.ji-hero__brilho { position: absolute; width: 620px; height: 620px; right: -180px; top: -220px; border-radius: 0 0 0 100%;
  background: conic-gradient(from 200deg, #50aedd, #7d61f4, #e95826, #f9c129, #50aedd); opacity: .14; filter: blur(30px); pointer-events: none; }
.ji-hero .wrap { position: relative; z-index: 1; }
.ji-hero .migalhas, .ji-hero .migalhas a { color: rgba(255,255,255,.65); }
.ji-hero .migalhas li:not(:last-child)::after { color: rgba(255,255,255,.35); }
.ji-hero__grade { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-8); align-items: center; }
.ji-hero__grade > * { min-width: 0; }
.ji-hero h1 { color: #fff; font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4rem); max-width: 13ch; margin-bottom: var(--s-5); }
.ji-lead { font-size: var(--t-xl); line-height: 1.5; color: #d9d4f5; max-width: 40ch; margin-bottom: var(--s-6); }
.ji-hero .link-sec { color: #fff; }
.ji-marca { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16); font: 500 var(--t-sm)/1 var(--f-titulo); color: #fff; margin-bottom: var(--s-5); }
.ji-marca .ms-ico { width: 32px; height: 32px; }
.ji-promessa { padding: var(--s-6); border-radius: var(--r-lg); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ji-promessa__rot { font: 500 13px/1 var(--f-titulo); color: #ffd84d; }
.ji-promessa p { font: 500 var(--t-xl)/1.4 var(--f-titulo); color: #fff; margin: var(--s-3) 0 var(--s-5); }
.ji-promessa ul { list-style: none; display: grid; gap: 10px; padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,.16); }
.ji-promessa li { display: flex; align-items: center; gap: 12px; font-size: var(--t-sm); color: #fff; }
.ji-promessa li .ms-ico { width: 22px; height: 22px; }

/* Cenário */
.ji-cenario { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.ji-cartao { padding: var(--s-6); background: #fff; border: 1px solid var(--linha); border-radius: var(--r-lg); }
.ji-cartao__n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--roxo-50); color: var(--roxo-700); font: 600 var(--t-sm)/1 var(--f-titulo); margin-bottom: var(--s-4); }
.ji-cartao h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.ji-cartao p { font-size: var(--t-sm); margin: 0; }

/* Risco: antes x depois */
.ji-risco { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.ji-risco > * { min-width: 0; }
.ji-demo { display: grid; gap: var(--s-4); }
.ji-demo__abas { display: inline-flex; gap: 6px; padding: 6px; background: #fff; border: 1px solid var(--linha); border-radius: 999px; justify-self: start; }
.ji-demo__abas button { border: 0; background: none; padding: 10px 16px; border-radius: 999px; font: 500 var(--t-sm)/1 var(--f-titulo); color: var(--tinta-2); cursor: pointer; }
.ji-demo__abas button[aria-selected="true"] { background: var(--preto); color: #fff; }
.ji-chat { background: #fff; border: 1px solid var(--linha); border-radius: var(--r-lg); box-shadow: var(--sombra-2); padding: var(--s-5); display: grid; gap: var(--s-4); }
.ji-chat__topo { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); color: var(--tinta); }
.ji-chat__topo span { margin-left: auto; font-size: 12px; color: var(--tinta-3); }
.ji-chat__pergunta { justify-self: end; max-width: 85%; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: var(--roxo-50); color: var(--tinta); font-size: var(--t-sm); }
.ji-chat__resposta { padding: 14px 16px; border-radius: 16px 16px 16px 4px; border: 1px solid var(--linha); font-size: var(--t-sm); color: var(--tinta); display: grid; gap: 10px; animation: jiEntra .35s var(--ease); }
.ji-chat__resposta p { margin: 0; }
@keyframes jiEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ji-borrado { filter: blur(5px); user-select: none; }
.ji-alerta { justify-self: start; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #fde9e1; color: #b13d12; }
.ji-alerta--ok { background: #e3f5ec; color: #17734a; }

/* Resultados */
.ji-resultados { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.ji-resultado { padding: var(--s-6); background: #fff; border: 1px solid var(--linha); border-radius: var(--r-lg); }
.ji-resultado__icos { display: flex; gap: 8px; margin-bottom: var(--s-4); }
.ji-resultado__icos .ms-ico { width: 30px; height: 30px; }
.ji-resultado h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.ji-resultado p { font-size: var(--t-sm); margin: 0; }

/* Princípios */
.ji-principios { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s-8); align-items: start; }
.ji-principios > * { min-width: 0; }
.ji-principios ol { list-style: none; display: grid; gap: var(--s-3); }
.ji-principios li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); align-items: start; padding: var(--s-5); border-radius: var(--r-md); background: #312f36; border: 1px solid #3f3c46; }
.ji-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--g-roxo); color: #fff; font: 600 var(--t-base)/1 var(--f-titulo); }
.ji-principios h3 { font-size: var(--t-lg); margin: 0 0 4px; }
.ji-principios p { margin: 0; font-size: var(--t-sm); color: #b2afc2; }

/* Fases (abas) */
.ji-fases { display: grid; grid-template-columns: 320px 1fr; gap: var(--s-5); align-items: start; }
.ji-fases > * { min-width: 0; }
.ji-fases__lista { display: grid; gap: 6px; }
.ji-fase { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; text-align: left; width: 100%; padding: 14px 16px; border: 1px solid var(--linha);
  border-radius: 14px; background: #fff; cursor: pointer; font: inherit; color: var(--tinta-2); transition: border-color .2s, background .2s; }
.ji-fase:hover { border-color: var(--roxo-300); }
.ji-fase.ativo { background: var(--preto); border-color: var(--preto); }
.ji-fase.ativo .ji-fase__nome { color: #fff; }
.ji-fase.ativo .ji-fase__rot { color: var(--roxo-300); }
.ji-fase__rot { grid-column: 1; font: 500 12px/1.2 var(--f-titulo); color: var(--roxo-700); }
.ji-fase__nome { grid-column: 1; font: 500 var(--t-sm)/1.3 var(--f-titulo); color: var(--tinta); }
.ji-par { font-weight: 400; color: var(--tinta-3); }
.ji-fase.ativo .ji-par { color: #a9a6b8; }
.ji-gate { grid-column: 2; grid-row: 1 / span 2; font: 600 11px/1 var(--f-titulo); padding: 6px 8px; border-radius: 999px; background: #fef4d6; color: #8a6300; }
.ji-painel { background: #fff; border: 1px solid var(--linha); border-radius: var(--r-lg); padding: var(--s-7); animation: jiEntra .3s var(--ease); }
.ji-painel__topo { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.ji-painel__icos { display: flex; gap: 8px; }
.ji-painel__icos .ms-ico { width: 36px; height: 36px; }
.ji-painel h3 { font-size: var(--t-2xl); margin: 2px 0 0; }
.ji-painel__obj { font: 500 var(--t-lg)/1.45 var(--f-titulo); color: var(--tinta); margin-bottom: var(--s-5); }
.ji-painel__grade { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--s-6); }
.ji-painel__grade > * { min-width: 0; }
.ji-painel h4 { font-size: var(--t-sm); color: var(--tinta-3); font-weight: 500; margin-bottom: var(--s-3); }
.ji-painel .checks { margin: 0; }
.ji-painel .checks li { font-size: var(--t-sm); }
.ji-painel__lado { display: grid; gap: var(--s-3); align-content: start; }
.ji-entrega, .ji-saida { padding: var(--s-4); border-radius: var(--r-md); }
.ji-entrega { background: var(--roxo-50); }
.ji-saida { background: #fef8e6; }
.ji-entrega span, .ji-saida span { display: block; font: 500 12px/1.2 var(--f-titulo); color: var(--tinta-3); margin-bottom: 4px; }
.ji-entrega strong, .ji-saida strong { font: 500 var(--t-base)/1.35 var(--f-titulo); color: var(--tinta); }

/* Licenças */
.ji-lic { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; }
.ji-lic > * { min-width: 0; }
.ji-criterio { margin-top: var(--s-5); padding: var(--s-5); border-radius: var(--r-md); background: #fff; border: 1px solid var(--linha); }
.ji-criterio strong { font: 500 var(--t-base)/1.3 var(--f-titulo); color: var(--tinta); }
.ji-criterio p { margin: 6px 0; font-size: var(--t-sm); }
.ji-criterio ul { padding-left: 1.2em; font-size: var(--t-sm); display: grid; gap: 4px; }
.ji-tabela { background: #fff; border: 1px solid var(--linha); border-radius: var(--r-lg); overflow: hidden; }
.ji-tabela__cab, .ji-tabela__linha { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s-4); padding: 16px var(--s-5); align-items: center; }
.ji-tabela__cab { background: var(--preto); color: #fff; font: 500 var(--t-sm)/1 var(--f-titulo); }
.ji-tabela__linha { border-top: 1px solid var(--linha); font-size: var(--t-sm); color: var(--tinta); }
.ji-tabela__linha span:last-child { display: flex; align-items: center; gap: 10px; }
.ji-tabela__linha .ms-ico { width: 20px; height: 20px; }
.ji-tabela__nota { margin: 0; padding: 12px var(--s-5); font-size: 12.5px; color: var(--tinta-3); border-top: 1px solid var(--linha); background: var(--fundo); }

/* Agentes */
.ji-agentes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.ji-agente { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); background: #fff; border: 1px solid var(--linha); border-radius: var(--r-lg); }
.ji-agente__nivel { font: 500 12px/1 var(--f-titulo); color: var(--tinta-3); }
.ji-agente .ms-ico { width: 36px; height: 36px; }
.ji-agente h3 { font-size: var(--t-lg); margin: 0; }
.ji-agente .tag { align-self: flex-start; }
.ji-agente p { font-size: var(--t-sm); margin: 0; }
.ji-ciclo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: var(--s-5); padding: var(--s-5); border-radius: var(--r-md); background: var(--roxo-50); font-size: var(--t-sm); }
.ji-ciclo strong { font: 500 var(--t-sm)/1 var(--f-titulo); color: var(--tinta); }
.ji-ciclo span { color: var(--roxo); }
.ji-ciclo em { margin-left: auto; font-style: normal; color: var(--roxo-700); font-weight: 600; }

/* Pacotes */
.ji-pacotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); align-items: stretch; }
.ji-pacote { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-7) var(--s-6) var(--s-6); background: #fff; border: 1px solid var(--linha); border-radius: var(--r-lg); }
.ji-pacote h3 { font-size: var(--t-2xl); margin: 0; }
.ji-pacote > p { font-size: var(--t-sm); min-height: 3em; margin: 0; }
.ji-pacote .checks { margin: var(--s-2) 0 0; }
.ji-pacote .checks li { font-size: var(--t-sm); }
.ji-pacote__prazo { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--linha); font: 500 var(--t-sm)/1 var(--f-titulo); color: var(--tinta-3); }
.ji-pacote .btn { justify-content: center; }
.ji-pacote--rec { border: 2px solid var(--roxo); box-shadow: var(--sombra-2); }
.ji-pacote__selo { position: absolute; top: -14px; left: var(--s-6); padding: 6px 12px; border-radius: 999px; background: var(--roxo); color: #fff; font: 500 12px/1 var(--f-titulo); }
.ji-nota-centro { text-align: center; font-size: var(--t-sm); color: var(--tinta-3); margin: var(--s-5) auto 0; max-width: 60ch; }

/* Por onde começar */
.ji-comecar { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--s-7); align-items: center; padding: var(--s-8); border-radius: var(--r-lg); background: var(--g-roxo); color: #efeaff; }
.ji-comecar > * { min-width: 0; }
.ji-comecar h2 { color: #fff; }
.ji-comecar .lead { color: #ece6ff; }
.ji-comecar .sobretitulo { color: #fff; }
.ji-comecar .sobretitulo::before { background: #fff; }
.ji-comecar .btn { --btn-bg: #fff; --btn-fg: var(--preto); --btn-bd: #fff; }
.ji-comecar__lista { list-style: none; display: grid; gap: var(--s-3); }
.ji-comecar__lista li { display: flex; align-items: center; gap: 14px; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: #fff; color: var(--tinta); font: 500 var(--t-base)/1.3 var(--f-titulo); }
.ji-comecar__lista .ms-ico { width: 28px; height: 28px; }

/* Entregáveis */
.ji-entregaveis { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.ji-entregaveis li { padding: var(--s-5); border-radius: var(--r-md); background: #312f36; border: 1px solid #3f3c46; display: grid; gap: 6px; }
.ji-entregaveis span { font: 500 12px/1 var(--f-titulo); color: var(--roxo-300); }
.ji-entregaveis strong { font: 500 var(--t-base)/1.35 var(--f-titulo); color: #fff; }

/* Responsivo */
@media (max-width: 1080px) {
  .ji-hero__grade, .ji-risco, .ji-principios, .ji-lic, .ji-comecar { grid-template-columns: 1fr; gap: var(--s-6); }
  .ji-fases { grid-template-columns: 1fr; }
  .ji-fases__lista { grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .ji-resultados, .ji-cenario { grid-template-columns: 1fr 1fr; }
  .ji-agentes { grid-template-columns: 1fr 1fr; }
  .ji-pacotes { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; gap: var(--s-6); }
  .ji-entregaveis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .ji-hero { padding: var(--s-6) 0 var(--s-8); }
  .ji-hero h1 { font-size: 2.4rem; }
  .ji-lead { font-size: var(--t-lg); }
  .ji-promessa { padding: var(--s-5); }
  .ji-promessa p { font-size: var(--t-lg); }
  .ji-resultados, .ji-cenario, .ji-agentes { grid-template-columns: 1fr; }
  .ji-painel { padding: var(--s-5); }
  .ji-painel h3 { font-size: var(--t-xl); }
  .ji-painel__grade { grid-template-columns: 1fr; gap: var(--s-4); }
  .ji-tabela__cab, .ji-tabela__linha { padding: 14px var(--s-4); gap: var(--s-3); }
  .ji-ciclo em { margin-left: 0; flex-basis: 100%; }
  .ji-comecar { padding: var(--s-6) var(--s-5); }
  .ji-entregaveis { grid-template-columns: 1fr 1fr; }
  .ji-demo__abas { justify-self: stretch; }
  .ji-demo__abas button { flex: 1; padding: 10px 8px; }
}
@media (prefers-reduced-motion: reduce) { .ji-chat__resposta, .ji-painel { animation: none; } }
.ji-entregaveis li { align-content: start; }
@media (max-width: 720px) {
  .ji-ciclo { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ji-ciclo span { transform: rotate(90deg); line-height: 1; }
}