/* UI do memoria — complementa packages/brand/tokens.css (a atmosfera .clm,
   as fontes e as cores vêm de lá; aqui só o layout desta app). */

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--clm-text);
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
}

.menus {
  display: flex;
  gap: 1.4rem;
}

.menus a {
  color: var(--clm-text-muted);
  text-decoration: none;
}

.menus a:hover {
  color: var(--clm-gold-light);
}

.pagina {
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem 2rem 4rem;
}

.hero h1 {
  font-family: "Unbounded", sans-serif;
  color: var(--clm-gold);
  margin-bottom: 0.4rem;
}

.hero .sub {
  color: var(--clm-text-muted);
  max-width: 46rem;
}

.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}

.cartao {
  display: block;
  padding: 1.2rem 1.4rem;
  border-radius: 14px;
  text-decoration: none;
  color: var(--clm-text);
}

.cartao h2 {
  font-family: "Unbounded", sans-serif;
  font-size: 1.05rem;
  color: var(--clm-gold);
  margin-bottom: 0.4rem;
}

.cartao p {
  color: var(--clm-text-muted);
  font-size: 0.92rem;
}

.pagina a,
body.cena a {
  color: var(--clm-gold-light);
}

.achado .extrato {
  color: var(--clm-text);
  margin: 0.4rem 0;
}

