/* Cenas vivas do artigo "A plataforma que evolui por método entrega o ganho antes do recurso"
   (frente W5, 25/09/2026). Folha própria desta página, carregada sem bloquear a renderização.

   Regras: cor só por token do portal (declarado nos dois temas em portal-artigos.css e
   geo-design.css); só transform, opacity e stroke-dashoffset animam; nada aqui esconde
   conteúdo por padrão, porque sem JavaScript esta folha nem chega a ser aplicada e a
   página precisa continuar legível com o fallback estático de cada figura. */

.w5-cena {
  margin: 1.8rem 0;
  padding: 1.1rem 1.2rem 0.9rem;
  border: 1px solid var(--fig-linha);
  border-radius: 14px;
  background: var(--fig-superficie);
}
.w5-cena-titulo {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ll-navy-head);
  text-align: left;
}
.w5-cena-legenda {
  margin: 1rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--fig-linha);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--fig-tinta-fraca);
  text-align: left;
}
.w5-cena [hidden] { display: none !important; }
.w5-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.w5-cena summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ll-ink);
}
.w5-cena summary:hover { text-decoration: underline; }

/* ---- fallback estático da cena 1 ---- */
.w5-estatico-lista {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.8rem;
}
.w5-estatico-item {
  padding: 0.85rem 1rem;
  border: 1px solid var(--fig-linha);
  border-left: 4px solid var(--fig-tinta-fraca);
  border-radius: 10px;
  background: var(--ll-surface);
}
.w5-estatico-item--metodo { border-left-color: var(--fig-s1); }
.w5-estatico-item dt { font-size: 0.98rem; font-weight: 800; color: var(--ll-navy-head); }
.w5-estatico-item dd { margin: 0.35rem 0 0; font-size: 0.89rem; line-height: 1.55; color: var(--fig-tinta); }

/* ---- cena 1: controles e leituras ---- */
.w5-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  margin: 0 0 0.8rem;
}
.w5-btn {
  min-height: 40px;
  padding: 0.45rem 0.95rem;
  font-size: 0.84rem;
}
.w5-btn[aria-pressed="true"] { background: var(--ll-soft); }
.w5-tempo {
  flex: 1 1 13rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--fig-tinta-fraca);
}
.w5-tempo input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 28px;
  accent-color: var(--ll-ink);
}
.w5-leituras {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 0.5rem;
}
.w5-leituras li {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--fig-linha);
  border-radius: 10px;
  background: var(--ll-surface);
}
.w5-leituras strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1.1;
  font-weight: 800;
  color: var(--fig-tinta);
  font-variant-numeric: tabular-nums;
}
.w5-leituras li.w5-leitura--metodo strong { color: var(--ll-ink); }
.w5-leituras span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--fig-tinta-fraca);
}
.w5-leituras number-flow { --number-flow-char-height: 1em; }

