/* DESFILTRE-SE — estilos de cada capítulo e atividade. */

/* ===== Avatares da rede inventada ===== */
.avatar { flex: none; width: 32px; height: 32px; display: grid; place-items: center; font-weight: 700; font-size: .8rem; color: var(--preto); }
.avatar--circulo { border-radius: 50%; }
.avatar--quadrado { border-radius: 9px; }
.avatar--losango { border-radius: 6px; transform: rotate(45deg) scale(.82); }
.avatar--losango b { transform: rotate(-45deg); }

/* ===== O que acontece nas redes? ===== */
.modulos { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
@media (min-width: 900px) { .modulos { grid-template-columns: 260px minmax(0, 1fr); } }
.modulos-abas { display: flex; flex-direction: column; border-bottom: 1px solid var(--linha); }
@media (min-width: 900px) { .modulos-abas { border-bottom: 0; border-right: 1px solid var(--linha); } }
@media (max-width: 899px) { .modulos-abas { flex-direction: row; overflow-x: auto; } }
.modulos-abas button {
  text-align: left; padding: 18px 22px; background: transparent; border: 0; cursor: pointer; display: grid; gap: 4px;
  border-left: 3px solid transparent; min-width: 160px; color: var(--prata);
}
.modulos-abas button span { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; }
.modulos-abas button strong { font-family: var(--f-display); font-size: 1.12rem; color: inherit; font-weight: 700; }
.modulos-abas button[aria-selected="true"] { color: var(--branco); background: rgba(167, 139, 250, .1); border-left-color: var(--violeta); }
@media (max-width: 899px) {
  .modulos-abas button { border-left: 0; border-bottom: 3px solid transparent; }
  .modulos-abas button[aria-selected="true"] { border-bottom-color: var(--violeta); }
}
.modulo-painel { display: grid; gap: 26px; padding: clamp(22px, 3vw, 40px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .modulo-painel { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.modulo-painel h4 { font-family: var(--f-display); font-size: var(--t-2); letter-spacing: -0.02em; }
.modulo-resumo { font-size: 1.12rem; max-width: 56ch; }
.modulo-texto { display: grid; gap: 18px; }
.modulo-extra { min-height: 0; }
.modulo-extra:not(:empty) { border-left: 3px solid var(--rosa); padding-left: 18px; animation: surgir .4s ease both; }
.modulo-extra .rotulo { color: var(--rosa); margin-bottom: 6px; }
.diagrama { width: 100%; max-width: 300px; justify-self: center; }
.diagrama svg { width: 100%; height: auto; display: block; overflow: visible; }
.diagrama text { font-family: var(--f-mono); font-size: 11px; fill: var(--prata); letter-spacing: .06em; }
.diagrama .d-forte { fill: var(--branco); font-size: 13px; }
.diagrama .d-linha { stroke: var(--linha-forte); stroke-width: 1.5; fill: none; }
.diagrama .d-pulso { animation: pulso 4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
html.modo-leve .diagrama .d-pulso { animation: none; }
@media (prefers-reduced-motion: reduce) { .diagrama .d-pulso { animation: none; } }

/* ===== Laboratório de filtros ===== */
.cap-topo--centro .abre { margin-inline: auto; }
.titulo-duplo { max-width: 22ch; }
.titulo-duplo em { display: block; font-family: var(--f-serifa); font-weight: 400; font-style: italic; letter-spacing: -0.02em; color: var(--azul); }
.lab { padding: clamp(14px, 2.4vw, 28px); display: grid; gap: 22px; }
.lab-abas { display: inline-flex; gap: 4px; padding: 4px; border-radius: 24px; border: 1px solid var(--linha-forte); justify-self: start; flex-wrap: wrap; }
.lab-abas button {
  min-height: 42px; padding: 8px 18px; border-radius: 999px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--prata);
}
.lab-abas button[aria-selected="true"] { background: var(--branco); color: var(--preto); }
.lab-corpo { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .lab-corpo { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.lab-imagem { display: grid; gap: 10px; align-content: start; }
.comparador {
  position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; background: var(--grafite);
}
.comparador canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#lab-editada { clip-path: inset(0 0 0 var(--corte, 50%)); }
.comp-rotulo {
  position: absolute; top: 12px; z-index: 2; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(8, 9, 13, .7); padding: 5px 10px; border-radius: 999px; pointer-events: none;
}
.comp-rotulo--esq { left: 12px; } .comp-rotulo--dir { right: 12px; }
.comp-divisor {
  position: absolute; top: 0; bottom: 0; left: var(--corte, 50%); width: 44px; margin-left: -22px; z-index: 3;
  display: grid; place-items: center; cursor: ew-resize; touch-action: none;
}
.comp-divisor::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--branco); box-shadow: 0 0 12px rgba(103, 217, 255, .9); }
.comp-divisor span { position: relative; width: 38px; height: 38px; border-radius: 50%; background: var(--branco); box-shadow: 0 4px 18px rgba(0, 0, 0, .5); }
.comp-divisor span::before { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--preto); font-weight: 700; letter-spacing: 2px; }
.lab-legenda { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--prata); }
.lab-controles { display: grid; gap: 18px; align-content: start; }
.ajustes { display: grid; gap: 14px; }
.ajuste { display: grid; gap: 4px; }
.ajuste-topo { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.ajuste-topo output { font-family: var(--f-mono); font-size: .8rem; color: var(--azul); font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; height: 30px; background: transparent; accent-color: var(--violeta); cursor: pointer; }
.lab-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.lab-botoes .btn { flex: 1 1 200px; }
.configuracao { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rosa); }
.chaves { display: grid; gap: 8px; }
.chave {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 14px;
  border-radius: var(--raio-peq); border: 1px solid var(--linha); background: rgba(245, 243, 240, .03); cursor: pointer; text-align: left;
}
.chave-trilho { flex: none; width: 46px; height: 26px; border-radius: 999px; background: rgba(185, 187, 199, .25); position: relative; transition: background-color .2s; }
.chave-trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--branco); transition: transform .2s; }
.chave[aria-checked="true"] { border-color: var(--violeta); }
.chave[aria-checked="true"] .chave-trilho { background: var(--violeta); }
.chave[aria-checked="true"] .chave-trilho::after { transform: translateX(20px); }
.chave-estado { font-family: var(--f-mono); font-size: .68rem; color: var(--prata); margin-left: auto; text-transform: uppercase; letter-spacing: .08em; }
.contagem { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .06em; color: var(--azul); }
.lab-explica { font-size: 1.08rem; max-width: 70ch; border-top: 1px solid var(--linha); padding-top: 18px; }