.achado .procedencia {
  color: var(--clm-text-muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.achado .fonte {
  font-family: "JetBrains Mono", monospace;
  color: var(--clm-gold);
}

.formulario label {
  display: block;
  margin: 0.6rem 0;
  color: var(--clm-text-muted);
}

.formulario input[type="text"],
.formulario input[type="email"],
.formulario input:not([type]),
.formulario textarea,
.busca-form input[type="search"] {
  width: 100%;
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 10px;
  color: var(--clm-text);
  padding: 0.6rem 0.8rem;
  font-family: "Manrope", sans-serif;
}

.busca-form {
  display: flex;
  gap: 0.8rem;
  margin: 1rem 0 1.6rem;
}

.busca-form input[type="search"] {
  flex: 1;
}

.clm-btn {
  cursor: pointer;
}

.clm-btn.perigo {
  background: transparent;
  color: var(--clm-text-muted);
  border: 1px solid rgba(212, 175, 55, 0.35);
}

.tabela-tokens {
  width: 100%;
  border-collapse: collapse;
}

.tabela-tokens th,
.tabela-tokens td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

.tabela-tokens th {
  color: var(--clm-gold);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
}

.segredo-novo .segredo {
  display: block;
  font-family: "JetBrains Mono", monospace;
  background: rgba(212, 175, 55, 0.08);
  border: 1px dashed rgba(212, 175, 55, 0.4);
  border-radius: 10px;
  padding: 0.8rem;
  margin-top: 0.6rem;
  overflow-wrap: anywhere;
  color: var(--clm-gold-light);
}

.aviso-ok {
  color: var(--clm-gold-light);
}

.aviso-erro {
  color: #e08585;
}

.ajuda {
  color: var(--clm-text-muted);
  font-size: 0.9rem;
}

.rodape {
  text-align: center;
  color: var(--clm-text-muted);
  padding: 2rem;
  font-size: 0.85rem;
}

/* ================================================================
   Onboarding imersivo — os 4 atos (design "Jarvis" aprovado 2026-09-12).
   surgir/mel/pulsar/esteira vêm do tokens.css; aqui só o que é da cena. */

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes girar-rev { to { transform: rotate(-360deg); } }
@keyframes respirar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes brilhar {
  0%, 100% { box-shadow: 0 0 60px rgba(212, 175, 55, 0.4), 0 0 150px rgba(212, 175, 55, 0.16); }
  50% { box-shadow: 0 0 90px rgba(212, 175, 55, 0.6), 0 0 210px rgba(212, 175, 55, 0.26); }
}
@keyframes equaliza { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes varrer { from { background-position: -200px 0; } to { background-position: 400px 0; } }

body.cena { overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; }

.cena-sair {
  position: fixed; top: 18px; right: 22px; z-index: 10;
  font-family: var(--clm-font-mono); font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--clm-gold-dim); text-decoration: none;
  border: 1px solid rgba(212, 175, 55, 0.25); border-radius: var(--clm-radius-sm);
  padding: 0.3rem 0.6rem;
}
.cena-sair:hover { color: var(--clm-gold-light); border-color: rgba(212, 175, 55, 0.5); }

.cena-marca {
  display: flex; align-items: center; justify-content: center; gap: 0.85rem;
  padding-top: 2.2rem;
}
.cena-marca span {
  font-family: var(--clm-font-mono); font-size: 0.75rem; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--clm-gold-dim);
}

.cena-palco { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; }
.cena-ticker { margin-top: auto; }

/* Entradas encenadas em cascata */
.surgir { animation: surgir 0.7s var(--clm-ease) both; }
.surgir-1 { animation: surgir 0.8s var(--clm-ease) 0.15s both; }
.surgir-2 { animation: surgir 0.8s var(--clm-ease) 0.3s both; }
.surgir-3 { animation: surgir 0.8s var(--clm-ease) 0.45s both; }

/* Células hexagonais decorativas ao fundo */
.hexfundo {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  position: absolute; animation: mel 6s ease-in-out infinite; pointer-events: none;
}

/* ---- O orbe: o núcleo da memória (3 tamanhos) ---- */
.orbe-cena { position: relative; display: flex; align-items: center; justify-content: center; }
.ato-abertura .orbe-cena { width: 440px; height: 380px; }
.orbe-cena-compacta { width: 360px; height: 320px; flex-direction: column; gap: 1rem; }

.anel { position: absolute; border-radius: 50%; pointer-events: none; }
.anel-1 { width: 420px; height: 420px; border: 1px dashed rgba(212, 175, 55, 0.18); animation: girar 52s linear infinite; }
.anel-2 { width: 348px; height: 348px; border: 1px dashed rgba(212, 175, 55, 0.3); border-top-color: rgba(230, 200, 110, 0.8); animation: girar-rev 34s linear infinite; }
.anel-3 { width: 288px; height: 288px; border: 1px solid rgba(212, 175, 55, 0.14); border-left: 2px solid rgba(230, 200, 110, 0.55); animation: girar 21s linear infinite; }

.orbe { position: relative; border-radius: 50%; overflow: hidden; animation: respirar 4.2s ease-in-out infinite, brilhar 4.2s ease-in-out infinite; }
.orbe-grande { width: 214px; height: 214px; }
.orbe-media { width: 172px; height: 172px; animation-duration: 2.6s, 2.6s; }
.orbe-mini { width: 44px; height: 44px; box-shadow: 0 0 22px rgba(212, 175, 55, 0.5); animation: respirar 3.6s ease-in-out infinite; }

.orbe-nucleo {
  position: absolute; inset: -30px;
  background: conic-gradient(from 0deg, var(--clm-gold), #6d5a1c, var(--clm-gold-light), var(--clm-gold-dim), #f0d98a, #b8962e, var(--clm-gold));
  animation: girar 9s linear infinite;
}
.orbe-nucleo.rapido { animation-duration: 5s; }
.orbe-mini .orbe-nucleo { inset: -8px; animation-duration: 7s; }
.orbe-brilho { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255, 253, 240, 0.75), rgba(255, 253, 240, 0) 44%); }
.orbe-sombra { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 62%, rgba(10, 10, 10, 0) 30%, rgba(10, 10, 10, 0.55) 78%); }

