/* NeuroSim: estilo A, cortiça e papel. O mural é a tela principal: cortiça quente, cartões de papel com
   alfinete, fios vermelhos. A lateral é papel. No escuro, a mesma cortiça à luz do abajur. */
:root {
  --cortica: #B98A5A;
  --cortica-grao-1: rgba(120, 78, 40, .28);
  --cortica-grao-2: rgba(240, 200, 150, .22);
  --luz: transparent;
  --papel: #FFFDF7;
  --papel-lateral: #FBF5EA;
  --papel-borda: #E6D8BF;
  --cartao-tinta: #2E241B;
  --cartao-suave: #6E5C49;
  --tinta: #2E241B;
  --tinta-suave: #6E5C49;
  --fundo: #F3EADB;
  --fio: #C0392B;
  --fio-fraco: #7A5A3A;
  --alfinete: #C0392B;
  --teoria: #FFF4C9;
  --teoria-acesa: #FFE27A;
  --teoria-borda: #C8961E;
  --fala: #1F5FA8;
  --observacao: #9A4409;
  --outra: #5B3E96;
  --confianca: #2F8A5B;
  --tempo: #8A6A3E;
  --sobre-cortica: #2E241B;
  --sobre-cortica-suave: #3E2F22;
  --botao: #2E241B;
  --botao-texto: #FFFDF7;
  --foco: #1F5FA8;
  --sombra: 0 1px 1px rgba(46, 36, 27, .18), 0 3px 6px rgba(46, 36, 27, .16);
  --cena-parede: #F1E3C8;
  --cena-chao: #D9B98F;
  --cena-traco: #5A4632;
  --f-titulo: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-texto: "Nunito", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --raio: 3px;
  --t: 200ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cortica: #4A3424;
    --cortica-grao-1: rgba(20, 10, 4, .35);
    --cortica-grao-2: rgba(160, 110, 70, .16);
    --luz: radial-gradient(ellipse 70% 60% at 12% 0%, rgba(255, 196, 110, .22), transparent 70%);
    --papel: #EDE3CF;
    --papel-lateral: #1E1712;
    --papel-borda: #3A2D22;
    --tinta: #F3E9DA;
    --tinta-suave: #BFAF98;
    --fundo: #15100C;
    --fio: #E5533F;
    --fio-fraco: #A9825A;
    --teoria: #F3E4A8;
    --teoria-acesa: #FFD95A;
    --teoria-borda: #FFB627;
    --confianca: #4FB27F;
    --tempo: #C9A26B;
    --sobre-cortica: #F3E9DA;
    --sobre-cortica-suave: #E3D5BF;
    --botao: #F3E9DA;
    --botao-texto: #1E1712;
    --foco: #7FB2F0;
    --sombra: 0 1px 1px rgba(0, 0, 0, .4), 0 4px 10px rgba(0, 0, 0, .35);
    --cena-parede: #CDBB9C;
    --cena-chao: #A88A65;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --cortica: #4A3424;
  --cortica-grao-1: rgba(20, 10, 4, .35);
  --cortica-grao-2: rgba(160, 110, 70, .16);
  --luz: radial-gradient(ellipse 70% 60% at 12% 0%, rgba(255, 196, 110, .22), transparent 70%);
  --papel: #EDE3CF;
  --papel-lateral: #1E1712;
  --papel-borda: #3A2D22;
  --tinta: #F3E9DA;
  --tinta-suave: #BFAF98;
  --fundo: #15100C;
  --fio: #E5533F;
  --fio-fraco: #A9825A;
  --teoria: #F3E4A8;
  --teoria-acesa: #FFD95A;
  --teoria-borda: #FFB627;
  --confianca: #4FB27F;
  --tempo: #C9A26B;
  --sobre-cortica: #F3E9DA;
  --sobre-cortica-suave: #E3D5BF;
  --botao: #F3E9DA;
  --botao-texto: #1E1712;
  --foco: #7FB2F0;
  --sombra: 0 1px 1px rgba(0, 0, 0, .4), 0 4px 10px rgba(0, 0, 0, .35);
  --cena-parede: #CDBB9C;
  --cena-chao: #A88A65;
  color-scheme: dark;
}

