/* =============================================================================
 * markets-demo — paleta GLASS DARK + DOURADO/CREME, em sintonia com o resto do
 * site (mesma lógica de .scene/.card no styles.css, linhas 2183+).
 * ============================================================================= */

/* Tokens --md-* expostos no :root pra widgets que vivem FORA do `.markets-demo`
   (ex.: `.caderno-vivo__stage`, que é seção irmã do cubo, não descendente).
   A regra `.markets-demo` abaixo redeclara os mesmos valores no escopo do cubo
   pra preservar o comportamento existente — então não muda nada no cubo. */
:root{
  --md-radius: 16px;
  --md-bg-deep: rgba(14,10,6,.82);
  --md-bg-card: rgba(28,20,12,.72);
  --md-edge: rgba(212,168,87,.26);
  --md-edge-strong: rgba(212,168,87,.55);
  --md-creme: #f7eccd;
  --md-creme-bright: #fcf6df;
  --md-gold: #d4a857;
  --md-gold-bright: #e8c97a;
  --md-muted: rgba(247,236,205,.62);
}

/* Surface clara (calculado por luma da pintura em app.js::applyPintura) — inverte
   os tokens pra widgets fora do cubo ficarem legíveis em pinturas claras (Almond
   Blossoms, Friedrich Wanderer, etc.). NÃO afeta o cubo `.markets-demo`, que tem
   especificidade própria (define os tokens no próprio elemento). */
body[data-surface="light"]{
  --md-bg-deep: rgba(248,242,228,.88);
  --md-bg-card: rgba(238,232,218,.78);
  --md-edge: rgba(20,14,5,.18);
  --md-edge-strong: rgba(20,14,5,.42);
  --md-creme: #1a1410;
  --md-creme-bright: #0d0904;
  --md-gold: #8a5e1f;
  --md-gold-bright: #6b4818;
  --md-muted: rgba(20,14,5,.62);
}

.markets-demo{
  /* Face do "cubo visual". Como agora não é cubo geométrico real (faces são
     camadas independentes), não tem ampliação por perspective — o tamanho real
     da face é o que aparece. Pode ocupar mais largura útil do wrap. */
  --md-face-w: 1200px;
  --md-face-h: 620px;
  --md-prism-rx: 600px;
  --md-prism-ry: 310px;
  --md-z-back: -600px;
  --md-gap: 12px;
  --md-radius: 16px;

  /* Bg da face um pouco menos opaco que antes (.94 → .82) pra respirar com a
     pintura por trás sem perder legibilidade. */
  --md-bg-deep: rgba(14,10,6,.82);
  --md-bg-card: rgba(28,20,12,.72);
  --md-edge: rgba(212,168,87,.26);
  --md-edge-strong: rgba(212,168,87,.55);
  --md-creme: #f7eccd;
  --md-creme-bright: #fcf6df;
  --md-gold: #d4a857;
  --md-gold-bright: #e8c97a;
  --md-muted: rgba(247,236,205,.62);

  /* Override do --ib-surface no escopo da vitrine: o tema telos canônico usa
     rgba(28,20,12,.82) — quase igual ao --md-bg-deep da face — daí os cards
     ficavam "esmaecidos" sobre a face (baixo contraste). Aqui clareamos +
     opaciamos pra cards ressaltarem como camada acima da face. Outras pessoas
     usando data-theme="telos" fora da vitrine seguem com a paleta default. */
  --ib-surface: rgba(58, 42, 24, 0.96);
  --ib-surface-soft: rgba(44, 32, 18, 0.92);
  --ib-border: rgba(212, 168, 87, 0.45);
  --ib-border-soft: rgba(212, 168, 87, 0.28);

  position: relative;
}

/* Cabeçalho da seção: caixa glass clara só atrás do texto (variante do
   .hero-v2__slogan-card). Centralizada, abraça só o conteúdo. */