/* ---- Tipografia da cena ---- */
.mono-etiqueta {
  font-family: var(--clm-font-mono); font-size: 0.7rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--clm-gold-dim);
}
.mono-etiqueta.destaque { color: var(--clm-gold); }
.titulo-cena { font-family: var(--clm-font-display); font-weight: 700; font-size: 2.7rem; line-height: 1.15; margin: 1rem 0 0; text-align: center; }
.titulo-cena.gigante { font-weight: 900; font-size: 3.3rem; text-align: left; }
.titulo-pergunta { font-family: var(--clm-font-display); font-weight: 700; font-size: 2.3rem; line-height: 1.25; margin: 0.9rem 0 0; text-align: center; max-width: 62rem; }
.sub-cena { max-width: 40rem; text-align: center; font-size: 1.13rem; color: var(--clm-text-muted); margin: 1rem 0 0; }
.linha-status { display: flex; align-items: center; gap: 0.6rem; font-family: var(--clm-font-mono); font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--clm-gold-dim); }
.ponto-pulso { width: 7px; height: 7px; border-radius: 50%; background: var(--clm-gold); animation: pulsar 1.6s ease-in-out infinite; }

.ato-abertura { display: flex; flex-direction: column; align-items: center; padding-top: 0.5rem; }
.acoes-cena { display: flex; align-items: center; gap: 1.6rem; margin-top: 2.1rem; }
.acoes-cena .clm-btn { text-decoration: none; display: inline-block; }
.acao-discreta { font-size: 0.9rem; }
.clm-btn.fantasma { background: var(--clm-glass-bg); color: var(--clm-gold-light); border: 1px solid rgba(212, 175, 55, 0.35); }
.clm-btn.fantasma:hover { background: rgba(212, 175, 55, 0.2); box-shadow: none; }

/* ---- Ato 2: entrevista ---- */
.entrevista-topo { width: min(1160px, 92vw); display: flex; justify-content: flex-start; padding-top: 0.4rem; }
.escuta { display: flex; align-items: center; gap: 1.1rem; }
.escuta-legenda { display: flex; flex-direction: column; gap: 0.35rem; }
.equalizer { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.equalizer span { width: 3px; height: 14px; background: var(--clm-gold); transform-origin: bottom; animation: equaliza 1s ease-in-out infinite; }
.equalizer span:nth-child(1) { background: var(--clm-gold-dim); animation-duration: 0.9s; }
.equalizer span:nth-child(3) { background: var(--clm-gold-light); animation-delay: 0.3s; animation-duration: 0.8s; }
.equalizer span:nth-child(2) { animation-delay: 0.15s; animation-duration: 1.1s; }
.equalizer span:nth-child(4) { animation-delay: 0.1s; animation-duration: 1.2s; }
.equalizer span:nth-child(5) { background: var(--clm-gold-dim); animation-delay: 0.22s; }
.equalizer em { font-family: var(--clm-font-mono); font-style: normal; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clm-gold-dim); margin-left: 8px; }

.hex-trilha { display: flex; gap: 14px; margin-top: 1.6rem; }
.hex-progresso {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  width: 40px; height: 35px; background: rgba(212, 175, 55, 0.06);
  transition: background var(--clm-fast) var(--clm-ease);
}
.hex-progresso:hover { background: rgba(212, 175, 55, 0.18); }
.hex-progresso.feita { background: var(--clm-gold); box-shadow: 0 0 14px rgba(212, 175, 55, 0.5); }
.hex-progresso.atual { background: rgba(212, 175, 55, 0.22); animation: mel 2.4s ease-in-out infinite; outline: 1px solid rgba(230, 200, 110, 0.9); outline-offset: -1px; }