/* fontes */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("fontes/fraunces-600.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fontes/nunito.woff2") format("woff2"); }
/* /fontes */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--f-titulo); line-height: 1.15; text-wrap: balance; margin: 0; font-weight: 600; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.sem-js { padding: 24px; }
.pagina-erro { min-height: 100%; }
.pagina-erro h1 { font-size: 30px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cortica {
  background-color: var(--cortica);
  background-image:
    var(--luz),
    radial-gradient(circle at 30% 40%, var(--cortica-grao-1) 0 1px, transparent 1.6px),
    radial-gradient(circle at 70% 60%, var(--cortica-grao-2) 0 1.2px, transparent 1.8px);
  background-size: 100% 100%, 7px 7px, 11px 11px;
}

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 6px; border: 0; cursor: pointer;
  background: var(--botao); color: var(--botao-texto); font-weight: 700;
  transition: transform var(--t) ease-out, opacity var(--t) ease-out;
}
.botao:hover { transform: translateY(-1px); }
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.botao.claro { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.botao.papel { background: var(--papel); color: var(--cartao-tinta); box-shadow: var(--sombra); }
.link { background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: inherit; }

/* Faixa da prévia e rodapé */
.faixa {
  background: var(--botao); color: var(--botao-texto); font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-align: center; padding-block: 6px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.aviso-fixo { font-size: 12.5px; color: var(--tinta-suave); }

/* Papel, alfinete e tipo de pista */
.papel-cartao {
  position: relative; background: var(--papel); color: var(--cartao-tinta);
  border-radius: var(--raio); box-shadow: var(--sombra);
}
.alfinete {
  position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8 0 2px, transparent 3px), var(--alfinete);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
}
.tipo { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.tipo svg { width: 15px; height: 15px; flex: none; }
.tipo.fala { color: var(--fala); }
.tipo.observacao { color: var(--observacao); }
.tipo.outra_versao { color: var(--outra); }

/* ============ Início ============ */
.inicio { min-height: 100%; display: flex; flex-direction: column; }
.inicio-conteudo {
  width: 100%; max-width: 1080px; margin: 0 auto; display: grid; gap: 36px;
  padding-block: 40px 28px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.inicio-topo { display: grid; gap: 10px; max-width: 640px; }
.marca { font-size: clamp(48px, 9vw, 88px); letter-spacing: -.02em; color: #FFFDF7; text-shadow: 0 2px 0 rgba(46, 36, 27, .35); }
.sobretitulo { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; color: var(--sobre-cortica); }
.inicio-lead { font-size: 18px; color: var(--sobre-cortica); max-width: 52ch; }
.casos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.caso-cartao { padding: 22px 20px 18px; display: grid; gap: 10px; align-content: start; }
.caso-cartao .numero { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cartao-suave); }
.caso-cartao h2 { font-size: 26px; }
.caso-cartao .chamada { color: var(--cartao-suave); }
.caso-cartao .rodape-cartao { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 6px; }
.selo { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: #FFF4C9; color: #6B4E12; }
.selo.feito { background: #DDEFE3; color: #1F5E3D; }
.secao-titulo { font-size: 22px; color: var(--sobre-cortica); margin-bottom: 14px; }
.album-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 200px)); gap: 22px; }
.carta {
  aspect-ratio: 3 / 4; max-width: 100%; padding: 18px 16px; display: flex; flex-direction: column; gap: 8px;
  border-radius: 8px; background: var(--papel); color: var(--cartao-tinta); box-shadow: var(--sombra);
  border: 6px solid #E9D9B8;
}
.carta h3 { font-size: 20px; }
.carta .rank { margin-top: auto; font-size: 13px; font-weight: 800; color: #8A5A10; }
.carta.vazia { background: rgba(255, 253, 247, .18); border: 2px dashed rgba(255, 253, 247, .55); box-shadow: none; color: var(--sobre-cortica); align-items: center; justify-content: center; text-align: center; }
.carta.vazia .interroga { font-family: var(--f-titulo); font-size: 48px; opacity: .8; }
.preferencias { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; padding: 16px 18px; }
.preferencias fieldset { border: 0; margin: 0; padding: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.preferencias legend { float: left; margin-right: 8px; font-weight: 700; }
.seg { display: inline-flex; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--papel-borda); overflow: hidden; }
.seg button { border: 0; background: none; padding: 8px 12px; min-height: 40px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--cartao-tinta); color: var(--papel); }
.marcar { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.marcar input { width: 20px; height: 20px; accent-color: var(--confianca); }
.sabe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; border-radius: 6px; background: rgba(255, 253, 247, .78); color: var(--cartao-tinta); }
.sabe-rotulo { font-size: 12.5px; font-weight: 800; margin-right: 2px; }
.sabe-assunto { font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: #FFF4C9; color: #4F3A10; }
.assunto-titulo { font-family: var(--f-texto); font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--sobre-cortica); margin: 6px 0 -2px; }
.nova { justify-self: start; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: var(--fio); color: #FFFFFF; }
.mostrar { display: grid; gap: 8px; margin-top: 6px; }
.mostrar .botao.claro { color: var(--sobre-cortica); }
.mostrar-lista { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: 6px; background: var(--papel); color: var(--cartao-tinta); box-shadow: var(--sombra); }
.mostrar-lista p { flex: 1 1 100%; font-size: 14px; }
.mostrar-pista { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 6px 10px; border-radius: 4px; border: 1px solid var(--papel-borda); background: #FFFFFF; color: var(--cartao-tinta); cursor: pointer; font-size: 13.5px; font-weight: 700; }
.mostrar-pista:hover { border-color: var(--cartao-tinta); }
.entendimentos { display: grid; gap: 12px; margin-bottom: 26px; }
.entendimentos-titulo { font-size: 20px; color: var(--sobre-cortica); }
.entendimentos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.cartao-entendimento { padding: 18px 16px 14px; display: grid; gap: 6px; align-content: start; background: #E8F1E4; border-left: 5px solid var(--confianca); }
.cartao-entendimento h4 { font-family: var(--f-titulo); font-size: 18px; }
.cartao-entendimento .liga { font-size: 12px; font-weight: 800; color: var(--cartao-suave); }
.cartao-entendimento .abriu { font-size: 13px; font-weight: 700; color: #1F6B45; }
.aviso.assunto { border-color: #C8961E; background: #FFF4C9; }
.aviso.entendimento { border-color: var(--confianca); background: #E8F1E4; }
.aviso.nada { border-color: var(--fio-fraco); }
.teste-painel { padding: 18px; display: grid; gap: 10px; }
.teste-painel h2 { font-size: 22px; }
.teste-texto { width: 100%; font: 13px/1.45 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; padding: 10px; border-radius: 4px; border: 1px solid var(--papel-borda); background: #FFFFFF; color: #2E241B; resize: vertical; }
.objetivo { font-size: 14px; line-height: 1.45; padding: 10px 12px; border-radius: 6px; background: rgba(185, 138, 90, .14); }
.revelacao { border-top: 1px solid var(--papel-borda); padding-top: 14px; }
.revelacao summary { cursor: pointer; font-family: var(--f-titulo); font-size: 22px; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.revelacao-texto { display: grid; gap: 12px; margin-top: 10px; }
.revelacao-texto h3 { font-size: 19px; margin-top: 6px; }
.revelacao-texto h4 { font-size: 15px; font-family: var(--f-texto); font-weight: 800; }
.linha-tempo { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; }
.aviso-fixo.cartao { color: var(--cartao-suave); }
.ajuda { max-width: 680px; }
.ajuda-bloco { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--papel-borda); }
.ajuda-bloco h2 { font-size: 20px; }
.numero-ajuda { font-family: var(--f-titulo); font-size: 26px; font-weight: 600; color: #9E2B22; text-decoration: none; padding: 0; }
.numero-ajuda:hover { text-decoration: underline; }
.sobre { padding: 16px 18px; }
.sobre summary { cursor: pointer; font-weight: 800; min-height: 32px; }
.sobre-texto { display: grid; gap: 10px; margin-top: 12px; max-width: 70ch; font-size: 15px; }
.apagar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.apagar-msg { flex: 1 1 100%; font-size: 13.5px; color: var(--cartao-suave); }
.inicio .aviso-fixo, .inicio .idade { color: var(--sobre-cortica); }

/* ============ Bilhete ============ */
.tela-bilhete { min-height: 100%; display: grid; place-items: center; padding-block: 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.bilhete { max-width: 560px; width: 100%; padding: 34px 30px 26px; transform: rotate(-1deg); display: grid; gap: 16px;
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(31, 95, 168, .14) 31px 32px); background-color: var(--papel); }
.bilhete .de { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cartao-suave); }
.bilhete .texto { font-size: 17px; line-height: 2; }
.aviso-conteudo { font-size: 14px; font-weight: 700; padding: 10px 12px; border-left: 4px solid var(--outra); background: rgba(91, 62, 150, .08); border-radius: 0 4px 4px 0; }
.bilhete .anexo { font-size: 15px; padding: 10px 12px; background: #FFF4C9; color: #3E2E0C; border-radius: 4px; transform: rotate(.6deg); }
.bilhete .acoes { display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: center; }

/* ============ Jogo ============ */
.jogo { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 100%; }
.lateral {
  background: var(--papel-lateral); color: var(--tinta); border-right: 1px solid var(--papel-borda);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: 20px 18px; padding-left: max(18px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: 18px;
}
.lateral .caso-nome .numero { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.lateral .caso-nome h1 { font-size: 26px; }
.lateral details { font-size: 14px; }
.lateral summary { cursor: pointer; font-weight: 700; }
.lateral details p { margin-top: 8px; color: var(--tinta-suave); }
.abas { display: grid; gap: 4px; }
.aba {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left;
  min-height: 44px; padding: 8px 12px; border: 0; border-radius: 6px; background: none; cursor: pointer; font-weight: 700;
  transition: background var(--t) ease-out;
}
.aba:hover { background: rgba(185, 138, 90, .14); }
.aba[aria-current="page"] { background: var(--cortica); color: var(--sobre-cortica); }
.aba .conta { font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: rgba(46, 36, 27, .1); }
.aba[aria-current="page"] .conta { background: rgba(255, 253, 247, .25); }
.medidores { display: grid; gap: 14px; }
.medidor-rotulo { display: flex; justify-content: space-between; font-size: 13px; gap: 8px; }
.medidor-rotulo strong { font-variant-numeric: tabular-nums; }
.barra { height: 8px; border-radius: 99px; background: rgba(110, 92, 73, .2); overflow: hidden; margin-top: 6px; }
.barra span { display: block; height: 100%; transform-origin: left; background: var(--tempo); transition: transform 400ms ease-out; }
.barra.confianca span { background: var(--confianca); }
.lateral .concluir { width: 100%; }
.lateral .pe { margin-top: auto; display: grid; gap: 8px; }
.abas-celular { display: none; }

.palco { min-width: 0; min-height: 100vh; }
.painel { padding-block: 24px 40px; padding-left: 28px; padding-right: max(28px, env(safe-area-inset-right, 0px)); display: grid; gap: 20px; align-content: start; max-width: 1200px; }
.painel-topo { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; justify-content: space-between; }
.painel-topo h2 { font-size: 30px; color: var(--sobre-cortica); }
.painel-topo .ajuda { color: var(--sobre-cortica); font-size: 14px; max-width: 46ch; }

/* Conversa */
.pessoas { display: flex; gap: 10px; flex-wrap: wrap; }
.pessoa {
  display: grid; gap: 2px; text-align: left; padding: 10px 14px; min-height: 44px; border: 0; border-radius: 6px; cursor: pointer;
  background: rgba(255, 253, 247, .78); color: var(--cartao-tinta); transition: background var(--t) ease-out, transform var(--t) ease-out;
}
.pessoa:hover { transform: translateY(-1px); }
.pessoa[aria-pressed="true"] { background: var(--papel); box-shadow: var(--sombra); }
.pessoa.com-mini { grid-template-columns: 40px 1fr; align-items: center; column-gap: 10px; }
.pessoa-texto { display: grid; gap: 2px; }
.retrato { display: block; height: auto; }
.retrato.mini { width: 40px; height: 48px; object-fit: cover; object-position: top; border-radius: 50%; background: var(--cortica); }
.com-retrato .retrato:not(.mini) { float: left; width: 96px; margin: 0 14px 6px 0; border-radius: 4px; background: rgba(185, 138, 90, .35); }
.com-retrato::after { content: ""; display: block; clear: both; }
.mentor { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: start; }
.retrato.mentora { width: 110px; border-radius: 4px; background: rgba(185, 138, 90, .35); }
.mentor-falas { display: grid; gap: 10px; }
.pessoa strong { font-family: var(--f-titulo); font-size: 18px; }
.pessoa span { font-size: 12.5px; color: #4F4033; }
.conversa-grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.resposta { padding: 20px 20px 18px; display: grid; gap: 10px; transform: rotate(-.6deg); animation: entra 240ms ease-out; }
.resposta .pergunta-feita { font-size: 14px; color: var(--cartao-suave); font-style: italic; }
.resposta .fala { font-size: 17px; }
.resposta.vazia { transform: none; background: rgba(255, 253, 247, .3); box-shadow: none; color: var(--sobre-cortica); }
.ganho { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; }
.ganho .delta { font-weight: 800; }
.ganho .delta.sobe { color: #1F6B45; } /* o cartão é papel claro nos dois temas */
.ganho .delta.desce { color: #9E2B22; }
.nota-cvv { font-size: 13.5px; padding: 10px 12px; border-left: 4px solid var(--confianca); background: rgba(47, 138, 91, .1); border-radius: 0 4px 4px 0; }
.perguntas { display: grid; gap: 10px; }
.pergunta {
  display: grid; gap: 4px; text-align: left; padding: 12px 14px; border: 0; border-radius: var(--raio); cursor: pointer;
  background: var(--papel); color: var(--cartao-tinta); box-shadow: var(--sombra);
  transition: transform var(--t) ease-out;
}
.pergunta:hover:not([aria-disabled="true"]) { transform: translateX(3px); }
.pergunta .custo { font-size: 12px; font-weight: 800; letter-spacing: .03em; color: var(--cartao-suave); text-transform: uppercase; }
.pergunta.aberta .custo { color: #8A5A10; }
.pergunta[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.pergunta .trava { font-size: 12.5px; color: var(--cartao-suave); font-style: italic; }
.historico { padding: 14px 16px; }
.historico summary { cursor: pointer; font-weight: 700; }
.historico ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14.5px; }
.historico .q { font-style: italic; color: var(--cartao-suave); }
.fim-sessao { padding: 16px 18px; display: grid; gap: 10px; background: #FFF4C9; color: #3E2E0C; }

/* Lupa */
.cenas-abas { display: flex; gap: 8px; flex-wrap: wrap; }
.cena-quadro { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; box-shadow: var(--sombra); border: 8px solid var(--papel); background: var(--cena-parede); }
.cena-imagem { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
:root[data-theme="dark"] .cena-imagem { filter: brightness(.86) sepia(.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cena-imagem { filter: brightness(.86) sepia(.12); } }
.cena-quadro svg.desenho { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ponto {
  position: absolute; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: rgba(255, 253, 247, .92); color: var(--cartao-tinta); box-shadow: 0 0 0 3px rgba(46, 36, 27, .55), var(--sombra);
  display: grid; place-items: center; transition: transform var(--t) ease-out, background var(--t) ease-out;
}
.ponto svg { width: 22px; height: 22px; }
.ponto:hover, .ponto:focus-visible { transform: translate(-50%, -50%) scale(1.12); }
.ponto.visto { background: rgba(255, 253, 247, .55); box-shadow: 0 0 0 2px rgba(46, 36, 27, .35); }
.ponto.atual { background: #FFE27A; }
.ponto .rotulo-ponto {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  background: var(--cartao-tinta); color: var(--papel); font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 4px; opacity: 0;
  transition: opacity var(--t) ease-out;
}
.ponto:hover .rotulo-ponto, .ponto:focus-visible .rotulo-ponto { opacity: 1; }
.cena-trancada { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; background: rgba(46, 36, 27, .55); color: #FFFDF7; font-family: var(--f-titulo); font-size: 22px; }
.lupa-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.detalhe { padding: 18px; display: grid; gap: 8px; transform: rotate(.8deg); animation: entra 220ms ease-out; }
.detalhe h3 { font-size: 20px; }
.detalhe.vazio { transform: none; background: rgba(255, 253, 247, .3); color: var(--sobre-cortica); box-shadow: none; }

/* Mural */
.mural-grade { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 26px; align-items: start; position: relative; }
.mural-area { position: relative; min-width: 0; }
.fios { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.teoria, .presa, .contradicao { z-index: 1; }
.contradicao { position: relative; }
.fios path { fill: none; stroke-linecap: round; }
.fios .valido { stroke: var(--fio); stroke-width: 3; }
.fios .fraco { stroke: var(--fio-fraco); stroke-width: 2; stroke-dasharray: 6 5; }
.contradicoes { display: grid; gap: 10px; margin-bottom: 22px; }
.contradicao { padding: 12px 14px; background: #F7E1E1; color: #4A1C1C; border-radius: var(--raio); box-shadow: var(--sombra); font-size: 14px; transform: rotate(-.5deg); }
.contradicao strong { display: block; font-family: var(--f-titulo); font-size: 16px; }
.teorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 34px 26px; }
.teoria-bloco { display: grid; gap: 18px; align-content: start; }
.teoria {
  position: relative; padding: 18px 16px 14px; border-radius: 2px; background: var(--teoria); color: var(--cartao-tinta);
  box-shadow: var(--sombra); display: grid; gap: 8px; cursor: pointer; text-align: left; border: 2px solid transparent;
  transition: transform var(--t) ease-out, background var(--t) ease-out, box-shadow var(--t) ease-out;
}
.teoria h3 { font-size: 19px; }
.teoria .texto-teoria { font-size: 14px; color: var(--cartao-suave); }
.teoria.acesa { background: var(--teoria-acesa); border-color: var(--teoria-borda); box-shadow: 0 0 0 4px rgba(255, 214, 90, .35), 0 0 28px rgba(255, 210, 80, .55), var(--sombra); }
.teoria.palpite { background: rgba(255, 244, 201, .22); border: 2px dashed var(--sobre-cortica); color: var(--sobre-cortica); box-shadow: none; }
.teoria.palpite .texto-teoria { color: var(--sobre-cortica-suave); }
.teoria.alvo { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--foco), var(--sombra); }
.teoria.solta-aqui { transform: scale(1.03); box-shadow: 0 0 0 4px var(--fio), var(--sombra); }
.requisitos { display: flex; gap: 6px; flex-wrap: wrap; }
.requisito { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: rgba(46, 36, 27, .08); color: #4F4033; }
.requisito svg { width: 13px; height: 13px; }
.requisito.ok.fala { background: var(--fala); color: #fff; }
.requisito.ok.observacao { background: var(--observacao); color: #fff; }
.requisito.ok.outra_versao { background: var(--outra); color: #fff; }
.teoria.palpite .requisito { background: rgba(255, 253, 247, .3); color: var(--sobre-cortica); }
.estado-teoria { font-size: 13px; font-weight: 800; }
.presas { display: flex; flex-wrap: wrap; gap: 16px 12px; padding-left: 6px; }
.presa { position: relative; width: 132px; padding: 12px 10px 8px; font-size: 12.5px; display: grid; gap: 4px; }
.presa .titulo-pista { font-weight: 800; line-height: 1.25; }
.presa .soltar { justify-self: start; font-size: 12px; padding: 2px 0; }
.presa.fraca { opacity: .82; }
.gaveta { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 32px); }
.gaveta-topo { display: flex; justify-content: space-between; align-items: baseline; color: var(--sobre-cortica); }
.gaveta-topo h3 { font-size: 20px; }
.gaveta-lista { display: grid; gap: 18px; overflow-y: auto; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; padding: 10px 6px 16px; }
.pista {
  position: relative; padding: 16px 14px 12px; display: grid; gap: 6px; text-align: left; border: 0; cursor: grab;
  touch-action: pan-y; user-select: none; transition: transform var(--t) ease-out, box-shadow var(--t) ease-out;
}
.pista .titulo-pista { font-weight: 800; font-size: 15px; line-height: 1.25; }
.pista .texto-pista { font-size: 13px; color: var(--cartao-suave); }
.pista .usos { font-size: 11.5px; font-weight: 800; color: var(--fio); }
.pista.selecionada { box-shadow: 0 0 0 3px var(--foco), 0 10px 18px rgba(46, 36, 27, .3); transform: translateY(-4px) rotate(0deg) !important; }
.pista.arrastando { opacity: .35; }
.fantasma { position: fixed; z-index: 50; pointer-events: none; width: 220px; transform: rotate(-3deg); box-shadow: 0 14px 28px rgba(0, 0, 0, .35); }
.mural-vazio { padding: 22px; color: var(--sobre-cortica); background: rgba(255, 253, 247, .15); border: 2px dashed rgba(255, 253, 247, .5); border-radius: 6px; }

/* Concluir e resultado */
.tela-folha { min-height: 100%; padding-block: 32px 48px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.folha { max-width: 760px; margin: 0 auto; padding: 28px 26px; display: grid; gap: 20px; }
.folha h1 { font-size: 32px; }
.folha h2 { font-size: 22px; }
.passo { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cartao-suave); }
.opcoes { display: grid; gap: 10px; }
.opcao {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 6px; border: 2px solid var(--papel-borda); background: rgba(255, 255, 255, .5); color: var(--cartao-tinta);
  transition: border-color var(--t) ease-out, background var(--t) ease-out;
}
.opcao input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--cartao-tinta); }
.opcao:has(input:checked) { border-color: var(--cartao-tinta); background: #FFF4C9; }
.opcao.desligada { opacity: .5; cursor: not-allowed; }
.opcao small { display: block; color: var(--cartao-suave); }
.folha .acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.reacao { padding: 14px 16px; background: #F4ECDD; border-radius: 6px; font-style: italic; animation: entra 240ms ease-out; }
.desfecho { font-family: var(--f-titulo); font-size: 20px; line-height: 1.5; }
.nota-total { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.nota-total .numero { font-family: var(--f-titulo); font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; }
.nota-total .rank { font-family: var(--f-titulo); font-size: 26px; color: #8A5A10; }
.partes { display: grid; gap: 10px; }
.parte { display: grid; grid-template-columns: 170px 1fr 64px; gap: 12px; align-items: center; font-size: 14.5px; }
.parte .barra { margin: 0; }
.parte .barra span { background: var(--cartao-tinta); }
.parte strong { text-align: right; font-variant-numeric: tabular-nums; }
.escolhas { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; font-size: 14.5px; }
.escolhas li { padding-left: 14px; border-left: 3px solid var(--papel-borda); }
.escolhas li.boa { border-color: var(--confianca); }
.escolhas li.ruim { border-color: #B0352A; }
.mentor .quem { font-weight: 800; }
.balao { padding: 12px 16px; background: #EEF3F9; color: #1C2B3D; border-radius: 4px 14px 14px 14px; max-width: 60ch; }
.carta-nova { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: center; }
.carta-nova .carta { transform: rotate(-3deg); }

/* Avisos e dica do tutorial */
.avisos {
  position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: grid; gap: 10px; width: min(340px, calc(100% - 32px)); pointer-events: none;
}
.aviso { pointer-events: none; padding: 12px 14px; display: grid; gap: 4px; background: var(--papel); color: var(--cartao-tinta); border-radius: 6px; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); animation: entra 220ms ease-out; border-left: 5px solid var(--cortica); }
.aviso .t { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cartao-suave); display: flex; justify-content: space-between; gap: 8px; }
.aviso .x { pointer-events: auto; background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; color: var(--cartao-suave); }
.aviso.pista.fala { border-color: var(--fala); }
.aviso.pista.observacao { border-color: var(--observacao); }
.aviso.pista.outra_versao { border-color: var(--outra); }
.aviso.intuicao { border-color: var(--outra); background: #F1ECF8; }
.aviso.intuicao .c { font-style: italic; }
.aviso.acesa { border-color: var(--teoria-borda); background: #FFF4C9; }
.aviso.contradicao { border-color: var(--fio); background: #F7E1E1; }
.aviso.reviravolta { border-color: var(--fio); background: #FFF4C9; }
.aviso.porta, .aviso.fim { border-color: var(--cartao-tinta); }
.dica-area { position: fixed; z-index: 45; left: max(316px, calc(300px + env(safe-area-inset-left, 0px) + 16px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100% - 32px)); }
.dica-area.sem-lateral { left: max(16px, env(safe-area-inset-left, 0px)); }
.dica { padding: 16px 16px 12px; display: grid; gap: 10px; background: #1F3B5C; color: #F5F8FC; border-radius: 8px; box-shadow: 0 14px 30px rgba(0, 0, 0, .3); animation: entra 240ms ease-out; }
.dica .t { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.dica .botao { justify-self: end; min-height: 38px; padding: 6px 14px; background: #F5F8FC; color: #1F3B5C; }

/* ============ Ramos: escolhas, semana, encontro, fluxograma, final ============ */
.nota-inicio { font-size: 14.5px; padding: 10px 12px; border-left: 4px solid var(--fala); background: rgba(31, 95, 168, .08); border-radius: 0 4px 4px 0; }
.sem-relogio { font-size: 14px; align-items: flex-start; }
.sem-relogio input { margin-top: 3px; flex: none; }
.barra.abertura span { background: var(--outra); }
.ivone-botao { width: 100%; min-height: 40px; font-size: 14px; }
.escolha { display: grid; gap: 14px; }
.escolha-fala { display: block; }
.escolha-fala .fala { font-size: 17px; }
.folha-escolha { padding: 22px 20px; max-width: 760px; }
.opcoes-escolha { display: grid; gap: 10px; }
.opcao-escolha {
  text-align: left; cursor: pointer; padding: 14px 16px; min-height: 48px; border-radius: 6px; font-weight: 700;
  border: 2px solid var(--papel-borda); background: rgba(255, 255, 255, .6); color: var(--cartao-tinta);
  transition: border-color var(--t) ease-out, transform var(--t) ease-out, background var(--t) ease-out;
}
.opcao-escolha:hover { border-color: var(--cartao-tinta); transform: translateX(3px); }
.opcao-escolha.silencio { font-style: italic; font-weight: 600; }
.acoes-direita { display: flex; justify-content: flex-end; }
.numeros { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; }
.numeros strong { font-family: var(--f-titulo); font-size: 22px; }
.voltar-a { font-size: 13.5px; color: var(--cartao-suave); }
.ouvir { font-size: 13px; justify-self: start; }

.fluxo { display: grid; gap: 12px; padding-top: 10px; border-top: 1px solid var(--papel-borda); }
.fluxo-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.fluxo-topo h2 { font-size: 20px; }
.fluxo-topo p { font-size: 14px; color: var(--cartao-suave); }
.fluxo-lista { list-style: none; margin: 0; padding: 0 0 0 6px; display: grid; gap: 14px; position: relative; }
.fluxo-lista::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: var(--papel-borda); }
.no { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 4px 12px; align-items: start; }
.no .chips { grid-column: 2; }
.losango { width: 14px; height: 14px; margin-top: 4px; transform: rotate(45deg); background: var(--papel); border: 2px solid var(--cartao-suave); position: relative; z-index: 1; }
.no.feito .losango { background: var(--fio); border-color: var(--fio); }
.no-titulo { font-weight: 800; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 13px; padding: 4px 10px; border-radius: 99px; border: 1.5px solid var(--papel-borda); color: var(--cartao-suave); }
.chip.nesta { background: var(--cartao-tinta); border-color: var(--cartao-tinta); color: var(--papel); font-weight: 700; }
.chip.vista { border-color: var(--cartao-suave); color: var(--cartao-tinta); }
.chip.oculta { border-style: dashed; min-width: 34px; text-align: center; }

.celular { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: #EDE6D8; color: #2E241B; max-width: 440px; }
.bolha { display: grid; gap: 2px; max-width: 85%; padding: 8px 12px; border-radius: 14px; animation: entra 220ms ease-out; }
.bolha.dela { justify-self: start; background: #FFFFFF; border-bottom-left-radius: 4px; }
.bolha.minha { justify-self: end; background: #DCEBD8; border-bottom-right-radius: 4px; }
.bolha-de { font-size: 11.5px; font-weight: 800; color: #5C4B3A; }
.conversa-visita { margin: 0; padding-left: 20px; display: grid; gap: 12px; font-size: 15px; }
.conversa-visita .q, .momento .q { font-style: italic; color: var(--cartao-suave); }
.momentos { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.momento { display: grid; gap: 8px; padding: 14px 16px; border-radius: 6px; border: 1px solid var(--papel-borda); animation: entra 240ms ease-out; }
.momento h2 { font-size: 18px; }
.momento.atual { border: 2px solid var(--cartao-tinta); }
.epilogo { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.quarto-final { margin: 0; display: grid; gap: 10px; }
.quarto-final .cena-quadro { border-width: 6px; }
.marca-quarto { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #FFE27A; color: #2E241B; font-weight: 800; font-size: 14px; box-shadow: 0 0 0 3px rgba(46, 36, 27, .6); }
.quarto-final figcaption ol { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 4px; }
.conversar ol { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.dica-acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dica .dica-acoes .botao.claro { background: transparent; color: #F5F8FC; box-shadow: inset 0 0 0 2px #F5F8FC; }
.dica-ivone { background: #3E2F55; }
.dica-ivone .botao { color: #3E2F55; }
@media (max-width: 820px) {
  .medidores.tres { grid-template-columns: 1fr 1fr 1fr; }
  .lateral .ivone-botao { flex: 1 1 100%; min-height: 40px; padding: 6px 12px; font-size: 13px; }
}

@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* ============ Celular ============ */
@media (max-width: 820px) {
  .jogo { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: sticky; top: 0; z-index: 20; height: auto; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 6px 14px; padding: 10px 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
    border-right: 0; border-bottom: 1px solid var(--papel-borda);
  }
  .lateral .caso-nome { flex: 1 1 100%; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .lateral .caso-nome h1 { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lateral details, .lateral .abas, .lateral .concluir, .lateral .pe { display: none; }
  .medidores { flex: 1 1 100%; grid-template-columns: 1fr 1fr; gap: 12px; }
  .objetivo { flex: 1 1 100%; font-size: 12.5px; padding: 6px 10px; }
  .medidor-rotulo { font-size: 12px; }
  .barra { height: 6px; margin-top: 3px; }
  .palco { min-height: 100vh; padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .painel { padding-block: 16px 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); gap: 16px; }
  .painel-topo h2 { font-size: 24px; }
  .abas-celular {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    background: var(--papel-lateral); border-top: 1px solid var(--papel-borda);
    padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  }
  .abas-celular button { min-height: 60px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; gap: 2px; font-size: 12.5px; font-weight: 700; padding: 6px 2px; }
  .abas-celular svg { width: 22px; height: 22px; }
  .abas-celular button[aria-current="page"] { color: var(--fio); }
  .abas-celular .concluir-aba { background: var(--botao); color: var(--botao-texto); }
  .conversa-grade, .lupa-grade { grid-template-columns: minmax(0, 1fr); }
  .mural-grade { grid-template-columns: minmax(0, 1fr); padding-bottom: 190px; }
  .gaveta {
    position: fixed; z-index: 25; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); top: auto; max-height: none;
    background: rgba(46, 36, 27, .88); padding: 8px 0 6px; gap: 4px;
  }
  .gaveta-topo { padding: 0 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); color: #FFFDF7; }
  .gaveta-topo h3 { font-size: 16px; }
  .gaveta-lista { display: flex; overflow-x: auto; overflow-y: hidden; gap: 12px; padding: 12px 16px 8px; padding-left: max(16px, env(safe-area-inset-left, 0px)); scroll-snap-type: x proximity; }
  .gaveta.fechada .gaveta-lista { display: none; }
  .mural-grade.gaveta-fechada { padding-bottom: 60px; }
  .pista { flex: 0 0 200px; scroll-snap-align: start; touch-action: pan-x; }
  .pista .texto-pista { display: none; }
  .teorias { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .presa { width: calc(50% - 6px); }
  .ponto { width: 36px; height: 36px; }
  .ponto svg { width: 18px; height: 18px; }
  .ponto.visto { opacity: .7; }
  .dica-area, .dica-area.sem-lateral { left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .avisos { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .aviso:not(:last-child) { display: none; }
  .medidor-rotulo .longo { display: none; }
  .casos { grid-template-columns: minmax(0, 1fr); }
  .album-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .resposta { scroll-margin-top: 90px; }
  .parte { grid-template-columns: 1fr 64px; }
  .parte .barra { grid-column: 1 / -1; grid-row: 2; }
  .carta-nova { grid-template-columns: 1fr; }
  .carta-nova .carta { max-width: 200px; }
  .folha { padding: 22px 18px; }
  .bilhete { padding: 28px 20px 22px; }
}

/* Celular estreito: a cena fica mais larga que a tela, numa faixa que rola de lado */
@media (max-width: 600px) {
  .cena-rolagem { overflow-x: auto; overscroll-behavior-x: contain; margin-inline: -16px; padding-inline: 16px; scroll-snap-type: x proximity; }
  .cena-rolagem .cena-quadro { width: 540px; max-width: none; scroll-snap-align: start; }
  .lupa-grade::before { content: "Arraste a cena para os lados."; font-size: 13px; color: var(--sobre-cortica); }
}

/* Tablet: o meio-termo, com teorias e respostas em duas colunas */
@media (min-width: 600px) and (max-width: 820px) {
  .teorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presa { width: calc(50% - 6px); }
}

/* Menos movimento: sem animação e sem botão que se mexe no hover (sem a transição, o botão que sobe 1 px sai de baixo
   do mouse parado na borda, desce, volta para baixo do mouse e fica tremendo). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .botao:hover, .botao:active, .pessoa:hover, .pergunta:hover:not([aria-disabled="true"]) { transform: none; }
}
.menos-movimento *, .menos-movimento *::before, .menos-movimento *::after { animation: none !important; transition: none !important; }
.menos-movimento .botao:hover, .menos-movimento .botao:active, .menos-movimento .pessoa:hover,
.menos-movimento .pergunta:hover:not([aria-disabled="true"]) { transform: none; }