/* ==========================================================================
   Córtex pessoal — a página de conversão pública
   Carrega depois de app.css e theme.css: a abertura, os cartões de plano, as
   garantias, a faixa de empresas, o FAQ e os balões são os mesmos da página
   de Planos do painel (classes .pc-planos-*, .pc-plano, .pc-chat). Aqui só o
   que é desta página: cabeçalho e rodapé (como na de empresas), a coluna de
   leitura, os quatro pontos numerados, o comparativo "do jeito antigo / no
   Córtex", os três passos, a URL de exemplo, a chamada final e as entradas
   ao rolar.
   ========================================================================== */
body.cp { min-height: 100vh; background: radial-gradient(900px 560px at 70% -10%, rgba(51, 83, 204, .16), transparent 68%), #050a16; }

/* ---- cabeçalho ---- */
.cp-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(20px, 5vw, 56px);
  background: linear-gradient(180deg, rgba(5, 10, 22, .94), rgba(5, 10, 22, .7) 70%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cp-marca { text-decoration: none; gap: 11px; }
.cp-marca svg { width: 44px; height: 44px; flex: none; display: block; }
.cp-marca .pc-src-wordmark { font-size: 22px; }
.cp-nav { display: flex; align-items: center; gap: 22px; font-size: 13.5px; }
.cp-nav a { color: #9fb0d4; text-decoration: none; transition: color var(--t-quick) var(--ease-out); }
.cp-nav a:hover { color: #fff; }
.cp-nav .cp-entrar { color: #dbe6ff; }
.cp-nav .cp-cta-topo { padding: 9px 16px; font-size: 13px; color: #1b1205; }
.cp-nav .cp-cta-topo:hover { color: #1b1205; }

/* ---- a coluna ---- */
.cp-main { width: min(1180px, calc(100% - 2 * clamp(20px, 5vw, 56px))); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(72px, 9vw, 120px); padding: clamp(20px, 4vw, 48px) 0 96px; }
.cp-eyebrow { color: var(--pc-accent); font-size: 12px; margin: 0; }
.cp-secao, .cp-ato { scroll-margin-top: 84px; }
.cp-cab { max-width: 720px; margin-bottom: 34px; }
.cp-cab h2 { margin: 10px 0 14px; font-family: var(--font-serif); font-size: clamp(26px, 3vw, 38px); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: #f2f6ff; }
.cp-cab p { margin: 0; color: #a5b4cd; font-size: 16px; line-height: 1.65; }
.cp-main code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; color: var(--pc-accent-strong, #ffb07a); }

/* ---- abertura: a mesma da página de Planos, com o cérebro à direita ---- */
.cp-hero { min-height: 520px; }
.cp-hero .pc-planos-titulo { font-size: clamp(34px, 4vw, 54px); }
.cp-cena { min-height: 480px; }

/* ---- o spoiler: cinco vantagens coladas na abertura, cada uma com um desenho vivo e um link para a prova ---- */
.cp-difs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: calc(-1 * clamp(36px, 5vw, 64px)); }
.cp-dif {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; border-radius: 18px; text-decoration: none; overflow: hidden;
  border: 1px solid rgba(138, 170, 235, .18); background: linear-gradient(168deg, rgba(20, 34, 60, .7), rgba(7, 12, 26, .92));
  box-shadow: inset 0 1px 0 rgba(180, 222, 255, .08), 0 14px 34px rgba(0, 0, 0, .3);
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
/* um brilho quente que acorda no hover */
.cp-dif::before { content: ""; position: absolute; inset: -40% -20% auto; height: 120%; background: radial-gradient(closest-side, rgba(239, 127, 47, .22), transparent); opacity: 0; transition: opacity var(--t-slow) var(--ease-out); pointer-events: none; }
.cp-dif:hover { transform: translateY(-4px); border-color: rgba(239, 127, 47, .5); box-shadow: inset 0 1px 0 rgba(255, 200, 150, .14), 0 22px 44px rgba(0, 0, 0, .4), 0 0 0 1px rgba(239, 127, 47, .15); }
.cp-dif:hover::before { opacity: 1; }
.cp-dif:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 2px; }
.cp-dif-vis { position: relative; display: block; width: 100%; height: 44px; margin-bottom: 4px; overflow: visible; border-radius: 10px; background: radial-gradient(60% 120% at 50% 100%, rgba(239, 127, 47, .1), transparent 70%); }
/* um fio de luz no topo de cada cartão, na cor da casa */
.cp-dif::after { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 200, 150, .5), transparent); }
.cp-dif b { position: relative; font-family: var(--font-serif); font-size: 16px; font-weight: 600; line-height: 1.2; color: #eef5ff; }
.cp-dif span { position: relative; font-size: 12.5px; line-height: 1.45; color: #93a7c9; }
.cp-dif small { position: relative; margin-top: auto; padding-top: 8px; font-size: 11.5px; color: var(--pc-accent-strong, #ffb07a); opacity: .75; transition: opacity var(--t-quick) var(--ease-out); }
.cp-dif small i { display: inline-block; font-style: normal; transition: transform var(--t-base) var(--ease-spring); }
.cp-dif:hover small { opacity: 1; }
.cp-dif:hover small i { transform: translateX(4px); }
/* 1. as barras de texto que viram ticks de vetor */
.cp-dif-barras rect { fill: #93a7c9; transform-box: fill-box; transform-origin: 50% 100%; animation: cp-vet-tick 3.2s var(--ease-out) infinite; animation-delay: calc(var(--k, 0) * 70ms); }
/* 2. duas linhas: a roxa sobe com o acervo, a laranja fica no lugar */
.cp-dif-linha { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 140; stroke-dashoffset: 140; animation: cp-dif-traca 4s var(--ease-out) infinite; }
.cp-dif-linha.outros { stroke: #b394ff; }
.cp-dif-linha.cortex { stroke: var(--pc-accent-strong, #ffb07a); animation-delay: 300ms; }
@keyframes cp-dif-traca { 0% { stroke-dashoffset: 140; opacity: 1; } 45%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.cp-dif-ponto { animation: cp-dif-pisca 4s ease-in-out infinite; }
.cp-dif-ponto.outros { fill: #b394ff; }
.cp-dif-ponto.cortex { fill: var(--pc-accent-strong, #ffb07a); }
@keyframes cp-dif-pisca { 0%, 40% { opacity: 0; } 55%, 85% { opacity: 1; } 100% { opacity: 0; } }
/* 3. o alvo e o tiro que acerta o centro */
.cp-dif-alvo circle { fill: none; stroke: rgba(138, 170, 235, .35); stroke-width: 1; }
.cp-dif-tiro { fill: var(--pc-accent-strong, #ffb07a); transform-box: fill-box; transform-origin: center; animation: cp-dif-acerta 3s var(--ease-out) infinite; filter: drop-shadow(0 0 4px rgba(239, 127, 47, .9)); }
@keyframes cp-dif-acerta { 0% { transform: translate(-46px, -12px) scale(.4); opacity: 0; } 20% { opacity: 1; } 45% { transform: translate(0, 0) scale(1); } 55% { transform: scale(1.6); } 65%, 85% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
.cp-dif-num { font-family: var(--font-serif); font-style: italic; font-size: 14px; fill: var(--pc-accent-strong, #ffb07a); }
/* 4. o anel do minuto e a URL com o cursor piscando */
.cp-dif-anel-fundo { fill: none; stroke: rgba(138, 170, 235, .18); stroke-width: 2.5; }
.cp-dif-anel { fill: none; stroke: var(--pc-accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 88; stroke-dashoffset: 88; transform: rotate(-90deg); transform-origin: 20px 20px; animation: cp-dif-minuto 3.6s linear infinite; }
@keyframes cp-dif-minuto { 0% { stroke-dashoffset: 88; } 70%, 100% { stroke-dashoffset: 0; } }
.cp-dif-min { font-family: var(--font-serif); font-style: italic; font-size: 11px; fill: #eef5ff; text-anchor: middle; }
.cp-dif-url { fill: rgba(3, 9, 20, .6); stroke: rgba(138, 170, 235, .3); stroke-width: 1; }
.cp-dif-urltxt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 7.2px; fill: #dbe6ff; }
.cp-dif-caret { fill: var(--pc-accent-strong, #ffb07a); animation: cp-dif-cursor 1s steps(2) infinite; }
@keyframes cp-dif-cursor { to { opacity: 0; } }
/* 5. a silhueta com regiões que acendem e apagam, e os interruptores que viram junto */
.cp-dif-silhueta { fill: rgba(138, 170, 235, .14); stroke: rgba(200, 215, 245, .8); stroke-width: 1.2; }
.cp-dif-regioes circle { fill: var(--cor); opacity: .18; animation: cp-dif-liga 4.8s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 1.2s); }
@keyframes cp-dif-liga { 0%, 22%, 100% { opacity: .18; } 5%, 17% { opacity: .95; } }
.cp-dif-chaves rect { fill: rgba(138, 170, 235, .2); animation: cp-dif-chave 4.8s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 1.2s); }
.cp-dif-chaves circle { fill: #c9d7ef; animation: cp-dif-bolinha 4.8s var(--ease-spring) infinite; animation-delay: calc(var(--k, 0) * 1.2s); }
@keyframes cp-dif-chave { 0%, 22%, 100% { fill: rgba(138, 170, 235, .2); } 5%, 17% { fill: var(--pc-accent); } }
@keyframes cp-dif-bolinha { 0%, 22%, 100% { transform: translateX(0); fill: #c9d7ef; } 5%, 17% { transform: translateX(10px); fill: #0a0f1c; } }

/* ---- as etiquetas "em outros softwares" / "no Córtex": as mesmas em toda comparação da página ---- */
.cp-tag {
  display: inline-block; vertical-align: 1px; margin-right: 8px; padding: 1px 7px; border-radius: 999px;
  font-family: var(--font-sans); font-style: normal; font-weight: 700; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5;
}
.cp-tag.outros { color: #cdbaff; background: rgba(139, 98, 255, .16); border: 1px solid rgba(139, 98, 255, .4); }
.cp-tag.cortex { color: #ffd0a8; background: rgba(239, 127, 47, .16); border: 1px solid rgba(239, 127, 47, .45); }

/* ---- o "lado a lado" no texto: dois blocos etiquetados, um roxo (outros softwares), um laranja (o Córtex) ---- */
.cp-versus { display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; }
.cp-versus-lado { padding: 2px 0 2px 14px; border-left: 2px solid; }
.cp-versus-lado.outros { border-color: rgba(139, 98, 255, .55); }
.cp-versus-lado.cortex { border-color: var(--pc-accent); }
.cp-versus-lado .cp-tag { margin: 0 0 6px; }
.cp-versus-lado p { margin: 0; font-size: 15px; line-height: 1.55; color: #b7c4dd; }
.cp-versus-lado.outros p { color: #a6a3c2; }
.cp-versus-lado.cortex p { color: #dbe6ff; }
.cp-versus-lado p b { color: #eef5ff; font-weight: 600; }
/* a versão larga, sob o cabeçalho de seção: os dois lados em colunas */
.cp-versus-largo { flex-direction: row; gap: 24px; margin: -6px 0 40px; max-width: 980px; }
.cp-versus-largo .cp-versus-lado { flex: 1 1 0; min-width: 0; }
.cp-versus-largo .cp-versus-lado p { font-size: 15.5px; }
.cp-log-cab .cp-tag, .cp-jan-cab .cp-tag { margin: 0; }
.cp-jan-cab .cp-tag { margin-left: auto; }

/* ---- a tabela final: antes e depois em seis linhas, cada linha um link para a prova ---- */
.cp-ad-rotulo { margin: 0 0 12px; font-family: var(--font-serif); font-style: italic; font-size: 13px; color: #7f93b8; }
.cp-ad-tabela {
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(138, 170, 235, .2);
  background: linear-gradient(120deg, rgba(23, 38, 66, .9), rgba(8, 14, 28, .95));
  box-shadow: inset 0 1px 0 rgba(180, 222, 255, .08);
}
.cp-ad-cab, .cp-ad-linha { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.15fr); }
.cp-ad-cab span { padding: 14px 24px; font-family: var(--font-serif); font-style: italic; font-size: 13.5px; color: #a6a3c2; border-bottom: 1px solid rgba(138, 170, 235, .16); }
.cp-ad-cab span:last-child { color: var(--pc-accent-strong, #ffb07a); background: rgba(239, 127, 47, .06); }
.cp-ad-linha { text-decoration: none; border-bottom: 1px solid rgba(138, 170, 235, .1); transition: background var(--t-quick) var(--ease-out); }
.cp-ad-linha:last-child { border-bottom: 0; }
.cp-ad-linha:hover { background: rgba(138, 170, 235, .05); }
.cp-ad-linha:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: -2px; }
.cp-ad-linha b, .cp-ad-linha span { padding: 16px 24px; font-size: 14.5px; line-height: 1.5; }
.cp-ad-linha b { font-family: var(--font-serif); font-weight: 600; color: #eef5ff; }
.cp-ad-linha span:nth-child(2) { color: #8e8ba8; text-decoration: line-through; text-decoration-color: rgba(139, 98, 255, .55); text-decoration-thickness: 1px; }
.cp-ad-linha span:last-child { color: #eef5ff; background: rgba(239, 127, 47, .06); border-left: 1px solid rgba(239, 127, 47, .18); }
.cp-ad-linha span:last-child::before { content: "✓"; margin-right: 9px; color: var(--pc-accent); font-weight: 700; }
.cp-ad-linha span:last-child::after { content: "↑"; float: right; margin-left: 10px; color: #7f93b8; opacity: 0; transition: opacity var(--t-quick) var(--ease-out); }
.cp-ad-linha:hover span:last-child::after { opacity: 1; }

/* ---- os três passos ---- */
.cp-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: passo; }
.cp-passo { position: relative; padding: 24px 22px 22px 22px; border-radius: 18px; border: 1px solid rgba(138, 170, 235, .18); background: linear-gradient(168deg, rgba(20, 34, 60, .7), rgba(7, 12, 26, .9)); }
.cp-passo-num {
  display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 16px; border-radius: 50%;
  background: linear-gradient(145deg, var(--pc-accent), var(--pc-accent-deep)); color: #1a0d04;
  font-family: var(--font-serif); font-size: 17px; font-weight: 600; box-shadow: 0 6px 18px rgba(239, 127, 47, .28);
}
.cp-passo h3 { margin: 0 0 8px; font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: #eef5ff; }
.cp-passo p { margin: 0; font-size: 14px; line-height: 1.55; color: #a5b4cd; }
.cp-url { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; padding: 14px 20px; border-radius: 14px; border: 1px dashed rgba(138, 170, 235, .28); background: rgba(3, 9, 20, .5); }
.cp-url-rotulo { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: #7f93b8; }
.cp-url code { font-size: 14px; color: #dbe6ff; overflow-wrap: anywhere; }
.cp-url code span { color: var(--pc-accent-strong, #ffb07a); }

/* ---- a faixa de empresas: a janela das IAs (css/theme/35-janela-das-ias.css) ao lado do texto ---- */
.cp-empresas { grid-template-columns: minmax(0, 1fr) minmax(320px, 470px); }
.cp-empresas .cp-ias { grid-area: chat; }

/* ---- planos (cartões do tema), garantias e empresas ---- */
.cp-planos .pc-plano { animation: none; }
.cp-planos a.pc-plano-btn { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }
.cp-garantias { margin-top: 26px; animation: none; }
.cp-empresas { animation: none; }
.cp-faq { animation: none; }
.cp-faq .pc-planos-pergunta { animation: none; }
.cp-faq h2 { margin-bottom: 10px; }

/* ---- chamada final ---- */
.cp-final {
  text-align: center; padding: 56px 24px 60px; border-radius: 24px;
  border: 1px solid rgba(239, 127, 47, .28);
  background: radial-gradient(60% 80% at 50% 0%, rgba(239, 127, 47, .18), transparent 70%), linear-gradient(180deg, rgba(23, 38, 66, .8), rgba(8, 14, 28, .95));
  box-shadow: inset 0 1px 0 rgba(255, 200, 150, .12);
}
.cp-final h2 { margin: 0 0 10px; font-family: var(--font-serif); font-size: clamp(28px, 3.4vw, 42px); font-weight: 600; color: #f6f8ff; letter-spacing: -.01em; }
.cp-final p { margin: 0; color: #a5b4cd; font-size: 16px; }
.cp-final .pc-planos-acoes { justify-content: center; }

/* ---- rodapé ---- */
.cp-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px clamp(20px, 5vw, 56px); border-top: 1px solid var(--border); font-size: 13px; color: #8795ad; }
.cp-pe nav { display: flex; gap: 18px; }
.cp-pe a { color: #9fb0d4; text-decoration: none; }
.cp-pe a:hover { color: #fff; }

/* ---- entradas ao rolar ---- */
.cp-rola { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.cp-rola.visto { opacity: 1; transform: none; }
html.cp-sem-rolagem .cp-rola { opacity: 1; transform: none; }

/* ---- telas menores ---- */
@media (max-width: 1000px) {
  .cp-difs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
  .cp-versus-largo { flex-direction: column; gap: 12px; }
  .cp-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cp-cena { order: -1; min-height: 360px; }
}
@media (max-width: 760px) {
  .cp-empresas { grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "chat" "cta"; }
  .cp-nav a:not(.cp-cta-topo):not(.cp-entrar) { display: none; }
  .cp-passos { grid-template-columns: minmax(0, 1fr); }
  .cp-ad-cab { display: none; }
  .cp-ad-linha { grid-template-columns: minmax(0, 1fr); }
  .cp-ad-linha b { padding-bottom: 0; }
  .cp-ad-linha span:nth-child(2) { padding: 6px 24px; font-size: 13px; }
  .cp-ad-linha span:last-child { border-left: 0; }
}
@media (max-width: 560px) {
  .cp-difs { grid-template-columns: minmax(0, 1fr); }
  .cp-marca svg { width: 36px; height: 36px; }
  .cp-marca .pc-src-wordmark { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-rola { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   As duas histórias: gancho, batidas e soco, com uma demonstração ao lado
   O texto corrido virou três camadas — uma frase-isca em serifa, os passos
   curtos numerados e o soco em destaque — e ao lado algo que se vê: na
   primeira, a mesma pergunta respondida pela pasta de notas e pelo córtex
   (arquivo por arquivo × a vizinhança que a arquitetura decide); na segunda,
   as "fotos" da dor de cabeça (o JSON, os plugins, o terminal) e a janela do
   Córtex por cima. Tudo genérico: nenhum produto é citado.
   ========================================================================== */
.cp-historia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 56px); align-items: center; margin-bottom: 40px; }
.cp-historia-inversa { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); margin-bottom: 34px; }
.cp-historia-txt { min-width: 0; }
.cp-gancho { margin: 0 0 18px; font-family: var(--font-serif); font-size: clamp(20px, 2vw, 25px); line-height: 1.3; color: #eef5ff; }
.cp-gancho em { color: var(--pc-accent-strong, #ffb07a); font-style: italic; }
.cp-batidas { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cp-batidas li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.55; color: #b7c4dd; }
.cp-batidas .cp-batida-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 1px solid rgba(239, 127, 47, .45); font-family: var(--font-serif); font-size: 12.5px; color: var(--pc-accent); }
.cp-batidas li b { color: #eef5ff; font-weight: 600; }
.cp-corpo { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #a5b4cd; }
.cp-soco { margin: 0; padding-left: 16px; border-left: 2px solid var(--pc-accent); font-family: var(--font-serif); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.3; color: #eef5ff; }
.cp-soco mark { background: none; color: var(--pc-accent-strong, #ffb07a); }

/* ---- a demonstração: pasta × córtex ---- */
.cp-demo {
  margin: 0; padding: 18px 20px 16px; border-radius: 20px;
  border: 1px solid rgba(138, 170, 235, .2);
  background: linear-gradient(180deg, rgba(23, 38, 66, .97), rgba(10, 17, 32, .98));
  box-shadow: inset 0 1px 0 rgba(180, 222, 255, .1), 0 24px 60px rgba(0, 0, 0, .4);
}
.cp-demo figcaption { margin: 0 0 14px; font-family: var(--font-serif); font-style: italic; font-size: 13px; color: #7f93b8; }
.cp-demo-linha { padding: 12px 0 14px; border-top: 1px solid rgba(138, 170, 235, .12); }
.cp-demo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cp-demo-nome { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: #eef5ff; }
.cp-demo-linha[data-modo="cortex"] .cp-demo-nome { color: var(--pc-accent-strong, #ffb07a); }
.cp-demo-num { font-size: 12px; color: #8ea0c2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-demo-chips { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 5px; margin-bottom: 10px; }
.cp-demo-chips i {
  display: block; aspect-ratio: 3 / 4; border-radius: 3px;
  border: 1px solid rgba(138, 170, 235, .28); background: rgba(3, 9, 20, .55);
  transition: background var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);
}
.cp-demo-chips i.acesa { background: rgba(138, 170, 235, .55); border-color: rgba(200, 220, 255, .8); box-shadow: 0 0 10px rgba(138, 170, 235, .45); }
.cp-demo-medidor { height: 5px; border-radius: 3px; background: rgba(138, 170, 235, .12); overflow: hidden; }
.cp-demo-medidor i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #6d86b8, #b9c7e4); transition: width 180ms linear; }
.cp-demo-linha[data-modo="cortex"] .cp-demo-medidor i { background: linear-gradient(90deg, var(--pc-accent-deep), var(--pc-accent-strong, #ffb07a)); }
.cp-demo-nota { margin: 12px 0 0; font-size: 12.5px; color: #8ea0c2; line-height: 1.5; }
.cp-demo-eixo { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(138, 170, 235, .22); font-family: var(--font-serif); font-style: italic; font-size: 11.5px; color: #93a7c9; }
/* a arquitetura que decide: pergunta → rede → contexto */
.cp-arq { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 8px; }
.cp-arq-etapa { padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(138, 170, 235, .22); font-family: var(--font-serif); font-style: italic; font-size: 12px; color: #93a7c9; transition: color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out); }
.cp-arq-etapa.acesa { color: #1b1205; background: var(--pc-accent); border-color: var(--pc-accent); }
.cp-arq-rede { display: block; width: 100%; height: auto; overflow: visible; }
.cp-arq-rede line { stroke: rgba(138, 170, 235, .22); stroke-width: 1; transition: stroke var(--t-base) var(--ease-out); }
.cp-arq-rede line.ativa { stroke: var(--pc-accent); stroke-width: 1.4; stroke-dasharray: 6 4; animation: cp-sinal 900ms linear infinite; }
@keyframes cp-sinal { to { stroke-dashoffset: -20; } }
.cp-arq-rede circle { fill: rgba(138, 170, 235, .3); stroke: rgba(138, 170, 235, .45); stroke-width: 1; transition: fill var(--t-base) var(--ease-out), stroke var(--t-base) var(--ease-out), r var(--t-base) var(--ease-out); }
.cp-arq-rede circle.entrada { fill: #eef5ff; stroke: #fff; }
.cp-arq-rede circle.acesa { fill: var(--pc-accent-strong, #ffb07a); stroke: #fff; filter: drop-shadow(0 0 5px rgba(239, 127, 47, .9)); }
.cp-arq-rede circle.apagada { fill: rgba(138, 170, 235, .12); stroke: rgba(138, 170, 235, .2); }
.cp-arq-dims { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.cp-arq-dims span { padding: 2px 8px; border-radius: 6px; font-size: 11px; letter-spacing: .3px; text-transform: uppercase; color: #7f93b8; background: rgba(3, 9, 20, .5); border: 1px solid rgba(138, 170, 235, .16); transition: color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); }
.cp-arq-dims span.acesa { color: var(--pc-accent-strong, #ffb07a); border-color: rgba(239, 127, 47, .5); }

/* ---- as "fotos" da dor: janelas empilhadas, e a do Córtex por cima ---- */
.cp-caos { position: relative; margin: 0; min-height: 470px; }
.cp-jan {
  position: absolute; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(138, 170, 235, .22);
  background: linear-gradient(180deg, rgba(16, 26, 46, .98), rgba(7, 12, 24, .98));
  box-shadow: 0 22px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(180, 222, 255, .08);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.5; color: #b9c7e4;
  opacity: 0; transform: translateY(18px) rotate(var(--giro, 0deg)) scale(.98);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out), filter 600ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 420ms);
}
.cp-caos.visto .cp-jan { opacity: 1; transform: rotate(var(--giro, 0deg)); }
.cp-caos.pronto .cp-jan:not(.cp-jan-cortex) { filter: saturate(.55) brightness(.62); }   /* quando o Córtex chega, o caos apaga */
.cp-jan-json { --giro: -2.2deg; left: 0; top: 0; width: 66%; z-index: 1; }
.cp-jan-plugins { --giro: 1.6deg; right: 0; top: 118px; width: 58%; z-index: 2; }
.cp-jan-term { --giro: -1deg; left: 6%; top: 262px; width: 62%; z-index: 3; }
.cp-jan-cortex { --giro: 0deg; right: 2%; bottom: 0; width: 64%; z-index: 4; border-color: rgba(239, 127, 47, .55); box-shadow: 0 0 0 1px rgba(239, 127, 47, .2), 0 26px 60px -20px rgba(239, 127, 47, .55), 0 22px 50px rgba(0, 0, 0, .55); background: linear-gradient(168deg, rgba(64, 34, 14, .5), rgba(10, 14, 28, .96) 60%); }
.cp-jan-cab { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid rgba(138, 170, 235, .14); background: rgba(3, 9, 20, .5); font-family: var(--font-sans); font-size: 11px; color: #8ea0c2; }
.cp-jan-cab i { width: 9px; height: 9px; border-radius: 50%; background: #3d4b68; }
.cp-jan-cab i:nth-child(1) { background: #f2708a; } .cp-jan-cab i:nth-child(2) { background: #f5c451; } .cp-jan-cab i:nth-child(3) { background: #7ed957; }
.cp-jan-cab span { margin-left: 6px; }
.cp-jan-corpo { margin: 0; padding: 12px 14px; overflow: hidden; white-space: pre; }
.cp-jan-corpo .k { color: #8fc4ff; } .cp-jan-corpo .v { color: #ffd6a0; } .cp-jan-corpo .p { color: #7f93b8; }
.cp-jan-corpo .erro, .cp-jan-pe.erro { color: #ff8da0; }
.cp-jan-corpo .erro { text-decoration: underline wavy rgba(255, 141, 160, .8); text-underline-offset: 3px; }
.cp-jan-corpo .aviso { color: #f5c451; }
.cp-jan-pe { padding: 8px 14px; border-top: 1px solid rgba(138, 170, 235, .12); font-family: var(--font-sans); font-size: 11px; background: rgba(242, 112, 138, .07); }
.cp-plugins { list-style: none; margin: 0; padding: 4px 0; font-family: var(--font-sans); }
.cp-plugins li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid rgba(138, 170, 235, .1); font-size: 12px; }
.cp-plugins li:last-child { border-bottom: 0; }
.cp-plug-nome { color: #dbe6ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-plug-nome small { margin-left: 6px; color: #7f93b8; font-size: 10.5px; }
.cp-plug-aviso { font-size: 10.5px; color: #f5c451; white-space: nowrap; }
.cp-plug-toggle { position: relative; width: 26px; height: 14px; border-radius: 999px; background: rgba(138, 170, 235, .22); }
.cp-plug-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #c9d4ea; transition: transform var(--t-quick) var(--ease-out); }
.cp-plug-toggle.on { background: rgba(126, 217, 87, .55); }
.cp-plug-toggle.on::after { transform: translateX(12px); }
.cp-jan-cortex-corpo { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; font-family: var(--font-sans); }
.cp-jan-rotulo { font-family: var(--font-serif); font-style: italic; font-size: 12.5px; color: #93a7c9; }
.cp-jan-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: #dbe6ff; overflow-wrap: anywhere; }
.cp-jan-url b { font-weight: 400; color: var(--pc-accent-strong, #ffb07a); }
.cp-jan-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #dbe6ff; }
.cp-jan-status i { width: 8px; height: 8px; border-radius: 50%; background: #7ed957; box-shadow: 0 0 8px rgba(126, 217, 87, .8); }

@media (max-width: 1000px) {
  .cp-historia, .cp-historia-inversa { grid-template-columns: minmax(0, 1fr); }
  .cp-historia-inversa .cp-caos { order: 2; }
  .cp-caos { min-height: 440px; }
}
@media (max-width: 560px) {
  .cp-demo-chips { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .cp-caos { min-height: 520px; }
  .cp-jan-json, .cp-jan-plugins, .cp-jan-term, .cp-jan-cortex { width: 92%; left: 0; right: auto; }
  .cp-jan-plugins { top: 150px; left: 8%; } .cp-jan-term { top: 300px; } .cp-jan-cortex { left: 4%; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-jan { transition: none; }
  .cp-arq-rede line.ativa { animation: none; }
}

/* ==========================================================================
   Por dentro do córtex — três atos, cada um com a sua montagem:
   (1) as DUAS PISTAS: a mesma pergunta corre em duas faixas, uma roxa (em
       outros softwares: listar, procurar, abrir arquivo atrás de arquivo, seguir
       link, e o contador de tokens disparando) e uma laranja (no Córtex:
       buscar, três trechos ranqueados, ler uma memória, respondeu); embaixo, o
       vetorizador da hora de guardar e o texto;
   (2) o PAINEL RACHADO AO MEIO: à esquerda o grafo dos outros softwares, que
       acende inteiro em toda pergunta; à direita o cérebro em regiões,
       interativo, com os interruptores e as barras; um "vs" no meio; o texto
       de cada lado embaixo do seu lado;
   (3) as DUAS CONTAS: dois recibos (o de outros softwares e o do Córtex) e,
       ao lado, o gráfico da leitura por pergunta conforme o acervo cresce.
   O lado "em outros softwares" é sempre roxo e genérico: nenhum produto é citado.
   ========================================================================== */
.cp-dentro { --cp-cofre: #8b62ff; --cp-cofre-claro: #b394ff; --cp-cofre-fundo: #1e1e2e; }
.cp-dentro .cp-cab { max-width: 780px; }
.cp-dentro .cp-cab p code { font-size: .9em; }
.cp-roxo { color: var(--cp-cofre-claro); }
.cp-ato + .cp-ato { margin-top: clamp(44px, 6vw, 76px); padding-top: clamp(36px, 5vw, 56px); border-top: 1px solid rgba(138, 170, 235, .1); }
.cp-ato-cab { max-width: 760px; margin-bottom: 22px; }
.cp-ato-num { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #7f93b8; }
.cp-ato-num span {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; letter-spacing: 0;
  background: linear-gradient(145deg, var(--pc-accent), var(--pc-accent-deep)); color: #1a0d04;
  font-family: var(--font-serif); font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px rgba(239, 127, 47, .28);
}
.cp-ato-cab .cp-gancho { margin-bottom: 8px; }
.cp-ato-dica { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 14.5px; color: #93a7c9; }
.cp-ato-dica em { color: #eef5ff; }
.cp-ato-txt .cp-corpo { margin-bottom: 14px; }
.cp-ato-txt .cp-corpo b { color: #eef5ff; font-weight: 600; }
.cp-ato-txt .cp-soco { font-size: clamp(18px, 1.6vw, 21px); }
.cp-ato-txt-largo { max-width: 820px; margin-top: 22px; }
.cp-soco-centro { max-width: 760px; margin: 22px auto 0; padding: 0; border-left: 0; text-align: center; }
.cp-ato > .cp-demo-nota { margin-top: 14px; }

/* ---- os dois cabeçalhos: a gema (outros softwares) e a marca (o Córtex) ---- */
.cp-log-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 9px 12px; border-bottom: 1px solid rgba(138, 170, 235, .12); font-size: 12px; color: #c9d4ea; }
.cp-gema { width: 16px; height: 16px; flex: none; filter: drop-shadow(0 0 6px rgba(139, 98, 255, .55)); }
.cp-log-marca { flex: none; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd4a8, var(--pc-accent) 60%, var(--pc-accent-deep)); box-shadow: 0 0 8px rgba(239, 127, 47, .7); }
.cp-log-nome { font-family: var(--font-serif); font-style: italic; font-size: 13.5px; white-space: nowrap; }
.outros .cp-log-nome { color: var(--cp-cofre-claro); }
.cortex .cp-log-nome { color: var(--pc-accent-strong, #ffb07a); }

/* ---- ato 1: as duas pistas ---- */
.cp-pistas { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.cp-pista {
  display: grid; grid-template-columns: 160px minmax(0, 1fr) 140px; align-items: center; gap: 12px;
  min-height: 92px; padding: 10px 14px 10px 16px; border-radius: 16px;
  border: 1px solid rgba(138, 170, 235, .16); background: linear-gradient(180deg, rgba(23, 38, 66, .85), rgba(10, 17, 32, .95));
  box-shadow: inset 0 1px 0 rgba(180, 222, 255, .08), 0 18px 44px rgba(0, 0, 0, .35);
}
.cp-pista.outros { border-color: rgba(139, 98, 255, .3); background: linear-gradient(180deg, #24243a, var(--cp-cofre-fundo)); }
.cp-pista.cortex { border-color: rgba(239, 127, 47, .35); background: linear-gradient(180deg, rgba(64, 34, 14, .32), rgba(10, 14, 28, .95) 70%); }
.cp-pista-rotulo { display: flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-style: italic; font-size: 14px; }
.cp-pista.outros .cp-pista-rotulo { color: var(--cp-cofre-claro); }
.cp-pista.cortex .cp-pista-rotulo { color: var(--pc-accent-strong, #ffb07a); }
/* o trilho: a faixa por onde os passos correm; em outros softwares ele não cabe numa linha e dobra */
.cp-pista-trilho { list-style: none; margin: 0; padding: 4px 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px 8px; min-width: 0; }
.cp-pista-trilho li { flex: none; display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateX(14px); transition: opacity 260ms var(--ease-out), transform 320ms var(--ease-out); }
.cp-pista-trilho li.vista { opacity: 1; transform: none; }
.cp-pista-trilho li + li::before { content: "→"; color: #5d7099; font-size: 12px; }
.cp-chip {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; min-width: 118px; max-width: 200px;
  padding: 6px 8px; border-radius: 10px; border: 1px solid rgba(138, 170, 235, .2); background: rgba(3, 9, 20, .5);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.6px; line-height: 1.35; color: #b9c7e4;
}
.cp-chip > b { grid-column: 1; font-weight: 700; color: #eef5ff; white-space: nowrap; }
.cp-chip > span { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8ea0c2; }
.cp-chip > small { grid-column: 2; grid-row: 1 / 3; font-size: 10px; color: #7f93b8; font-variant-numeric: tabular-nums; }
.cp-pista.outros .cp-chip > b { color: var(--cp-cofre-claro); }
.cp-pista.cortex .cp-chip > b { color: var(--pc-accent-strong, #ffb07a); }
.cp-pista.cortex .cp-chip { border-color: rgba(239, 127, 47, .3); }
.cp-chip.ruido { border-color: rgba(242, 112, 138, .45); background: rgba(242, 112, 138, .07); }
.cp-chip.ruido > small { color: #ff8da0; }
.cp-chip.ruido > small::before { content: "ruído · "; font-size: 9px; }
.cp-chip.segue { border-style: dashed; color: var(--cp-cofre-claro); }
.cp-chip.segue > b { color: var(--cp-cofre-claro); font-weight: 500; }
.cp-chip.mais { border-style: dashed; font-style: italic; color: #a6a3c2; max-width: 240px; }
.cp-chip.mais > b { white-space: normal; }
.cp-chip.mais > b { color: #a6a3c2; font-weight: 500; }
.cp-chip.fim { border-color: rgba(126, 217, 87, .5); background: rgba(126, 217, 87, .08); }
.cp-chip.fim > b { color: #7ed957; }
/* o chip dos três trechos: a lista ranqueada dentro dele */
.cp-chip.trechos { display: block; width: 210px; max-width: none; }
.cp-chip.trechos > b { display: block; margin-bottom: 3px; }
.cp-chip-rank { display: grid; grid-template-columns: 10px minmax(0, 1fr) 40px 26px; align-items: center; column-gap: 6px; font-size: 10px; }
.cp-chip-rank i { color: var(--pc-accent); font-style: normal; font-weight: 700; }
.cp-chip-rank span { color: #dbe6ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-chip-rank u { display: block; height: 3px; border-radius: 2px; background: rgba(138, 170, 235, .16); text-decoration: none; overflow: hidden; }
.cp-chip-rank u::after { content: ""; display: block; height: 100%; width: var(--p, 0%); background: var(--pc-accent); box-shadow: 0 0 5px rgba(239, 127, 47, .6); transition: width 600ms var(--ease-out); }
.cp-chip-rank em { color: #8ea0c2; font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
/* a soma da pista: o contador e o veredito */
.cp-pista-soma { display: grid; justify-items: end; text-align: right; }
.cp-pista-soma b { font-family: var(--font-serif); font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; transition: color var(--t-base) var(--ease-out); }
.cp-pista.outros .cp-pista-soma.alto b { color: #ff8da0; }
.cp-pista.cortex .cp-pista-soma b { color: var(--pc-accent-strong, #ffb07a); }
.cp-pista-soma small { margin-top: 3px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #7f93b8; }
.cp-pista-soma em { margin-top: 6px; font-family: var(--font-serif); font-style: italic; font-size: 11.5px; color: #93a7c9; opacity: 0; transition: opacity 400ms var(--ease-out); }
.cp-pista.pronta .cp-pista-soma em { opacity: 1; }
.cp-pista.outros .cp-pista-soma em { color: #ff8da0; }
.cp-pista.cortex .cp-pista-soma em { color: #7ed957; }
/* embaixo das pistas: o vetorizador à esquerda, o texto à direita */
.cp-ato-baixo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 22px; }
.cp-vetor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 16px; border-radius: 14px; border: 1px dashed rgba(239, 127, 47, .35); background: rgba(3, 9, 20, .35); font-size: 11.5px; color: #8ea0c2; }
.cp-vetor-rotulo { flex-basis: 100%; font-family: var(--font-serif); font-style: italic; font-size: 12.5px; color: var(--pc-accent-strong, #ffb07a); }
.cp-vetor-arq { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(138, 170, 235, .22); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #dbe6ff; }
.cp-vetor-arq i { width: 9px; height: 11px; border-radius: 2px; border: 1px solid rgba(138, 170, 235, .5); background: rgba(138, 170, 235, .15); }
.cp-vetor-seta { color: #5d7099; }
.cp-vetor-cap { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 10px 3px; border-radius: 999px; border: 1px solid rgba(239, 127, 47, .4); background: rgba(239, 127, 47, .08); }
.cp-vetor-cap svg { display: block; width: 96px; height: 28px; overflow: visible; }
.cp-vetor-cap small { font-family: var(--font-serif); font-style: italic; font-size: 10.5px; color: #93a7c9; }
.cp-vetor-barras rect { transform-box: fill-box; transform-origin: 50% 100%; animation: cp-vet-tick 3.2s var(--ease-out) infinite; animation-delay: calc(var(--k, 0) * 60ms); }
@keyframes cp-vet-tick {
  0%, 30% { transform: scaleY(var(--h1)); fill: #93a7c9; }
  55%, 88% { transform: scaleY(var(--h2)); fill: var(--pc-accent-strong, #ffb07a); }
  100% { transform: scaleY(var(--h1)); fill: #93a7c9; }
}
.cp-vetor-pesos { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #93a7c9; }
.cp-vetor-pesos b { color: #eef5ff; font-weight: 600; }
.cp-vetor-indice { padding: 3px 9px; border-radius: 6px; border: 1px solid rgba(239, 127, 47, .4); background: rgba(239, 127, 47, .14); font-family: var(--font-serif); font-style: italic; font-size: 12px; color: var(--pc-accent-strong, #ffb07a); }

/* ---- ato 2: o painel rachado ao meio ---- */
.cp-esp-dica { color: var(--pc-accent); font-style: normal; }
.cp-racha { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: stretch; margin: 0; }
.cp-racha-lado { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
.cp-racha-lado.outros { border: 1px solid rgba(139, 98, 255, .3); background: linear-gradient(180deg, #26263e, var(--cp-cofre-fundo)); }
.cp-racha-lado.cortex { gap: 8px; padding-bottom: 12px; border: 1px solid rgba(239, 127, 47, .35); background: linear-gradient(180deg, rgba(64, 34, 14, .32), rgba(10, 14, 28, .95) 60%); }
.cp-racha-lado .cp-log-cab { padding: 11px 14px; }
/* a rachadura: um fio de luz de cima a baixo e o "vs" no meio */
.cp-racha-vs { position: relative; display: grid; place-items: center; }
.cp-racha-vs::before { content: ""; position: absolute; top: 8%; bottom: 8%; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, rgba(139, 98, 255, .6) 30%, rgba(239, 127, 47, .7) 70%, transparent); }
.cp-racha-vs span {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(138, 170, 235, .28); background: linear-gradient(135deg, rgba(139, 98, 255, .35), rgba(239, 127, 47, .35)), #0a1020;
  font-family: var(--font-serif); font-style: italic; font-size: 13px; color: #fff; box-shadow: 0 0 18px rgba(3, 8, 20, .9);
}
.cp-cofre-tag { margin-left: auto; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(139, 98, 255, .45); font-family: var(--font-serif); font-style: italic; font-size: 10.5px; color: var(--cp-cofre-claro); white-space: nowrap; }
.cp-cofre-grafo { display: block; width: 100%; height: auto; flex: 1; background: radial-gradient(circle at 50% 45%, rgba(139, 98, 255, .14), transparent 66%); }
.cp-cofre-grafo line { stroke: rgba(179, 148, 255, .26); stroke-width: .8; }
.cp-cofre-grafo circle { fill: var(--cp-cofre); animation: cp-cofre-varre 3.4s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes cp-cofre-varre { 0%, 68%, 100% { fill: #8b62ff; opacity: .85; } 78% { fill: #fff; opacity: 1; } }
.cp-cofre-pe { margin: 0; padding: 11px 14px; border-top: 1px solid rgba(139, 98, 255, .2); font-size: 12.5px; line-height: 1.45; color: #a6a3c2; }
.cp-cofre-pe b { color: var(--cp-cofre-claro); }
.cp-esp-conta { margin-left: auto; font-size: 11px; color: #8ea0c2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-esp-cerebro { display: block; width: 100%; max-width: 420px; height: auto; margin: 2px auto 0; overflow: visible; }
.cp-esp-silhueta { fill: rgba(138, 170, 235, .05); stroke: rgba(138, 170, 235, .2); stroke-width: 1; }
.cp-esp-reg { cursor: pointer; transition: opacity var(--t-slow) var(--ease-out), filter var(--t-slow) var(--ease-out); }
.cp-esp-reg circle { fill: var(--cor); }
.cp-esp-reg.off { opacity: .2; filter: saturate(.25); }
.cp-esp-reg polygon { fill: transparent; stroke: var(--cor); stroke-opacity: 0; stroke-width: 1.1; stroke-linejoin: round; transition: stroke-opacity var(--t-base) var(--ease-out); }
.cp-esp-reg:hover polygon { stroke-opacity: .45; stroke-dasharray: 3 2; }
.cp-esp-reg.on polygon { stroke-opacity: .85; stroke-dasharray: none; filter: drop-shadow(0 0 4px var(--cor)); animation: cp-esp-pulsa 2.2s ease-in-out infinite; }
@keyframes cp-esp-pulsa { 50% { stroke-opacity: .4; } }
.cp-esp-reg text { font-family: var(--font-serif); font-style: italic; font-size: 9.5px; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(3, 8, 20, .85); stroke-width: 2.5px; pointer-events: none; }
.cp-esp-reg.off text { fill: #93a7c9; }
.cp-esp-lista { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px; }
.cp-esp-int {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 6px; margin: 0;
  border: 1px solid rgba(138, 170, 235, .22); border-radius: 999px; background: rgba(6, 14, 30, .58);
  color: #b6c5e2; font-family: var(--font-sans); font-size: 12px; font-weight: 500; cursor: pointer;
  transition: color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out), background var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);
}
.cp-esp-int:hover { color: #fff; border-color: color-mix(in srgb, var(--cor) 55%, transparent); }
.cp-esp-int:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 2px; }
.cp-esp-int small { color: #7f93b8; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.cp-esp-bola { position: relative; flex: none; width: 24px; height: 13px; border-radius: 999px; background: rgba(138, 170, 235, .24); transition: background var(--t-quick) var(--ease-out); }
.cp-esp-bola::after { content: ""; position: absolute; top: 2px; left: 2px; width: 9px; height: 9px; border-radius: 50%; background: #c9d7ef; transition: transform var(--t-base) var(--ease-spring), background var(--t-quick) var(--ease-out); }
.cp-esp-int.on { color: #fff; border-color: color-mix(in srgb, var(--cor) 65%, transparent); background: color-mix(in srgb, var(--cor) 16%, rgba(6, 14, 30, .6)); box-shadow: 0 0 14px color-mix(in srgb, var(--cor) 30%, transparent); }
.cp-esp-int.on small { color: #dbe6ff; }
.cp-esp-int.on .cp-esp-bola { background: var(--cor); }
.cp-esp-int.on .cp-esp-bola::after { transform: translateX(11px); background: #0a0f1c; }
.cp-esp-barras { display: grid; gap: 7px; padding: 2px 14px 0; }
.cp-esp-barra-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11px; color: #93a7c9; }
.cp-esp-barra-cab strong { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.cp-esp-trilho { height: 4px; margin-top: 3px; border-radius: 999px; background: rgba(138, 170, 235, .18); overflow: hidden; }
.cp-esp-trilho i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--pc-accent); box-shadow: 0 0 8px rgba(239, 127, 47, .55); transition: width 600ms var(--ease-out); }
.cp-esp-barra.acuracia .cp-esp-trilho i { background: #7ed957; box-shadow: 0 0 8px rgba(126, 217, 87, .55); }
.cp-esp-nota { margin: 0; padding: 0 14px; min-height: 2.9em; font-family: var(--font-serif); font-style: italic; font-size: 12px; line-height: 1.45; color: #a9bbdb; }
/* o texto de cada lado, embaixo do seu lado */
.cp-racha-info { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); margin-top: 16px; }
.cp-racha-info p { margin: 0; padding: 12px 4px 0; border-top: 2px solid; font-size: 15px; line-height: 1.55; }
.cp-racha-info p.outros { grid-column: 1; border-color: rgba(139, 98, 255, .55); color: #a6a3c2; }
.cp-racha-info p.cortex { grid-column: 3; border-color: var(--pc-accent); color: #dbe6ff; }
.cp-racha-info p b { color: #eef5ff; font-weight: 600; }
#cp-ato-areas .cp-demo-nota code { font-size: .95em; }

/* ---- ato 3: as duas contas e o gráfico ---- */
.cp-conta-grade { display: grid; grid-template-columns: 236px 236px minmax(0, 1fr); gap: 14px; align-items: start; }
.cp-recibo {
  position: relative; margin: 0; padding: 16px 16px 22px; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #f4efe4, #ebe4d4); color: #2b2418;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.5;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .45), inset 0 1px 0 #fff;
  /* a borda de baixo serrilhada, como papel de caixa */
  -webkit-mask-image: linear-gradient(#000 0 0), radial-gradient(circle at 7px 100%, transparent 6px, #000 6.5px); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(#000 0 0), radial-gradient(circle at 7px 100%, transparent 6px, #000 6.5px); mask-composite: intersect;
  -webkit-mask-size: 100% 100%, 14px 100%; mask-size: 100% 100%, 14px 100%; -webkit-mask-repeat: no-repeat, repeat-x; mask-repeat: no-repeat, repeat-x;
}
.cp-recibo.outros { background: linear-gradient(180deg, #ece7f7, #e2dbf0); }
.cp-recibo-cab { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px dashed rgba(43, 36, 24, .35); }
.cp-recibo-cab b { font-family: var(--font-serif); font-style: italic; font-size: 14px; font-weight: 500; color: #2b2418; }
.cp-recibo .cp-tag { align-self: flex-start; margin: 0; }
.cp-recibo .cp-tag.outros { color: #5b2bd6; background: rgba(139, 98, 255, .14); border-color: rgba(91, 43, 214, .45); }
.cp-recibo .cp-tag.cortex { color: #b4500f; background: rgba(239, 127, 47, .16); border-color: rgba(217, 99, 26, .5); }
.cp-recibo-itens { list-style: none; margin: 0; padding: 10px 0 8px; }
.cp-recibo-itens li { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; color: #4a4033; opacity: 0; transform: translateY(4px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); transition-delay: calc(200ms + var(--i, 0) * 160ms); }
.cp-recibo.visto .cp-recibo-itens li { opacity: 1; transform: none; }
.cp-recibo-itens li i { flex: 1; border-bottom: 1px dotted rgba(43, 36, 24, .45); transform: translateY(-3px); }
.cp-recibo-itens li b { font-weight: 700; color: #2b2418; font-variant-numeric: tabular-nums; }
.cp-recibo-itens li.ruim b { color: #c2263f; }
.cp-recibo-itens li.bom b { color: #1f8a3b; }
.cp-recibo-total { display: flex; align-items: baseline; gap: 8px; padding-top: 10px; border-top: 1px dashed rgba(43, 36, 24, .35); }
.cp-recibo-total span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #6b5f4d; }
.cp-recibo-total b { margin-left: auto; font-family: var(--font-serif); font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: #2b2418; font-variant-numeric: tabular-nums; }
.cp-recibo.outros .cp-recibo-total b { color: #5b2bd6; }
.cp-recibo.cortex .cp-recibo-total b { color: #c2540f; }
.cp-recibo-total small { font-size: 10.5px; color: #6b5f4d; }
.cp-recibo-nota { margin: 10px 0 0; font-family: var(--font-serif); font-style: italic; font-size: 12px; color: #6b5f4d; text-align: center; }
.cp-conta-grade .cp-placar {
  margin: 0; padding: 16px 16px 14px; border-radius: 20px;
  border: 1px solid rgba(138, 170, 235, .2);
  background: linear-gradient(180deg, rgba(23, 38, 66, .97), rgba(10, 17, 32, .98));
  box-shadow: inset 0 1px 0 rgba(180, 222, 255, .1), 0 24px 60px rgba(0, 0, 0, .4);
}
.cp-placar figcaption { margin: 0 0 12px; font-family: var(--font-serif); font-style: italic; font-size: 13px; color: #7f93b8; }
.cp-placar-grafico { display: block; width: 100%; height: auto; margin-top: 2px; overflow: visible; }
.cp-placar-grafico .eixo { stroke: rgba(138, 170, 235, .3); stroke-width: 1; }
.cp-placar-grafico .grade { stroke: rgba(138, 170, 235, .09); stroke-width: 1; }
.cp-placar-grafico .marca { stroke: rgba(138, 170, 235, .3); stroke-width: 1; stroke-dasharray: 3 3; }
.cp-placar-grafico text { font-family: var(--font-sans); font-size: 10px; fill: #7f93b8; }
.cp-placar-grafico .titulo-eixo { font-family: var(--font-serif); font-style: italic; font-size: 11px; fill: #93a7c9; }
.cp-placar-grafico .linha { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); transition: stroke-dashoffset 1.7s var(--ease-out); }
.cp-placar-grafico .linha-cofre { stroke: var(--cp-cofre-claro); filter: drop-shadow(0 0 4px rgba(139, 98, 255, .6)); }
.cp-placar-grafico .linha-cortex { stroke: var(--pc-accent-strong, #ffb07a); filter: drop-shadow(0 0 5px rgba(239, 127, 47, .8)); transition-delay: 400ms; }
.cp-placar-grafico .area-cofre { fill: var(--cp-cofre); opacity: 0; transition: opacity 1s var(--ease-out) 900ms; }
.cp-placar-grafico .fim { font-family: var(--font-serif); font-style: italic; font-size: 11.5px; opacity: 0; transition: opacity 500ms var(--ease-out) 1500ms; }
.cp-placar-grafico .fim-cofre { fill: var(--cp-cofre-claro); }
.cp-placar-grafico .fim-cortex { fill: var(--pc-accent-strong, #ffb07a); }
.cp-placar-grafico .ponto { opacity: 0; transition: opacity 400ms var(--ease-out) 1500ms; }
.cp-placar-grafico .ponto-cofre { fill: var(--cp-cofre-claro); }
.cp-placar-grafico .ponto-cortex { fill: var(--pc-accent-strong, #ffb07a); }
.cp-placar.visto .linha { stroke-dashoffset: 0; }
.cp-placar.visto .area-cofre { opacity: .16; }
.cp-placar.visto .fim, .cp-placar.visto .ponto { opacity: 1; }
.cp-placar-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.cp-placar-num { padding: 12px 12px 10px; border-radius: 12px; border: 1px solid rgba(138, 170, 235, .16); background: rgba(3, 9, 20, .45); opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(700ms + var(--i, 0) * 140ms); }
.cp-placar.visto .cp-placar-num { opacity: 1; transform: none; }
.cp-placar-num strong { display: block; font-family: var(--font-serif); font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--pc-accent-strong, #ffb07a); font-variant-numeric: tabular-nums; }
.cp-placar-num span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.3; color: #eef5ff; }
.cp-placar-num small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.3; color: #7f93b8; }

@media (max-width: 1100px) {
  .cp-conta-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cp-conta-grade .cp-placar { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .cp-ato-baixo { grid-template-columns: minmax(0, 1fr); }
  .cp-pista { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cp-pista-soma { justify-items: start; text-align: left; }
}
@media (max-width: 760px) {
  .cp-racha { grid-template-columns: minmax(0, 1fr); }
  .cp-racha-vs { height: 44px; }
  .cp-racha-vs::before { top: 50%; bottom: auto; left: 8%; right: 8%; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(139, 98, 255, .6) 30%, rgba(239, 127, 47, .7) 70%, transparent); }
  .cp-racha-info { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cp-racha-info p.outros, .cp-racha-info p.cortex { grid-column: 1; }
  .cp-cofre-grafo { max-height: 180px; }
  .cp-conta-grade { grid-template-columns: minmax(0, 1fr); }
  .cp-placar-numeros { grid-template-columns: minmax(0, 1fr); }
  /* o SVG encolhe com a tela: as letras crescem em unidades do viewBox para continuarem legíveis */
  .cp-placar-grafico text { font-size: 15px; }
  .cp-placar-grafico .titulo-eixo, .cp-placar-grafico .fim { font-size: 16px; }
  .cp-placar-grafico .linha { stroke-width: 3.2; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-pista-trilho li, .cp-pista-soma em, .cp-recibo-itens li, .cp-placar-num { transition: none; }
  .cp-vetor-barras rect, .cp-cofre-grafo circle, .cp-esp-reg.on polygon { animation: none; }
  .cp-placar-grafico .linha, .cp-placar-grafico .area-cofre, .cp-placar-grafico .fim, .cp-placar-grafico .ponto { transition: none; }
}