.ato-pergunta { display: flex; flex-direction: column; align-items: center; margin-top: 1.4rem; width: 100%; }
.caixa-resposta { width: min(880px, 92vw); margin-top: 2rem; padding: 1.6rem 1.9rem 1.2rem; }
.caixa-resposta textarea {
  width: 100%; background: transparent; border: 0; resize: vertical;
  color: var(--clm-text); font-family: var(--clm-font); font-weight: 300;
  font-size: 1.18rem; line-height: 1.65; box-sizing: border-box;
}
.caixa-resposta textarea::placeholder { color: rgba(184, 176, 160, 0.45); }
.caixa-resposta textarea:focus { outline: none; }
.caixa-resposta-acoes {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 0.9rem; border-top: 1px solid rgba(212, 175, 55, 0.15); padding-top: 1rem;
}
.rodape-cena {
  margin: auto 0 2rem; font-family: var(--clm-font-mono); font-size: 0.68rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(138, 114, 35, 0.7);
}

/* ---- Ato 3: síntese ---- */
.ato-sintese { display: flex; flex-direction: column; align-items: center; width: min(1160px, 94vw); }
.sintese-cabeca { display: flex; flex-direction: column; align-items: center; padding-top: 0.6rem; }
.sintese-corpo { display: flex; align-items: center; gap: 3.5rem; margin-top: 1.8rem; }
.cristais { display: flex; flex-direction: column; gap: 1.1rem; width: min(520px, 50vw); }
.cartao-cristal { padding: 1rem 1.3rem; }
.cartao-cristal p { margin: 0.4rem 0 0; font-weight: 400; line-height: 1.5; }
.cartao-cristal.lacuna p { color: var(--clm-text-muted); }
.sintese-rodape { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; margin: 2.4rem 0 2rem; }
.sintese-rodape .clm-btn { text-decoration: none; }
.barra-cristal { width: min(560px, 80vw); height: 4px; border-radius: var(--clm-radius-pill); background: rgba(212, 175, 55, 0.12); overflow: hidden; }
.barra-cristal-fluxo {
  height: 4px; border-radius: var(--clm-radius-pill);
  background-image: linear-gradient(90deg, var(--clm-gold-dim), var(--clm-gold-light), var(--clm-gold-dim));
  background-size: 200px 4px; animation: varrer 1.6s linear infinite;
}

/* ---- Ato 4: despertar ---- */
.ato-despertar { display: flex; align-items: center; gap: 3rem; padding-top: 1rem; }
.favo-vivo { position: relative; width: 640px; height: 600px; flex-shrink: 0; }
.celula {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  position: absolute; width: 168px; height: 146px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  animation: mel 4.5s ease-in-out infinite;
}
.celula .rotulo { font-family: var(--clm-font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clm-gold-light); }
.celula .check { font-family: var(--clm-font-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--clm-gold); }
.celula.central { background: rgba(212, 175, 55, 0.3); box-shadow: 0 0 46px rgba(212, 175, 55, 0.35); animation: none; }
.celula.central .rotulo { color: var(--clm-text); }

.despertar-texto { display: flex; flex-direction: column; align-items: flex-start; max-width: 34rem; }
.despertar-texto .titulo-cena { text-align: left; margin-top: 1.1rem; }
.despertar-texto .sub-cena { text-align: left; }
.despertar-texto .linha-status { margin-top: 1.8rem; }

/* Posições da cena por classe — a UI_CSP do core (sem unsafe-inline)
   bloqueia style="" e é assim que deve continuar. */
.hf-1 { width: 120px; height: 104px; left: 7%; top: 14%; }
.hf-2 { width: 78px; height: 68px; left: 14%; top: 26%; animation-delay: 1.2s; }
.hf-3 { width: 150px; height: 130px; right: 6%; top: 60%; animation-delay: 0.6s; }
.hf-4 { width: 92px; height: 80px; right: 10%; top: 15%; animation-delay: 2s; }