/* ===== Órbita (rede inventada) ===== */
.orbita { display: grid; gap: 24px; }
.orbita-topo { display: flex; align-items: center; gap: 14px; }
.orbita-logo { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--azul); position: relative; }
.orbita-logo::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--rosa); top: -6px; left: 50%; margin-left: -6px; }
.orbita-nome { font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.03em; line-height: 1; }
.orbita-sub { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--prata); }
.posts { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); align-items: start; }
.post {
  border-radius: 26px; overflow: hidden; background: var(--grafite);
  border: 1px solid var(--linha); display: grid; position: relative;
}
.post::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(103, 217, 255, .5), transparent 40%, rgba(255, 155, 203, .4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.post-topo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.post-topo div { display: grid; line-height: 1.2; }
.post-topo strong { font-weight: 600; }
.post-topo span { color: var(--prata); font-size: .85rem; }
.post-tipo { margin-left: auto; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--prata); border: 1px solid var(--linha-forte); border-radius: 999px; padding: 3px 9px; }
.post-img { position: relative; aspect-ratio: 1; margin: 0 10px; border-radius: 18px; overflow: hidden; }
.post-img svg { display: block; width: 100%; height: 100%; }
.post-play {
  position: absolute; left: 14px; bottom: 14px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 0;
  background: var(--branco); color: var(--preto); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.robo-corpo { transition: transform .4s; }
.post-img.tocando .robo-corpo { animation: robo 3.2s ease-in-out infinite alternate; }
@keyframes robo { 0% { transform: translate(-90px, 40px); } 50% { transform: translate(0, 0); } 100% { transform: translate(90px, 40px); } }
html.modo-leve .post-img.tocando .robo-corpo { animation: none; transform: translate(40px, 10px); }
@media (prefers-reduced-motion: reduce) { .post-img.tocando .robo-corpo { animation: none; transform: translate(40px, 10px); } }
.post-numeros { display: flex; gap: 18px; padding: 14px 16px 4px; align-items: center; font-variant-numeric: tabular-nums; }
.post-numeros span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.post-numeros svg { width: 20px; height: 20px; }
.post-legenda { padding: 4px 16px 10px; font-size: .95rem; }
.post-legenda strong { font-weight: 600; margin-right: 6px; }
.post-coment-btn { justify-self: start; margin: 0 8px 12px; min-height: 44px; padding: 8px 10px; background: none; border: 0; color: var(--prata); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.post-comentarios { list-style: none; display: grid; gap: 8px; padding: 0 16px 16px; font-size: .92rem; }
.post-comentarios li { background: rgba(245, 243, 240, .05); border-radius: 12px; padding: 8px 12px; }
.post-comentarios li span { color: var(--prata); font-size: .8rem; display: block; }
.pergunta-rede { padding: clamp(18px, 3vw, 32px); display: grid; gap: 18px; }

/* ===== Quiz ===== */
.cap-quiz .miolo { max-width: 900px; }
.quiz { padding: clamp(22px, 4vw, 48px); display: grid; gap: 24px; }
.quiz > div { display: grid; gap: 20px; }
.quiz > div > .btn { justify-self: start; }
.quiz-topo { display: grid; gap: 10px; }
.titulo-quiz { text-transform: uppercase; font-size: clamp(2.2rem, 6vw, 4.2rem); letter-spacing: -0.045em; }
.quiz-sub { font-family: var(--f-serifa); font-style: italic; font-size: 1.5rem; color: var(--azul); }
.quiz-progresso { display: grid; gap: 8px; }
.trilho { height: 6px; border-radius: 999px; background: rgba(185, 187, 199, .18); overflow: hidden; }
.trilho span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--violeta), var(--azul)); transition: width .4s ease; }
.quiz-campo { border: 0; padding: 0; margin: 0; display: grid; gap: 18px; min-width: 0; }
.quiz-enunciado { font-family: var(--f-display); font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; padding: 0; margin-bottom: 18px; }
.quiz-botoes { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.resultado-nome { font-family: var(--f-display); font-size: clamp(2.2rem, 6vw, 4.2rem); text-transform: uppercase; letter-spacing: -0.04em; line-height: 1; color: var(--violeta); }
.resultado-nome:focus { outline: none; }
.resultado-texto { font-size: 1.15rem; max-width: 60ch; }
.revisao summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--azul); font-weight: 600; }
.revisao-lista { display: grid; gap: 16px; margin-top: 12px; padding-left: 22px; }
.revisao-lista li { display: grid; gap: 4px; }
.revisao-lista .r-pergunta { font-weight: 600; }
.revisao-lista .r-resposta { color: var(--prata); font-size: .95rem; }