/* ---- cena 1: pistas e raias ---- */
.w5-pista {
  position: relative;
  margin: 0 0 0.8rem;
  padding: 0.6rem 0.7rem 0.7rem;
  border: 1px solid var(--fig-linha);
  border-radius: 10px;
  background: var(--ll-surface);
}
.w5-pista--metodo { border-left: 4px solid var(--fig-s1); }
.w5-pista--recurso { border-left: 4px solid var(--fig-tinta-fraca); }
.w5-pista-cabeca {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 0.8rem;
  margin: 0 0 0.45rem;
  font-size: 0.86rem;
  line-height: 1.4;
}
.w5-pista-cabeca strong { color: var(--fig-tinta); font-weight: 800; }
.w5-pista-cabeca span { color: var(--fig-tinta-fraca); }
.w5-raias {
  position: relative;
  display: grid;
  grid-template-columns: minmax(5.4rem, 7rem) minmax(0, 1fr);
}
.w5-raia { display: contents; }
.w5-raia-rotulo {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0.2rem 0.5rem 0.2rem 0;
  font-size: 0.84rem;
  line-height: 1.2;
  color: var(--fig-tinta);
}
.w5-trilho {
  position: relative;
  min-height: 34px;
  border-top: 1px dashed var(--fig-trilho);
}
.w5-raia:last-of-type .w5-trilho { border-bottom: 1px dashed var(--fig-trilho); }
.w5-barra {
  position: absolute;
  top: 9px;
  height: 16px;
  border-radius: 5px;
  background: var(--fig-s2);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.w5-barra--ouvir { background: var(--fig-tinta-fraca); }
.w5-barra--medir { background: var(--fig-s2); }
.w5-barra--comparar { background: var(--fig-s5); }
.w5-barra--enfileirar { background: var(--fig-s3); }
.w5-barra--publicar { background: var(--fig-s1); }
.w5-barra--reprova {
  background: repeating-linear-gradient(135deg, var(--fig-s1) 0 4px, var(--ll-surface) 4px 8px);
  outline: 1px dashed var(--fig-s1);
  outline-offset: -1px;
}
.w5-agente {
  position: absolute;
  top: 8px;
  left: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--ll-surface);
  background: var(--fig-tinta);
  box-shadow: 0 0 0 2px var(--fig-tinta-fraca);
  opacity: 0;
  will-change: transform, opacity;
}
.w5-camada {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  overflow: visible;
}
.w5-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--ll-ink);
  opacity: 0.85;
  will-change: transform;
}
.w5-mensagem {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--fig-superficie);
  background: var(--fig-s2);
  opacity: 0;
  will-change: transform, opacity;
}
.w5-mensagem--reprova { background: var(--fig-s1); }
@media (max-width: 700px) {
  .w5-mensagem { font-size: 0; padding: 0; width: 12px; height: 12px; border-radius: 50%; }
}
.w5-ganhos {
  display: grid;
  grid-template-columns: minmax(5.4rem, 7rem) minmax(0, 1fr);
  align-items: center;
  margin-top: 0.35rem;
}
.w5-ganhos-rotulo { font-size: 0.8rem; line-height: 1.2; color: var(--fig-tinta-fraca); padding-right: 0.5rem; }
.w5-ganhos-trilho { position: relative; height: 30px; }
.w5-ganho {
  position: absolute;
  top: 3px;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fig-s4);
  opacity: 0.18;
  transform: scale(0.7);
  will-change: transform, opacity;
}
.w5-ganho svg { width: 14px; height: 14px; fill: none; stroke: var(--fig-superficie); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.w5-ganho.is-aceso { opacity: 1; transform: none; }
.w5-regua {
  display: grid;
  grid-template-columns: minmax(5.4rem, 7rem) minmax(0, 1fr);
  align-items: start;
  margin: 0.2rem 0 0.4rem;
  font-size: 0.78rem;
  color: var(--fig-tinta-fraca);
}
.w5-regua-trilho { position: relative; height: 1.4rem; border-top: 1px solid var(--fig-linha); }
.w5-tick {
  position: absolute;
  top: 0.15rem;
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
}
.w5-legenda {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--fig-tinta);
}
.w5-legenda li { display: inline-flex; align-items: center; gap: 0.4rem; }
.w5-chave { flex: none; width: 0.8rem; height: 0.8rem; border-radius: 3px; }
.w5-chave--ouvir { background: var(--fig-tinta-fraca); }
.w5-chave--medir { background: var(--fig-s2); }
.w5-chave--comparar { background: var(--fig-s5); }
.w5-chave--enfileirar { background: var(--fig-s3); }
.w5-chave--publicar { background: var(--fig-s1); }
.w5-chave--mensagem { border-radius: 999px; background: var(--fig-s2); }
.w5-chave--reprova { border-radius: 999px; background: var(--fig-s1); }
.w5-chave--ganho { border-radius: 50%; background: var(--fig-s4); }
.w5-chave--agente { border-radius: 50%; background: var(--fig-tinta); }

/* ---- cena 2: grafo ---- */
.w5-grafo-regiao {
  position: relative;
  border-radius: 10px;
}
.w5-grafo-regiao:focus-visible { outline: 3px solid var(--ll-ink); outline-offset: 3px; }
.w5-grafo-canvas {
  display: block;
  width: 100%;
  height: clamp(320px, 56vw, 460px);
  border: 1px solid var(--fig-linha);
  border-radius: 10px;
  background: var(--ll-surface);
  touch-action: pan-y;
}
.w5-grafo-legenda {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--fig-tinta);
}
.w5-grafo-legenda li { display: inline-flex; align-items: center; gap: 0.4rem; }
.w5-chave--pais { border-radius: 50%; background: var(--fig-s2); }
.w5-chave--empresa { border-radius: 50%; background: var(--fig-s1); }
.w5-chave--canal { border-radius: 50%; background: var(--fig-tinta-fraca); }
.w5-chave--pratica { border-radius: 50%; background: var(--fig-s3); }
.w5-chave--resultado { border-radius: 50%; background: var(--fig-s4); }
.w5-chave--marco { border-radius: 50%; background: var(--fig-s5); }
.w5-grafo-ficha {
  margin: 0.55rem 0 0;
  min-height: 2.8em;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--fig-tinta);
  text-align: left;
}
.w5-grafo-ficha strong { color: var(--ll-navy-head); }
.w5-lista-nos {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--fig-tinta);
  columns: 2 20rem;
  column-gap: 1.4rem;
}
.w5-lista-nos li { margin-bottom: 0.35rem; break-inside: avoid; }
.w5-lista-nos strong { color: var(--ll-navy-head); }
.w5-lista-nos em { font-style: normal; color: var(--fig-tinta-fraca); }

/* ---- cena 3: gráfico ---- */
.w5-conta-grafico {
  width: 100%;
  height: clamp(260px, 48vw, 340px);
}
.w5-conta-aviso { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--fig-tinta-fraca); text-align: left; }
.w5-tabela table { font-size: 0.88rem; }
.w5-tabela caption { text-align: left; font-size: 0.84rem; color: var(--fig-tinta-fraca); padding: 0.3rem 0; }

/* ---- acabamento: destaque das figuras e barra de leitura ---- */
.lla-fig { position: relative; }
.w5-traco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  border-radius: inherit;
}
.w5-traco rect { fill: none; stroke: var(--ll-ink); stroke-width: 2; }
.w5-readbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--ll-ink);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
}
.lla-barra-tinta { transform-origin: left center; }