.favo-vivo .celula:nth-child(1) { left: 236px; top: 237px; }
.favo-vivo .celula:nth-child(2) { left: 236px; top: 87px; }
.favo-vivo .celula:nth-child(3) { left: 362px; top: 162px; animation-delay: 0.7s; }
.favo-vivo .celula:nth-child(4) { left: 362px; top: 312px; animation-delay: 1.4s; }
.favo-vivo .celula:nth-child(5) { left: 236px; top: 387px; animation-delay: 2.1s; }
.favo-vivo .celula:nth-child(6) { left: 110px; top: 312px; animation-delay: 2.8s; }
.favo-vivo .celula:nth-child(7) { left: 110px; top: 162px; animation-delay: 3.5s; }

.frac-1 { width: 14.3%; } .frac-2 { width: 28.6%; } .frac-3 { width: 42.9%; }
.frac-4 { width: 57.1%; } .frac-5 { width: 71.4%; } .frac-6 { width: 85.7%; }
.frac-7 { width: 100%; }

/* ================================================================
   UI imersiva — as 6 cenas (design aprovado 2026-09-12): centro de
   comando, console de busca, fontes, conectores, tokens e equipe. */

.ponto-pulso.ok { background: var(--clm-ok); }
.ponto-pulso.off { background: var(--clm-text-muted); animation: none; opacity: 0.5; }
.ponto-pulso.perigo { background: var(--clm-danger); }

/* Cabeçalho comum das cenas internas */
.hero-cena { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 1.4rem; }
.hero-cena .aviso-ok, .hero-cena .aviso-erro { margin-top: 0.9rem; font-size: 0.95rem; }

.cena-topo {
  display: flex; justify-content: space-between; align-items: center;
  width: min(1000px, 92vw); margin: 0 auto; padding-top: 1.7rem;
}

/* ---- Cena 1: centro de comando (favo navegável) ---- */
.ato-comando { display: flex; align-items: center; gap: 3.2rem; padding-top: 1.4rem; flex-wrap: wrap; justify-content: center; }

.favo-nav { position: relative; width: 640px; height: 620px; flex-shrink: 0; }
.hexnav {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  position: absolute; width: 172px; height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: rgba(212, 175, 55, 0.08); text-decoration: none;
  transition: background var(--clm-fast) var(--clm-ease);
  animation: mel 5s ease-in-out infinite;
}
a.hexnav:hover { background: rgba(212, 175, 55, 0.22); animation: none; }
.hexnav .nome { font-family: var(--clm-font-display); font-weight: 700; font-size: 0.98rem; color: var(--clm-gold-light); }
.hexnav .sub { font-family: var(--clm-font-mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clm-gold-dim); }
.hexnav.nucleo { background: rgba(212, 175, 55, 0.22); box-shadow: 0 0 46px rgba(212, 175, 55, 0.3); animation: none; }
.nucleo-orbe { width: 64px; height: 64px; }

.hn-c { left: 234px; top: 245px; }
.hn-1 { left: 234px; top: 92px; }
.hn-2 { left: 363px; top: 168px; animation-delay: 0.8s; }
.hn-3 { left: 363px; top: 322px; animation-delay: 1.6s; }
.hn-4 { left: 234px; top: 398px; animation-delay: 2.4s; }
.hn-5 { left: 105px; top: 322px; animation-delay: 3.2s; }
.hn-6 { left: 105px; top: 168px; animation-delay: 4s; }

.comando-texto { display: flex; flex-direction: column; align-items: flex-start; max-width: 34rem; }
.comando-texto .titulo-cena { text-align: left; margin-top: 1.1rem; }
.comando-texto .sub-cena { text-align: left; margin-top: 0.9rem; }

.metricas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-top: 1.9rem; width: 100%; }
.metrica { padding: 0.9rem 1.1rem; }
.metrica span { display: block; font-family: var(--clm-font-display); font-weight: 700; font-size: 1.7rem; color: var(--clm-gold); }
.metrica p { margin: 0.2rem 0 0; font-family: var(--clm-font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clm-text-muted); }

.cartao-lacuna { margin-top: 1.4rem; padding: 1rem 1.3rem; width: 100%; box-sizing: border-box; }
.cartao-lacuna p { margin: 0.45rem 0 0; line-height: 1.55; }