.markets-demo__head{
  background: rgba(14,10,6,.36);
  border: 1px solid rgba(212,168,87,.18);
  border-radius: 14px;
  padding: 14px 28px;
  margin: 0 auto 14px;
  backdrop-filter: blur(14px) saturate(1.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.18);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  text-align: center;
  width: max-content;
  max-width: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.markets-demo__title{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(34px, 4.6vmin, 56px);
  line-height: 1.05;
  color: var(--md-creme-bright);
  margin: 0;
  letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.markets-demo__title em{
  font-style: italic;
  background: linear-gradient(120deg, #fbe8b4 0%, var(--md-gold-bright) 50%, var(--md-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--md-gold);
}


/* Stage — perspective pras animações de transição entre faces. Chamariz agora
   ficam no cube-wrap (não no stage), então o padding só precisa abrigar as
   chamariz que ficam em offset negativo da cube-wrap (~38px) + folga. */
.markets-stage{
  position: relative;
  width: 100%;
  perspective: 4000px;
  perspective-origin: 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 56px 56px;
  box-sizing: border-box;
}

/* Wrapper do cubo: tamanho fixo igual à face. Chamariz são absolute em offset
   negativo (-38px) — overflow:visible pra elas não serem clipadas. */
.markets-cube-wrap{
  position: relative;
  width: var(--md-face-w);
  height: var(--md-face-h);
  transform-style: preserve-3d;
  overflow: visible;
}

/* "Parece cubo, mas não é cubo." As 6 faces são camadas independentes
   empilhadas em z=0; apenas a ativa fica visível. A transição entre faces é
   uma animação Web API que faz cada face rodar com transform-origin POSICIONADO
   ATRÁS da própria face (no z=-face_w/2 ou -face_h/2 — onde seria o centro
   virtual do cubo). Por isso o movimento parece cubo girando: a face sai pelo
   lado e a nova vem do outro lado, ao invés de "card flip" pelo próprio centro.
   Mas como cada face é independente, o conteúdo sempre fica upright. */
.markets-prism{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.market-face{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--md-bg-deep);
  border: 1px solid var(--md-edge);
  border-radius: var(--md-radius);
  padding: 12px;
  box-sizing: border-box;
  box-shadow: 0 22px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,237,180,.06);
  display: flex;
  flex-direction: column;
  color: var(--md-creme);
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.market-face[data-active="true"]{
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* ====== Chamariz nas 4 bordas — FORA do cube-wrap, no padding do stage ====== */
.market-edge{
  position: absolute;
  z-index: 20;
  background: linear-gradient(135deg, rgba(28,20,12,.85), rgba(14,10,6,.92));
  border: 1px solid var(--md-edge-strong);
  color: var(--md-creme);
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  transition: background .2s ease, transform .2s ease, color .2s ease, border-color .2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0 14px;
  box-sizing: border-box;
}
.market-edge:hover{
  background: linear-gradient(135deg, var(--md-gold-bright), var(--md-gold));
  color: #1a1410;
  border-color: transparent;
}
/* Chamariz posicionadas em relação ao CUBE-WRAP (não ao stage), com offset
   negativo — ficam ANCORADAS na borda do cubo, a uma distância constante,
   independente do tamanho do viewport. Antes o cube ficava centralizado no
   stage e as chamariz nos cantos do stage, deixando "30 km" de gap em
   viewports largos. Agora elas sempre acompanham o cubo. */
.market-edge--top{
  top: -38px; left: 50%; transform: translateX(-50%);
  min-width: 200px; max-width: 60%; height: 28px;
  border-radius: 999px;
}
.market-edge--top:hover{ transform: translateX(-50%) translateY(-2px); }
.market-edge--bottom{
  bottom: -38px; left: 50%; transform: translateX(-50%);
  min-width: 200px; max-width: 60%; height: 28px;
  border-radius: 999px;
}
.market-edge--bottom:hover{ transform: translateX(-50%) translateY(2px); }
/* Verticais com writing-mode */
.market-edge--left{
  left: -38px; top: 50%;
  width: 28px; min-height: 200px; max-height: 60%;
  border-radius: 999px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: translateY(-50%) rotate(180deg);
  padding: 12px 0;
}
.market-edge--left:hover{ transform: translateY(-50%) rotate(180deg) translateY(-2px); }
.market-edge--right{
  right: -38px; top: 50%;
  width: 28px; min-height: 200px; max-height: 60%;
  border-radius: 999px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: translateY(-50%);
  padding: 12px 0;
}
.market-edge--right:hover{ transform: translateY(-50%) translateX(2px); }
.market-face[data-state="active"]{
  opacity: 1;
}

/* Layout 1 big + 4 mini: 1 widget grande à esquerda (ocupa 70% da largura,
   altura inteira) + 4 thumbnails empilhadas à direita (30% largura, 4 linhas).
   Click numa mini troca de lugar com o big (CSS grid-area faz o reposicionamento). */
.market-face__grid{
  display: grid;
  grid-template-columns: 7fr 3fr;
  grid-template-rows: repeat(4, 1fr);
  gap: var(--md-gap);
  min-height: 0;
  flex: 1;
}

.slot[data-slot-pos="big"]{
  grid-column: 1;
  grid-row: 1 / -1;
}
.slot[data-slot-pos="mini-1"]{ grid-column: 2; grid-row: 1; }
.slot[data-slot-pos="mini-2"]{ grid-column: 2; grid-row: 2; }
.slot[data-slot-pos="mini-3"]{ grid-column: 2; grid-row: 3; }
.slot[data-slot-pos="mini-4"]{ grid-column: 2; grid-row: 4; }

/* Mini-thumbnails: visual compacto. Esconde subtitle/pulse pra reduzir ruído,
   título único linha, body do widget escondido (Fase C trará SVGs fiéis).
   Click vira big. */
.slot[data-slot-pos^="mini-"]{
  cursor: pointer;
  padding: 8px 12px;
  gap: 2px;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.slot[data-slot-pos^="mini-"]:hover{
  border-color: var(--md-edge-strong);
  background: rgba(28,20,12,.88);
  transform: translateX(-2px);
}
.slot[data-slot-pos^="mini-"] .slot__subtitle,
.slot[data-slot-pos^="mini-"] .slot__pulse{
  display: none;
}
.slot[data-slot-pos^="mini-"] .slot__title{
  font-size: 12.5px;
  font-weight: 600;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2;
  color: var(--md-creme);
  margin: 0;
}
.slot[data-slot-pos^="mini-"] .slot__body{
  display: none;
}

/* Mini-preview: SVG fiel do widget aparece SÓ quando slot está mini. No big,
   esconde (porque a visualização principal já tá renderizada no slot__body). */
.slot__mini-preview{
  display: none;
}
.slot[data-slot-pos^="mini-"] .slot__mini-preview{
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  overflow: hidden;
}
.slot__mini-preview svg{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* Animações dos mini-SVGs — micro-loops suaves (~2.4s) pra dar sensação de
   "vivo" sem distrair. Cada elemento dentro do SVG usa uma classe .ms-* que
   define qual animação aplicar. */
.slot__mini-preview .ms-pulse,
.slot__mini-preview .ms-pulse-a,
.slot__mini-preview .ms-pulse-b,
.slot__mini-preview .ms-pulse-c{
  animation: ms-pulse 2.4s ease-in-out infinite;
  transform-origin: center;
}
.slot__mini-preview .ms-pulse-a{ animation-delay: 0s; }
.slot__mini-preview .ms-pulse-b{ animation-delay: .25s; }
.slot__mini-preview .ms-pulse-c{ animation-delay: .5s; }

.slot__mini-preview .ms-slide-x{
  animation: ms-slide-x 3.2s ease-in-out infinite;
}
.slot__mini-preview .ms-bounce{
  animation: ms-bounce 1.8s ease-in-out infinite;
  transform-origin: center;
}
.slot__mini-preview .ms-rotate{
  animation: ms-rotate 6s linear infinite;
}
.slot__mini-preview .ms-rotate-slow{
  animation: ms-rotate 14s linear infinite;
}
.slot__mini-preview .ms-flip-front{
  animation: ms-flip 4s ease-in-out infinite;
  transform-origin: center;
}
.slot__mini-preview .ms-flip-text{
  animation: ms-flip-text 4s ease-in-out infinite;
}
.slot__mini-preview .ms-cursor-blink{
  animation: ms-cursor-blink 1.1s steps(2) infinite;
}
.slot__mini-preview .ms-wave-a{
  animation: ms-wave 1.8s ease-in-out infinite;
}
.slot__mini-preview .ms-wave-b{
  animation: ms-wave 1.8s ease-in-out infinite;
  animation-delay: .3s;
}
.slot__mini-preview .ms-projectile{
  animation: ms-projectile 3.4s ease-in-out infinite;
}
.slot__mini-preview .ms-note-drop{
  animation: ms-note-drop 2.6s linear infinite;
}
.slot__mini-preview .ms-row-cycle-a,
.slot__mini-preview .ms-row-cycle-b,
.slot__mini-preview .ms-row-cycle-c{
  animation: ms-row-cycle 3s ease-in-out infinite;
  stroke-width: .8;
}
.slot__mini-preview .ms-row-cycle-a{ animation-delay: 0s; }
.slot__mini-preview .ms-row-cycle-b{ animation-delay: 1s; }
.slot__mini-preview .ms-row-cycle-c{ animation-delay: 2s; }

@keyframes ms-pulse{
  0%, 100%{ opacity: .55; }
  50%     { opacity: 1; }
}
@keyframes ms-slide-x{
  0%, 100%{ transform: translateX(-12px); }
  50%     { transform: translateX(12px); }
}
@keyframes ms-bounce{
  0%, 100%{ transform: scale(1) translateY(0); }
  50%     { transform: scale(1.06) translateY(-1px); }
}
@keyframes ms-rotate{
  to{ transform: rotate(360deg); }
}
@keyframes ms-flip{
  0%, 40%, 100%{ transform: rotateY(0); }
  60%, 90%    { transform: rotateY(180deg); }
}
@keyframes ms-flip-text{
  0%, 40%, 100%{ opacity: 1; }
  50%, 80%    { opacity: 0; }
}
@keyframes ms-cursor-blink{
  0%, 100%{ opacity: 1; }
  50%     { opacity: 0; }
}
@keyframes ms-wave{
  0%, 100%{ opacity: .25; transform: scaleX(.85); }
  50%     { opacity: 1;   transform: scaleX(1.1); }
}
@keyframes ms-projectile{
  0%   { offset-distance: 0%; transform: translate(0, 0); }
  50%  { transform: translate(0, 0); }
  100% { transform: translate(40px, 24px); }
}
@keyframes ms-note-drop{
  0%   { transform: translateY(0); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(18px); opacity: 0; }
}
@keyframes ms-row-cycle{
  0%, 100%{ opacity: .3; stroke-width: .6; }
  50%     { opacity: 1;  stroke-width: 1.2; }
}

/* Big: cursor default (não é clicável pra trocar — só os minis abrem) */
.slot[data-slot-pos="big"]{
  cursor: default;
}
.slot[data-slot-pos="big"] .slot__title{
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}
.slot[data-slot-pos="big"] .slot__subtitle{
  font-size: 12px;
  margin-bottom: 4px;
}

/* Slot genérico — overflow STRITAMENTE contido pra widget não vazar */
.slot{
  position: relative;
  background: var(--md-bg-card);
  border: 1px solid var(--md-edge);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;            /* trinca tudo dentro do slot */
  min-height: 0; min-width: 0;
  color: var(--md-creme);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.slot__title{
  font-family: "Cormorant Garamond", serif;
  font-size: 13px;
  line-height: 1.1;
  color: var(--md-creme-bright);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slot__subtitle{
  font-size: 10.5px;
  color: var(--md-muted);
  margin: 0;
}
.slot__body{ flex: 1; min-height: 0; min-width: 0; position: relative; overflow: hidden; }

.slot__pulse{
  position: absolute;
  top: 8px; right: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--md-gold);
  box-shadow: 0 0 0 0 rgba(212,168,87,.7);
  animation: slot-pulse 1.8s ease-out infinite;
  z-index: 4;
}
@keyframes slot-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(212,168,87,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(212,168,87,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,168,87,0); }
}

/* Navegação inferior — dots + label do mercado atual */
.markets-nav{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.markets-nav__current{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1;
  color: var(--md-gold-bright);
  letter-spacing: .005em;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  user-select: none;
}
.markets-nav__btn{
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--md-edge);
  background: var(--md-bg-card);
  color: var(--md-creme);
  cursor: pointer;
  font-size: 16px;
  display: grid; place-items: center;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.markets-nav__btn:hover{ background: rgba(20,14,8,.78); border-color: var(--md-edge-strong); transform: translateY(-1px); }
.markets-nav__dots{ display: flex; gap: 7px; }
.markets-nav__dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(212,168,87,.30);
  border: none; padding: 0;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.markets-nav__dot:hover{ background: rgba(212,168,87,.55); }
.markets-nav__dot.is-active{
  background: var(--md-gold-bright);
  transform: scale(1.25);
}

/* ============================================================================
 * WIDGETS — Fase 1: jurídico
 * ============================================================================ */

/* ---- kelsen-pyramid: lista hierárquica vertical, hierarquia via border-left dourada ----- */
.w-kelsen{
  display: flex; flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 2px 0;
  justify-content: space-around;
}
.w-kelsen__level{
  position: relative;
  background: rgba(14,10,6,.55);
  border: 1px solid var(--md-edge);
  border-left: 4px solid var(--md-gold);
  border-radius: 4px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--md-creme);
  text-align: left;
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hierarquia: border-left mais grossa nos níveis superiores */
.w-kelsen__level[data-pos="0"]{ border-left-width: 6px; }
.w-kelsen__level[data-pos="1"]{ border-left-width: 5px; }
.w-kelsen__level[data-pos="2"]{ border-left-width: 4px; }
.w-kelsen__level[data-pos="3"]{ border-left-width: 3px; }
.w-kelsen__level[data-pos="4"]{ border-left-width: 2px; }

.w-kelsen__level[data-active="true"]{
  background: linear-gradient(145deg, var(--md-gold-bright), var(--md-gold));
  color: #1a1410;
  border-color: transparent;
  border-left-color: #8a5e1f;
  transform: translateX(2px);
}
.w-kelsen__hint{ display: none; }

/* ---- prescription-timeline ----- */
.w-timeline{
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  justify-content: space-around;
  padding: 0 4px;
}
.w-timeline__track{
  position: relative;
  height: 5px;
  background: rgba(212,168,87,.16);
  border-radius: 999px;
}
.w-timeline__fill{
  position: absolute; top: 0; left: 0; bottom: 0;
  width: var(--w-pos, 0%);
  background: linear-gradient(90deg, var(--md-gold-bright), var(--md-gold));
  border-radius: 999px;
  transition: width .08s linear;
}
.w-timeline__mark{
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  background: var(--md-bg-deep);
  border: 2px solid var(--md-creme);
  border-radius: 50%;
}
.w-timeline__mark[data-hit="true"]{
  background: var(--md-gold);
  border-color: #8a5e1f;
}
.w-timeline__handle{
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 20px; height: 20px;
  background: linear-gradient(145deg, var(--md-gold-bright), var(--md-gold));
  border: 2px solid #8a5e1f;
  border-radius: 50%;
  left: var(--w-pos, 0%);
  box-shadow: 0 3px 10px rgba(0,0,0,.5);
  transition: left .08s linear;
}
.w-timeline__legend{
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--md-muted);
}
.w-timeline__result{
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--md-creme-bright);
  min-height: 1.4em;
}
.w-timeline__result[data-state="hit"]{ color: #fca5a5; }

/* ---- stack-flip ----- */
.w-stack{
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  perspective: 1000px;
}
.w-stack__card{
  position: absolute;
  width: 80%;
  height: 80%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.7,.05,.2,1), opacity .4s ease;
  cursor: pointer;
}
.w-stack__face{
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  backface-visibility: hidden;
  border: 1px solid var(--md-edge);
}
.w-stack__front{
  background: linear-gradient(160deg, rgba(20,14,8,.92), rgba(14,10,6,.88));
  color: var(--md-creme-bright);
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  font-weight: 700;
  position: relative;
}
.w-stack__front-label{ padding: 0 6px; }
.w-stack__hint{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Caveat, cursive;
  font-size: 14px;
  font-weight: 500;
  color: var(--md-gold-bright);
  opacity: .8;
  white-space: nowrap;
}
.w-stack__back{
  background: linear-gradient(160deg, var(--md-gold), #8a5e1f);
  color: #1a1410;
  font-size: 12px;
  line-height: 1.4;
  transform: rotateY(180deg);
  font-weight: 600;
}
.w-stack__card[data-flipped="true"]{ transform: rotateY(180deg); }
.w-stack__card[data-stack-pos="0"]{ z-index: 4; transform: translateY(0) scale(1) rotateY(var(--flip, 0deg)); }
.w-stack__card[data-stack-pos="1"]{ z-index: 3; transform: translateY(7px) scale(.96); opacity: .75; }
.w-stack__card[data-stack-pos="2"]{ z-index: 2; transform: translateY(14px) scale(.92); opacity: .5; }
.w-stack__card[data-stack-pos="3"]{ z-index: 1; transform: translateY(21px) scale(.88); opacity: .28; }
.w-stack__card[data-flipped="true"][data-stack-pos="0"]{ transform: translateY(0) scale(1) rotateY(180deg); }

/* Navegação do stack: setas ‹› + contador */
.w-stack__nav{
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(14,10,6,.85);
  border: 1px solid var(--md-edge);
  border-radius: 999px;
  padding: 2px 4px;
  z-index: 10;
}
.w-stack__nav-btn{
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--md-creme);
  font-size: 14px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s ease;
}
.w-stack__nav-btn:hover{ background: rgba(212,168,87,.22); color: var(--md-gold-bright); }
.w-stack__counter{
  font-size: 10px;
  font-weight: 700;
  color: var(--md-muted);
  min-width: 28px;
  text-align: center;
  font-family: Inter, sans-serif;
}

/* ---- notebook-passage (interativo) ----- */
.w-notebook{
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 8px;
  height: 100%;
  min-height: 0;
  position: relative;
}
.w-notebook__passage{
  background: rgba(20,14,8,.62);
  border: 1px solid var(--md-edge);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--md-creme);
  overflow: auto;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
.w-notebook__passage em{ font-style: italic; color: var(--md-creme-bright); }
.w-notebook__caderno{
  background: rgba(14,10,6,.66);
  border: 1px solid var(--md-edge);
  border-radius: 8px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
  font-family: Georgia, "Times New Roman", serif;
  min-height: 0;
  overflow: hidden;
}
.w-notebook__caderno-head{
  font-family: "Cormorant Garamond", serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--md-creme-bright);
  font-style: italic;
  border-bottom: 1px solid var(--md-edge);
  padding-bottom: 4px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.w-notebook__caderno-clear{
  background: transparent;
  border: none;
  color: var(--md-muted);
  cursor: pointer;
  font-size: 10px;
  font-family: inherit;
  font-style: normal;
}
.w-notebook__caderno-clear:hover{ color: var(--md-gold-bright); }
.w-notebook__caderno-list{
  flex: 1; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px;
  color: var(--md-creme);
}
.w-notebook__caderno-empty{
  color: var(--md-muted);
  font-style: italic;
  text-align: center;
  margin: auto 0;
  font-size: 10.5px;
}

/* Menu flutuante de marcação */
.w-notebook__menu{
  position: absolute;
  display: flex;
  gap: 3px;
  background: rgba(14,10,6,.96);
  border: 1px solid var(--md-edge-strong);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
  z-index: 10;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translate(-50%, -100%) translateY(-6px);
  white-space: nowrap;
}
.w-notebook__menu[hidden]{ display: none; }
.w-notebook__menu-btn{
  background: transparent;
  border: none;
  color: var(--md-creme);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: inherit;
  display: inline-flex; align-items: center; gap: 3px;
  transition: background .12s ease, color .12s ease;
}
.w-notebook__menu-btn:hover{ background: rgba(212,168,87,.18); color: var(--md-gold-bright); }

/* Highlights inline — 4 tipos */
.w-notebook .study-highlight{
  background: rgba(253, 230, 138, .25);
  text-decoration: underline wavy #b45309 2px;
  text-underline-offset: 3px;
  border-radius: 3px;
  padding: 0 2px;
  color: var(--md-creme-bright);
  cursor: pointer;
}
.w-notebook .study-highlight[data-study-type="nota"]{
  background: rgba(165, 243, 252, .22);
  text-decoration-color: #0891b2;
}
.w-notebook .study-highlight[data-study-type="resumo"]{
  background: rgba(245, 208, 254, .22);
  text-decoration-color: #c026d3;
}
.w-notebook .study-highlight[data-study-type="reescrita"]{
  background: rgba(217, 249, 157, .22);
  text-decoration-color: #65a30d;
}

/* Animação "voa pro caderno" */
@keyframes notebook-fly{
  0%   { transform: translate(0,0) scale(1); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: var(--fly-to) scale(.6); opacity: 0; }
}
.w-notebook__flyer{
  position: absolute;
  z-index: 9;
  pointer-events: none;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
  background: rgba(253,230,138,.4);
  border: 1px solid var(--md-edge);
  color: var(--md-creme-bright);
  animation: notebook-fly .6s cubic-bezier(.5,0,.3,1) forwards;
}

.w-notebook__entry{
  border-left: 3px solid var(--md-gold);
  padding: 4px 6px 4px 8px;
  background: rgba(20,14,8,.5);
  border-radius: 0 6px 6px 0;
}
/* Animation só em entries criadas por ação do user. Entries seed (ghosts da
   cfg.marks) nascem no estado final estático — se animassem, body[data-offscreen]
   pausa antes de completar e trava em opacity:0 (frame inicial da keyframe). */
.w-notebook__entry:not(.is-seed){
  animation: notebook-entry-in .35s ease-out both;
}
@keyframes notebook-entry-in{
  0%   { transform: translateY(-6px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.w-notebook__entry-type{
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--md-gold-bright);
  font-family: Inter, sans-serif;
  font-style: normal;
  margin-bottom: 2px;
}
.w-notebook__entry-text{
  font-size: 11px;
  font-family: Georgia, serif;
  color: var(--md-creme);
}

/* Dica visual sutil pra primeiro uso */
.w-notebook__hint{
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Caveat, cursive;
  font-size: 13px;
  color: var(--md-gold-bright);
  pointer-events: none;
  white-space: nowrap;
  background: rgba(14,10,6,.85);
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--md-edge);
  opacity: .85;
}

/* ---- sort-3col ----- */
.w-sort{
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  height: 100%;
}
.w-sort__pool{
  display: flex; flex-wrap: wrap; gap: 5px;
  min-height: 28px;
  align-content: flex-start;
}
.w-sort__cols{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.w-sort__col{
  background: rgba(14,10,6,.55);
  border: 1px dashed var(--md-edge);
  border-radius: 7px;
  padding: 5px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 70px;
}
.w-sort__col-head{
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--md-gold-bright);
  text-align: center;
}
.w-sort__chip{
  background: rgba(20,14,8,.78);
  border: 1px solid var(--md-edge);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--md-creme);
  cursor: grab;
  transition: transform .5s cubic-bezier(.7,.05,.2,1), opacity .3s ease, background .3s ease;
  white-space: nowrap;
}
.w-sort__chip[data-state="flying"]{ z-index: 5; }
.w-sort__chip[data-state="placed"]{
  background: linear-gradient(145deg, var(--md-gold-bright), var(--md-gold));
  border-color: transparent;
  color: #1a1410;
  cursor: default;
}
.w-sort__chip[data-state="wrong"]{
  background: linear-gradient(145deg, #fca5a5, #dc2626);
  border-color: transparent;
  color: #1a1410;
  cursor: default;
}
.w-sort__chip:active{ cursor: grabbing; }

/* ---- compare-matrix ----- */
.w-compare{
  height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.w-compare__table{
  width: 100%; border-collapse: collapse;
  font-size: 10px;
  flex: 1;
  color: var(--md-creme);
  table-layout: fixed;
}
.w-compare__table th,
.w-compare__table td{
  padding: 3px 4px;
  border-bottom: 1px solid var(--md-edge);
  text-align: left;
  word-break: break-word;
  line-height: 1.25;
}
.w-compare__table thead th{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 8.5px;
  color: var(--md-gold-bright);
  background: rgba(14,10,6,.55);
}
.w-compare__table tbody tr{ transition: background .35s ease; }
.w-compare__table tbody tr[data-active="true"]{
  background: linear-gradient(90deg, rgba(232,201,122,.22) 0%, transparent 100%);
}
.w-compare__row-label{
  font-weight: 800;
  font-family: "Cormorant Garamond", serif;
  font-size: 13px;
  color: var(--md-creme-bright);
  width: 22%;
}

/* ============================================================================
 * Responsivo — face grande no desktop, encolhe via media quando viewport aperta
 * ============================================================================ */
@media (max-width: 1380px){
  .markets-demo{
    --md-face-w: 1080px;
    --md-face-h: 620px;
    --md-prism-rx: 540px;
    --md-prism-ry: 310px;
    --md-z-back: -540px;
  }
}

@media (max-width: 1220px){
  .markets-demo{
    --md-face-w: 960px;
    --md-face-h: 620px;
    --md-prism-rx: 480px;
    --md-prism-ry: 310px;
    --md-z-back: -480px;
  }
}

@media (max-width: 1100px){
  .markets-demo{
    --md-face-w: 840px;
    --md-face-h: 640px;
    --md-prism-rx: 420px;
    --md-prism-ry: 320px;
    --md-z-back: -420px;
  }
}

@media (max-width: 980px){
  .markets-demo{
    --md-face-w: 700px;
    --md-face-h: 560px;
    --md-prism-rx: 350px;
    --md-prism-ry: 280px;
    --md-z-back: -350px;
  }
  .market-face__grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

@media (max-width: 620px){
  .markets-demo{
    --md-face-w: 92vw;
    --md-face-h: 760px;
    --md-prism-rx: 46vw;
    --md-prism-ry: 380px;
    --md-z-back: -46vw;
  }
  .markets-demo__head{ max-width: calc(100% - 24px); padding: 10px 18px; }
  .market-face{ padding: 12px; }
  .market-face__grid{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, minmax(110px, 1fr));
  }
  .w-notebook{
    grid-template-columns: 1fr;
    grid-template-rows: 1.4fr 1fr;
  }
}

/* ============================================================================
 * SLOT: v3_iblock — wrapper pros .ib-block REAIS do AmandaEmo V3 dentro do card.
 *
 * O CSS canônico dos blocos vive em web/amandaemo_v3/assets/v3_iblocks*.css
 * (carregado lazy pelo markets-demo.js). Aqui só restringimos a escala/clipping
 * pro bloco caber numa célula 3×2 da face do cubo sem vazar nem virar bagunça.
 * ============================================================================ */
/* Tema "telos" oficial dos widgets V3 — vive em web/amandaemo_v3/assets/v3_iblocks.css
   sob `[data-theme="telos"]` (junto com `[data-theme="dark"]`). Aqui na vitrine
   só ativamos: o body já tem `data-theme="telos"` aplicado no index.html, e
   todos os componentes V3 (.ib-block, .ib-card, .ib-btn, .ib-chip, inputs, etc)
   usam `var(--ib-*)` no default — então mudar as vars dispara o tema sem
   precisar override por componente. Outras pessoas embeddando V3 conseguem o
   mesmo skin com `<body data-theme="telos">`.
   Específico da vitrine: SVGs do V3 hardcodam #334155/#64748b (slate); repinta. */
.slot--v3_iblock svg text{ fill: var(--ib-text); }
.slot--v3_iblock svg line[stroke="#334155"]{ stroke: var(--ib-text); }
.slot--v3_iblock svg line[stroke="#64748b"]{ stroke: var(--ib-muted); }
.slot--v3_iblock .ib-draggable[data-state="placed"],
.slot--v3_iblock .ib-token[data-state="placed"]{
  background: var(--ib-accent);
  color: #1a1410;
  border-color: var(--ib-accent);
}

/* "Modo vitrine" pros slots V3 — esconde tudo que vem de fora do widget
   (título/chip duplicados que o slot já tem, controles de resposta, feedback,
   enunciados longos) e deixa SÓ a visualização principal centralizada,
   ocupando toda a área do slot. Pra landing isso é exatamente o que importa:
   o gráfico/trilho/widget VIVO sem o overhead de UI de exercício. */
.slot--v3_iblock .slot__body{
  /* Scroll não é mais necessário aqui: attachSlotFit (markets-demo.js) aplica
     transform:scale<1 em runtime quando o widget é maior que o slot, garantindo
     que nada vaze visualmente. overflow:hidden corta qualquer pixel residual. */
  overflow: hidden;
  padding: 2px;
}

/* Instrução curta acima do widget (injetada por mountV3IBlock pra widgets
   sem pergunta natural). Discreta, italic, dourado claro. */
.slot__hint{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--md-gold-bright);
  margin: 0 0 6px;
  text-align: center;
  letter-spacing: .01em;
  flex-shrink: 0;
}
.slot--v3_iblock .ib-block{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--md-creme);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.slot--v3_iblock .ib-block.ib-error{ color: #ff8a8a; font-size: 11px; }

/* Esconde APENAS metadados redundantes (título do widget já está no .slot__title
   acima; meta-chips de dificuldade/categoria são internos do gerador). Tudo que
   é ENUNCIADO, PERGUNTA, INSTRUÇÃO, CONTROLE PRINCIPAL fica visível — sem isso
   o usuário não entende o que cada widget faz na vitrine. Feedback de resposta
   também esconde (não é vitrine, é exercício). Modais escondem (são overlays). */
.slot--v3_iblock .ib-head,
.slot--v3_iblock .ib-chip,
.slot--v3_iblock .ib-meta,
.slot--v3_iblock .ib-difficulty,
.slot--v3_iblock .ib-tag,
.slot--v3_iblock .ib-mode-chip,
.slot--v3_iblock .ib-concept-modal,
.slot--v3_iblock .ib-feedback,
.slot--v3_iblock .ib-pedagogical-goal,
.slot--v3_iblock .ib-block > h2,
.slot--v3_iblock .ib-block > h3,
.slot--v3_iblock .ib-body > h2,
.slot--v3_iblock .ib-body > h3{
  display: none !important;
}

/* .ib-body centraliza a visualização principal e ocupa todo o espaço */
.slot--v3_iblock .ib-body{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 0 !important;
  margin: 0 !important;
}
.slot--v3_iblock .ib-body > *{
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
}
/* SVGs do widget se ajustam ao slot mantendo proporção (todos os widgets V3
   usam preserveAspectRatio="xMidYMid meet" no SVG, padrão CSS). */
.slot--v3_iblock svg{
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
/* Wrappers dos widgets V3 (ex: .ib-concept, .ib-number-line, .ib-venn) que
   contêm SVG: ocupar 100% mas sem força width/height pra não distorcer. */
.slot--v3_iblock .ib-concept,
.slot--v3_iblock .ib-number-line,
.slot--v3_iblock .ib-venn,
.slot--v3_iblock .ib-projectile,
.slot--v3_iblock .ib-graph-explorer,
.slot--v3_iblock .ib-concept-map,
.slot--v3_iblock .ib-periodic-table,
.slot--v3_iblock .ib-molecule-3d,
.slot--v3_iblock .ib-equation-balancer{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

/* ============================================================================
 * SLOT: game_live — iframe lazy do jogo, criado só quando a face fica ativa
 * ============================================================================ */
.slot--game_live .slot__body{
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}
.w-game-live{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.w-game-live__shell{
  flex: 1;
  position: relative;
  min-height: 0;
  background: #0a0a12;
  overflow: hidden;
}
.w-game-live__iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}
.w-game-live__placeholder{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 8px;
  grid-auto-flow: row;
  color: var(--md-muted);
  font-size: 11px;
  pointer-events: none;
}
.w-game-live__spinner{
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(212,168,87,.25);
  border-top-color: var(--md-gold);
  animation: w-game-spin .9s linear infinite;
}
@keyframes w-game-spin{ to { transform: rotate(360deg); } }
.w-game-live__fullscreen{
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(212,168,87,.4);
  color: var(--md-gold-bright);
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  backdrop-filter: blur(4px);
}
.w-game-live__fullscreen:hover{
  background: rgba(0,0,0,.75);
  color: #fff;
}

/* ============================================================================
 * Mascote no notebook — pequeno overlay no canto, sem competir com o caderno
 * ============================================================================ */
.w-notebook__mascote{
  position: absolute;
  top: 4px; right: 4px;
  width: 48px;
  height: 48px;
  object-fit: contain;
  z-index: 3;
  opacity: .9;
  pointer-events: none;
}
.w-notebook{ position: relative; }

/* ============================================================================
 * Demo animada do caderno vivo — cursor fake, overlay de seleção, balão da
 * mascote. Coreografia toda em JS (markets-demo.js → runDemoSequence). Os
 * elementos abaixo são puramente visuais; pointer-events:none pra não atrapalhar
 * a interação real do widget quando a animação termina ou é interrompida.
 * ============================================================================ */
.w-notebook__fake-cursor{
  position: absolute;
  top: 0; left: 0;
  width: 22px;
  height: 28px;
  z-index: 12;
  pointer-events: none;
  transform: translate(-9999px, -9999px);
  transition: opacity .25s ease;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
.w-notebook__fake-cursor[data-visible="1"]{ opacity: 1; }
.w-notebook__fake-cursor[data-clicking="1"]{
  transform-origin: 4px 4px;
}
.w-notebook__fake-cursor svg{ width: 100%; height: 100%; display: block; }

/* Pulso curto no cursor ao "clicar" — onda concêntrica saindo do ponto. */
.w-notebook__fake-cursor::after{
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 2px solid var(--md-gold-bright);
  opacity: 0;
  pointer-events: none;
}
.w-notebook__fake-cursor[data-clicking="1"]::after{
  animation: fake-cursor-click .35s ease-out;
}
@keyframes fake-cursor-click{
  0%   { transform: scale(.4); opacity: .9; }
  100% { transform: scale(3.6); opacity: 0; }
}

/* Overlay de "seleção" — pintado linha a linha sobre cada client-rect do range.
   Reproduz visual da seleção nativa do browser, mas sem disparar selectionchange
   (o que dispararia o menu real fora de hora). */
.w-notebook__demo-selection{
  position: absolute;
  z-index: 4;
  pointer-events: none;
  background: rgba(124, 175, 255, .32);
  border-radius: 2px;
  opacity: 0;
  transition: opacity .18s ease, width .25s cubic-bezier(.5,0,.3,1);
}
.w-notebook__demo-selection[data-on="1"]{ opacity: 1; }

/* Balão da gata-juíza pra quando o visitante interrompe a demo. Estilo HQ:
   fundo claro, borda preta grossa, setinha apontando PRA BAIXO em direção à
   mascote (que fica no canto superior direito do widget). O balão fica ACIMA
   do widget (top negativo) — gato fala de baixo, balão flutua em cima. */
.w-notebook__demo-balloon{
  position: absolute;
  bottom: calc(100% + 156px);
  right: 4px;
  max-width: 270px;
  z-index: 14;
  background: #fdf6e3;
  border: 2.5px solid #1a1208;
  border-radius: 22px;
  padding: 14px 18px 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
  color: #1a1208;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.w-notebook__demo-balloon[data-visible="1"]{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Cauda do balão: triângulo apontando pra baixo onde a mascote fica.
   Usamos dois pseudos pra obter contorno (preto fora + creme dentro). */
.w-notebook__demo-balloon::before,
.w-notebook__demo-balloon::after{
  content: "";
  position: absolute;
  right: 36px;
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
}
.w-notebook__demo-balloon::before{
  bottom: -18px;
  border-top: 18px solid #1a1208;
}
.w-notebook__demo-balloon::after{
  bottom: -13px;
  border-top: 16px solid #fdf6e3;
}
.w-notebook__demo-balloon__text{
  margin: 0 0 10px;
  font-weight: 500;
}
.w-notebook__demo-balloon__btn{
  background: #1a1208;
  color: #fdf6e3;
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.w-notebook__demo-balloon__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* CTA permanente pra retomar a demo. Vive no canto inferior direito da stage,
   aparece quando a demo é interrompida OU termina naturalmente, e persiste
   até a pessoa clicar (re-roda do zero). Estilo dark casando com a interface
   do widget — não compete com o balão da gata.

   Sem fade-in (display:none → flex direto): em browsers que pausam transitions
   em background tab o CTA ficaria preso em opacity:0, invisível. Aparece
   instantâneo, some natural junto com o clear/restart. */
.w-notebook__demo-replay-cta{
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 13;
  background: rgba(20,14,8,.94);
  border: 1px solid var(--md-edge-strong);
  border-radius: 999px;
  color: var(--md-creme-bright);
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 14px rgba(0,0,0,.5);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.w-notebook__demo-replay-cta[data-visible="1"]{
  display: inline-flex;
}
.w-notebook__demo-replay-cta:hover{
  background: rgba(212,168,87,.18);
  color: var(--md-gold-bright);
  transform: translateY(-1px);
}

/* Durante a demo, o passage não deixa selecionar texto de verdade — evita que
   o cursor real do user dispare selectionchange e abra o menu real por cima
   da nossa coreografia. JS remove o atributo quando a demo termina/é abortada. */
.w-notebook[data-demo-running="1"] .w-notebook__passage{
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

/* Textarea fake — caixinha que sai do trecho recém-marcado pra simular o
   campo de input do produto real (aluno.js: "Síntese do átomo, com suas
   palavras." etc). Cursor entra dentro e digita letra a letra. */
.w-notebook__fake-textarea{
  position: absolute;
  z-index: 11;
  background: rgba(20,14,8,.96);
  border: 1px solid var(--md-edge-strong);
  border-radius: 10px;
  padding: 8px 10px 38px;
  box-shadow: 0 14px 32px rgba(0,0,0,.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-width: 260px;
  max-width: 380px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.w-notebook__fake-textarea[data-visible="1"]{
  opacity: 1;
  transform: translateY(0);
}
.w-notebook__fake-textarea__label{
  display: block;
  font-family: Inter, sans-serif;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--md-gold-bright);
  margin-bottom: 4px;
}
.w-notebook__fake-textarea__body{
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--md-creme);
  min-height: 36px;
  white-space: pre-wrap;
  word-break: break-word;
}
.w-notebook__fake-textarea__caret{
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--md-gold-bright);
  vertical-align: -2px;
  margin-left: 1px;
  animation: caret-blink .85s steps(2, start) infinite;
}
@keyframes caret-blink{
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.w-notebook__fake-textarea__save{
  position: absolute;
  bottom: 6px;
  right: 8px;
  background: linear-gradient(120deg, var(--md-gold-bright) 0%, var(--md-gold) 100%);
  color: #1a1208;
  border: none;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  cursor: pointer;
}

/* Botão +afeto no header do caderno — sempre visível enquanto a demo roda,
   pra coreografia clicar nele sem precisar de seleção de trecho. */
.w-notebook__caderno-add-afeto{
  background: transparent;
  border: 1px dashed var(--md-edge-strong);
  color: var(--md-muted);
  cursor: pointer;
  font-size: 10px;
  font-family: inherit;
  font-style: normal;
  border-radius: 999px;
  padding: 1px 8px;
  margin-right: 6px;
}
.w-notebook__caderno-add-afeto:hover{
  color: var(--md-gold-bright);
  border-color: var(--md-gold);
}

/* Quiz overlay — substitui visualmente o passage quando entra o step de
   questão. enunciado + 4 alternativas + feedback (✓/✗) com a estética do
   feedback real do aluno.js (renderQuizHtml). */
/* Quiz agora vive abaixo do widget (não é mais overlay sobre o passage) — a
   pessoa vê texto + caderno + pergunta ao mesmo tempo, e a pergunta FICA
   visível após o feedback pra ela ler com calma e entender o erro. */
.w-notebook__quiz{
  flex: 0 0 auto;
  background: rgba(20,14,8,.78);
  border: 1px solid var(--md-edge);
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.5,0,.3,1), opacity .25s ease, padding .35s ease;
}
.w-notebook__quiz[hidden]{ display: none; }
.w-notebook__quiz[data-visible="1"]{
  max-height: 360px;
  opacity: 1;
}
.w-notebook__quiz__num{
  font-family: Inter, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--md-gold-bright);
}
.w-notebook__quiz__stem{
  font-family: Georgia, serif;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--md-creme-bright);
}
.w-notebook__quiz__opts{
  display: flex; flex-direction: column; gap: 5px;
}
.w-notebook__quiz__opt{
  display: flex; align-items: flex-start; gap: 6px;
  background: rgba(14,10,6,.66);
  border: 1px solid var(--md-edge);
  border-radius: 6px;
  padding: 6px 9px;
  font-family: Georgia, serif;
  font-size: 12px;
  color: var(--md-creme);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.w-notebook__quiz__opt-letter{
  font-weight: 800;
  color: var(--md-gold-bright);
  min-width: 14px;
}
.w-notebook__quiz__opt[data-state="picked-wrong"]{
  background: rgba(220,90,90,.18);
  border-color: rgba(220,90,90,.7);
  color: #ffd0d0;
}
.w-notebook__quiz__opt[data-state="picked-correct"],
.w-notebook__quiz__opt[data-state="correct"]{
  background: rgba(120,200,120,.16);
  border-color: rgba(120,200,120,.6);
  color: #d3f5d3;
}
.w-notebook__quiz__feedback{
  font-family: Georgia, serif;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(14,10,6,.5);
  border-left: 3px solid var(--md-gold);
  color: var(--md-creme);
  opacity: 0;
  transition: opacity .25s ease;
}
.w-notebook__quiz__feedback[data-visible="1"]{ opacity: 1; }
.w-notebook__quiz__feedback[data-state="wrong"]{ border-left-color: #dc5a5a; }
.w-notebook__quiz__feedback[data-state="correct"]{ border-left-color: #78c878; }
.w-notebook__quiz__save{
  align-self: flex-end;
  background: linear-gradient(120deg, var(--md-gold-bright) 0%, var(--md-gold) 100%);
  color: #1a1208;
  border: none;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 11px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease;
}
.w-notebook__quiz__save[data-visible="1"]{ opacity: 1; }

/* Tipos de entry novos: afeto + questão. Cor da barra lateral varia
   conforme o tipo, casando com a paleta dos highlights do passage. */
.w-notebook__entry[data-entry-tipo="afeto"]{
  border-left-color: #d97757;
}
.w-notebook__entry[data-entry-tipo="questao"]{
  border-left-color: #78c878;
}
.w-notebook__entry[data-entry-tipo="questao"][data-correct="false"]{
  border-left-color: #dc5a5a;
}
.w-notebook__entry-veredito{
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  font-family: Inter, sans-serif;
  margin-right: 5px;
  vertical-align: 1px;
}
.w-notebook__entry-veredito[data-state="correct"]{ color: #78c878; }
.w-notebook__entry-veredito[data-state="wrong"]{ color: #dc5a5a; }

/* ============================================================================
 * Caderno vivo — section dedicada (fora do cubo), demonstração full do
 * widget de marcação/anotação. Ocupa 100dvh, com headline + widget centralizado.
 * ============================================================================ */
/* Cabeçalho do caderno-vivo: caixa glass clara só atrás do título — mesma
   estética de `.markets-demo__head`. Centralizada, abraça só o conteúdo. */
.caderno-vivo__head{
  background: rgba(14,10,6,.36);
  border: 1px solid rgba(212,168,87,.18);
  border-radius: 14px;
  padding: 14px 28px;
  margin: 0 auto clamp(20px, 3.5vh, 40px);
  backdrop-filter: blur(14px) saturate(1.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.18);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  text-align: center;
  width: max-content;
  max-width: calc(100% - 24px);
}
/* Em surface clara o glass dark vira escuro demais sobre pintura clara —
   inverte o glass pra preservar o mesmo efeito de "vidro discreto". */
body[data-surface="light"] .caderno-vivo__head{
  background: rgba(248,242,228,.46);
  border-color: rgba(20,14,5,.14);
  box-shadow: 0 14px 40px rgba(20,14,5,.18);
}
.caderno-vivo__title{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(34px, 4.6vmin, 56px);
  line-height: 1.05;
  color: var(--md-creme-bright);
  margin: 0;
  letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.caderno-vivo__title em{
  font-style: italic;
  background: linear-gradient(120deg, var(--md-gold-bright) 0%, var(--md-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--md-gold);
}
.caderno-vivo__stage{
  background: var(--md-bg-deep);
  border: 1px solid var(--md-edge);
  border-radius: var(--md-radius);
  padding: 24px;
  max-width: 1080px;
  margin: 0 auto;
  min-height: clamp(420px, 55vh, 560px);
  box-shadow: 0 28px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,237,180,.08);
  position: relative;
  color: var(--md-creme);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.caderno-vivo__stage .w-notebook{
  flex: 1 1 auto;
  min-height: 280px;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
}
.caderno-vivo__stage .w-notebook__passage{
  font-size: 15px;
  line-height: 1.65;
  padding: 18px 22px;
}
.caderno-vivo__stage .w-notebook__caderno{
  padding: 14px;
}
.caderno-vivo__stage .w-notebook__caderno-head{
  font-size: 18px;
}
.caderno-vivo__stage .w-notebook__caderno-list{
  font-size: 13px;
}
.caderno-vivo__stage .w-notebook__caderno-empty{
  font-size: 13px;
}
.caderno-vivo__stage .w-notebook__hint{
  font-size: 16px;
  bottom: 14px;
}
.caderno-vivo__stage .w-notebook__mascote{
  width: 140px;
  height: 140px;
  top: -150px;
  right: -36px;
  opacity: 1;
}