/* ===== Manifesto ===== */
.cap-manifesto { padding-top: clamp(40px, 6vh, 80px); }
.manifesto-palco { position: relative; height: clamp(220px, 34vw, 380px); }
.manifesto-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.manifesto-palavra-estatica {
  position: absolute; inset: 0; display: none; place-items: center; text-transform: uppercase;
  font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 8vw, 6rem); letter-spacing: -0.04em; color: var(--violeta);
}
.manifesto-palco.estatico .manifesto-palavra-estatica { display: grid; }
.manifesto-palco.estatico .manifesto-canvas { display: none; }
.titulo-manifesto {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(2.2rem, 6.6vw, 5.6rem); line-height: .92; letter-spacing: -0.045em;
  text-transform: uppercase; text-align: center; margin: 10px auto 50px; max-width: 13ch;
}
.manifesto-texto { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; text-align: center; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.5; }
.manifesto-texto p { color: var(--prata); transition: color .6s; }
.manifesto-texto p.visto, html.modo-leve .manifesto-texto p { color: var(--branco); }
@media (prefers-reduced-motion: reduce) { .manifesto-texto p { color: var(--branco); } }
.manifesto-forte { font-family: var(--f-serifa); font-style: italic; font-size: 1.3em; }
.assinatura-final { text-align: center; margin: 60px auto 26px; font-family: var(--f-mono); letter-spacing: .14em; text-transform: uppercase; font-size: clamp(.82rem, 1.6vw, 1rem); color: var(--prata); }
.assinatura-final span { display: block; font-family: var(--f-display); font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -0.04em; color: var(--branco); font-weight: 800; margin-bottom: 8px; }

/* ===== Sobre ===== */
.sobre { display: grid; gap: clamp(28px, 5vw, 70px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) { .sobre { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.sobre-texto { display: grid; gap: 16px; }
.sobre-texto p { max-width: 62ch; }
.ficha { padding: 24px; display: grid; gap: 8px; }
.ficha label { font-size: .9rem; color: var(--prata); margin-top: 6px; }
.privacidade { margin-top: 18px; display: grid; gap: 14px; justify-items: start; padding-top: 18px; border-top: 1px solid var(--linha); }
.privacidade p { color: var(--prata); font-size: .95rem; max-width: 62ch; }
.privacidade strong { color: var(--branco); }
.btn.confirmar { background: var(--rosa); color: var(--preto); border-color: var(--rosa); }
.mensagem-final {
  margin: clamp(80px, 12vw, 160px) auto 0; text-align: center; max-width: 20ch;
  font-family: var(--f-display); font-weight: 800; font-size: clamp(1.8rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: -0.04em;
}
.mensagem-final em { display: block; font-family: var(--f-serifa); font-weight: 400; color: var(--violeta); letter-spacing: -0.02em; margin-top: 10px; }
.rodape { position: relative; z-index: 2; border-top: 1px solid var(--linha); }
.rodape-miolo { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; padding-block: 28px; color: var(--prata); font-size: .9rem; }
.rodape-miolo p:nth-child(2) { max-width: 60ch; }
.marca--rodape { font-size: 1.4rem; }


/* ===== Abas ===== */
.cap-ideias .cap-topo--lado { display: grid; gap: 22px; }
@media (min-width: 980px) { .cap-topo--lado { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
#painel-quiz .cap-quiz { min-height: calc(100svh - 80px); padding-top: calc(var(--nav-altura) + 56px); }
.quiz .botoes-linha { justify-self: start; }