/* ---- Cena 2: console de busca ---- */
.console-busca {
  display: flex; align-items: center; gap: 0.9rem;
  width: min(880px, 92vw); margin-top: 2.6rem; padding: 0.7rem 0.8rem 0.7rem 1.3rem;
  background: var(--clm-glass-bg); border: 1px solid var(--clm-glass-border);
  border-radius: var(--clm-radius-pill); backdrop-filter: blur(var(--clm-glass-blur));
}
.console-busca:focus-within { border-color: rgba(230, 200, 110, 0.7); box-shadow: 0 0 34px rgba(212, 175, 55, 0.18); }
.console-prompt { font-family: var(--clm-font-mono); font-size: 1.25rem; color: var(--clm-gold); }
.console-busca input[type="search"] {
  flex: 1; background: transparent; border: 0; color: var(--clm-text);
  font-family: var(--clm-font); font-weight: 300; font-size: 1.15rem;
}
.console-busca input[type="search"]:focus { outline: none; }
/* o "x" azul nativo do WebKit destoa do gold/preto — o Esc já limpa */
.console-busca input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.console-busca input[type="search"]::placeholder { color: rgba(184, 176, 160, 0.45); }
.console-busca .mono-etiqueta { white-space: nowrap; }

.achados { display: flex; flex-direction: column; gap: 1rem; width: min(880px, 92vw); margin-top: 1.9rem; }
.cartao-achado { padding: 1.2rem 1.4rem; }
.achado-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.achado-cabeca h2 { font-family: var(--clm-font-display); font-size: 1.02rem; color: var(--clm-gold); margin: 0; }
.badge-fonte {
  font-family: var(--clm-font-mono); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--clm-gold-light);
  border: 1px solid rgba(212, 175, 55, 0.35); border-radius: var(--clm-radius-pill);
  padding: 0.2rem 0.65rem; white-space: nowrap;
}
.cartao-achado .extrato { margin: 0.7rem 0 0; line-height: 1.6; color: var(--clm-text); }
.achado-rodape {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 0.9rem; border-top: 1px solid rgba(212, 175, 55, 0.15); padding-top: 0.8rem;
}
.achado-rodape a { font-size: 0.8rem; overflow-wrap: anywhere; }
.relevancia { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.relevancia-trilha { width: 120px; height: 4px; border-radius: var(--clm-radius-pill); background: rgba(212, 175, 55, 0.12); overflow: hidden; }
.relevancia-fluxo { height: 4px; border-radius: var(--clm-radius-pill); background: linear-gradient(90deg, var(--clm-gold-dim), var(--clm-gold-light)); }
.frac-r0 { width: 0; } .frac-r1 { width: 10%; } .frac-r2 { width: 20%; }
.frac-r3 { width: 30%; } .frac-r4 { width: 40%; } .frac-r5 { width: 50%; }
.frac-r6 { width: 60%; } .frac-r7 { width: 70%; } .frac-r8 { width: 80%; }
.frac-r9 { width: 90%; } .frac-r10 { width: 100%; }
.sem-resultado { max-width: 34rem; margin: 2.4rem auto 0; text-align: center; color: var(--clm-text-muted); line-height: 1.6; }

/* ---- Cena 3: fontes ---- */
.grade-fontes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.2rem; width: min(1100px, 94vw); margin-top: 2.2rem;
}
.cartao-fonte { padding: 1.3rem 1.4rem; }
.fonte-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.fonte-cabeca h2 { font-family: var(--clm-font-mono); font-size: 1rem; color: var(--clm-gold); margin: 0; }
.badge-saude, .badge-falha, .badge-alerta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--clm-font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; border-radius: var(--clm-radius-pill); padding: 0.22rem 0.7rem;
}
.badge-saude { color: var(--clm-ok); border: 1px solid rgba(111, 191, 115, 0.35); }
.badge-falha { color: var(--clm-danger); border: 1px solid rgba(224, 82, 82, 0.4); }
.badge-alerta { color: var(--clm-gold-light); border: 1px solid rgba(212, 175, 55, 0.4); background: rgba(212, 175, 55, 0.08); }
.fonte-numeros { display: flex; gap: 2.2rem; margin-top: 1.1rem; }
.fonte-numeros span { display: block; font-family: var(--clm-font-display); font-weight: 700; font-size: 1.55rem; color: var(--clm-gold); }
.fonte-numeros p { margin: 0.15rem 0 0; font-family: var(--clm-font-mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clm-text-muted); }
.fonte-nota { margin: 0.9rem 0 0; font-size: 0.88rem; color: var(--clm-text-muted); line-height: 1.55; }
.fonte-rodape {
  display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
  margin-top: 1.2rem; border-top: 1px solid rgba(212, 175, 55, 0.15); padding-top: 0.9rem;
}
.cartao-conectar {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;
  min-height: 180px; padding: 1.3rem; text-align: center; text-decoration: none;
  border: 1px dashed rgba(212, 175, 55, 0.4); border-radius: var(--clm-radius);
  color: var(--clm-gold-light); animation: mel 4.5s ease-in-out infinite;
}
.cartao-conectar:hover { background: rgba(212, 175, 55, 0.1); animation: none; }
.cartao-conectar span { font-family: var(--clm-font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; line-height: 2; }
.linha-tempo { width: min(1100px, 94vw); margin: 2rem 0 1.6rem; padding: 1rem 1.4rem; box-sizing: border-box; }
.linha-tempo-itens { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin-top: 0.6rem; font-size: 0.85rem; color: var(--clm-text-muted); }
.linha-tempo-itens em.falha { font-style: normal; color: var(--clm-danger); }

/* ---- Cena 4: conectores MCP ---- */
.grade-conectores {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.2rem; width: min(1000px, 94vw); margin-top: 2.2rem;
}
.cartao-conector { padding: 1.3rem 1.4rem; }
.cartao-conector.ativo { border-color: rgba(212, 175, 55, 0.5); }
.conector-cabeca { display: flex; align-items: center; gap: 1rem; }
.conector-identidade { display: flex; flex-direction: column; gap: 0.35rem; }
.conector-identidade h2 { font-family: var(--clm-font-display); font-size: 1.02rem; color: var(--clm-text); margin: 0; }
.selo {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  width: 54px; height: 47px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212, 175, 55, 0.14);
  font-family: var(--clm-font-display); font-weight: 700; font-size: 1.1rem; color: var(--clm-gold-light);
}
.selo.aceso { background: var(--clm-gold); color: var(--clm-black); box-shadow: 0 0 24px rgba(212, 175, 55, 0.45); }
.conector-form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.1rem; }
.campo {
  width: 100%; box-sizing: border-box;
  background: rgba(212, 175, 55, 0.06); border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--clm-radius-sm); color: var(--clm-text);
  padding: 0.55rem 0.8rem; font-family: var(--clm-font); font-size: 0.92rem;
}
.campo:focus { outline: none; border-color: rgba(230, 200, 110, 0.7); }
.conector-acoes { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.3rem; }
.conector-acoes .mono-etiqueta { letter-spacing: 0.12em; font-size: 0.6rem; line-height: 1.8; }

/* ---- Cena 5: tokens dos agentes ---- */
.palco-tokens {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.6rem;
  width: min(1060px, 94vw); margin-top: 2.2rem; align-items: start;
}
.coluna-agentes { display: flex; flex-direction: column; gap: 1rem; }
.cartao-agente { padding: 1.2rem 1.4rem; }
.cartao-agente.apagado { opacity: 0.55; }
.agente-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; }
.agente-nome { display: flex; align-items: center; gap: 0.7rem; }
.agente-nome h2 { font-family: var(--clm-font-display); font-size: 1.02rem; color: var(--clm-text); margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.chip {
  font-family: var(--clm-font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--clm-gold-light);
  background: rgba(212, 175, 55, 0.08); border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--clm-radius-pill); padding: 0.25rem 0.7rem;
}
.chip.papel-dono { background: var(--clm-gold); color: var(--clm-black); border-color: var(--clm-gold); }
.chip.papel-editor { border-color: rgba(212, 175, 55, 0.55); }
.coluna-forja { display: flex; flex-direction: column; gap: 1.2rem; }
.cartao-forja { padding: 1.3rem 1.4rem; }
.cartao-forja h2 { font-family: var(--clm-font-display); font-size: 1.02rem; color: var(--clm-gold); margin: 0 0 0.5rem; }
.segredo-novo { padding: 1.2rem 1.4rem; }
.segredo-novo.pulso-forte { border-color: rgba(230, 200, 110, 0.8); box-shadow: 0 0 38px rgba(212, 175, 55, 0.28); }
.mono-etiqueta.alerta { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--clm-gold); }
.doutrina { line-height: 2.1; text-align: center; }
.linha { display: flex; align-items: center; gap: 0.5rem; }

/* ---- Cena 6: equipe ---- */
.grade-papeis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem; width: min(1000px, 94vw); margin-top: 2.2rem;
}
.cartao-papel { padding: 1.2rem 1.4rem; }
.cartao-papel p { margin: 0.7rem 0 0; font-size: 0.92rem; color: var(--clm-text-muted); line-height: 1.55; }
.cartao-papel.peso-1 { border-color: rgba(212, 175, 55, 0.5); }
.cartao-papel.peso-3 { opacity: 0.85; }
.papel-cabeca { display: flex; align-items: center; gap: 0.8rem; }
.papel-cabeca h2 { font-family: var(--clm-font-mono); font-size: 0.95rem; letter-spacing: 0.1em; color: var(--clm-gold); margin: 0; }
.selo-papel {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  width: 46px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--clm-font-display); font-weight: 700; font-size: 0.95rem;
}
.selo-papel.dono { background: var(--clm-gold); color: var(--clm-black); }
.selo-papel.editor { background: rgba(212, 175, 55, 0.35); color: var(--clm-text); }
.selo-papel.leitor { background: rgba(212, 175, 55, 0.12); color: var(--clm-gold-light); }
.palco-equipe {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.6rem;
  width: min(1000px, 94vw); margin-top: 1.8rem; align-items: start; margin-bottom: 2rem;
}
.cartao-pessoas { padding: 1.3rem 1.4rem; }
.cartao-pessoas h2 { font-family: var(--clm-font-display); font-size: 1.02rem; color: var(--clm-gold); margin: 0; }
.lista-pessoas { display: flex; flex-direction: column; margin-top: 0.6rem; }
.pessoa {
  display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
  padding: 0.75rem 0; border-bottom: 1px solid rgba(212, 175, 55, 0.12);
}
.pessoa:last-child { border-bottom: 0; }
.dupla { display: flex; align-items: center; gap: 0.7rem; }
body.cena select {
  background: rgba(212, 175, 55, 0.06); border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--clm-radius-sm); color: var(--clm-text);
  padding: 0.4rem 0.6rem; font-family: var(--clm-font); font-size: 0.88rem;
}
body.cena select option { background: var(--clm-surface); color: var(--clm-text); }

/* Telas menores: o favo e as grades empilham */
@media (max-width: 1120px) {
  .palco-tokens, .palco-equipe { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .favo-nav { transform: scale(0.72); transform-origin: top center; margin-bottom: -160px; }
  .metricas { grid-template-columns: 1fr; }
  .cena-topo { flex-direction: column; gap: 0.8rem; align-items: flex-start; }
}