/* DESFILTRE-SE — base: cores, tipografia, navegação, botões e abertura.
   Conceito do layout: uma sala escura onde um espelho flutuante acompanha a leitura;
   cada capítulo é uma página de revista com tipografia grande de um lado e um experimento do outro. */
:root {
  /* Cores (paleta definida pelo grupo) */
  --preto: #08090D;
  --grafite: #14151D;
  --grafite-2: #1C1D28;
  --branco: #F5F3F0;
  --prata: #B9BBC7;
  --violeta: #A78BFA;
  --azul: #67D9FF;
  --rosa: #FF9BCB;
  --linha: rgba(185, 187, 199, 0.18);
  --linha-forte: rgba(185, 187, 199, 0.34);
  --vidro: rgba(16, 17, 24, 0.72);
  --vidro-claro: rgba(245, 243, 240, 0.06);
  --sombra: 0 16px 40px -24px rgba(0, 0, 0, 0.7);

  /* Tipografia */
  --f-display: "Bricolage Grotesque", "Arial Black", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Hanken Grotesk", "Segoe UI", Roboto, system-ui, sans-serif;
  --f-serifa: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-mono: "JetBrains Mono", Consolas, "Courier New", monospace;

  --t-mega: clamp(2.3rem, 6.8vw, 6.4rem);
  --t-1: clamp(1.9rem, 4.4vw, 3.7rem);
  --t-2: clamp(1.55rem, 3.2vw, 2.5rem);
  --t-3: clamp(1.2rem, 1.8vw, 1.45rem);
  --t-corpo: 1.0625rem;
  --t-peq: 0.9rem;

  --raio: 20px;
  --raio-peq: 12px;
  --largura: 1240px;
  --gutter-esq: max(16px, env(safe-area-inset-left, 0px));
  --gutter-dir: max(16px, env(safe-area-inset-right, 0px));
  --nav-altura: 64px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.modo-leve { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--preto);
  color: var(--branco);
  font-family: var(--f-texto);
  font-size: var(--t-corpo);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before { /* faixa atrás da barra do sistema no celular */
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 50; background: var(--preto);
}

img, svg, canvas, video { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 700; }
p { margin: 0; }
a { color: var(--azul); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
.sem-quebra { white-space: nowrap; }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 6px; }

.so-leitor {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular-link {
  position: fixed; left: var(--gutter-esq); top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 100;
  background: var(--branco); color: var(--preto); padding: 10px 16px; border-radius: 999px;
  font-weight: 600; text-decoration: none; transform: translateY(-160%); transition: transform .2s;
}
.pular-link:focus { transform: none; }

/* ---------- Layout comum ---------- */
.miolo {
  width: 100%; max-width: var(--largura); margin: 0 auto;
  padding-left: var(--gutter-esq); padding-right: var(--gutter-dir);
}
main { position: relative; z-index: 2; }
.capitulo { position: relative; padding-block: clamp(88px, 13vh, 150px); scroll-margin-top: var(--nav-altura); }

.rotulo {
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--prata); display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.rotulo-num {
  color: var(--preto); background: var(--violeta); border-radius: 999px; padding: 2px 9px;
  font-variant-numeric: tabular-nums; letter-spacing: 0.08em;
}
.titulo-cap {
  font-family: var(--f-display); font-size: var(--t-1); line-height: 1.02; letter-spacing: -0.035em;
  font-weight: 800; font-variation-settings: "opsz" 96;
}
.titulo-pergunta { font-weight: 700; letter-spacing: -0.03em; max-width: 17ch; }
.titulo-bloco { font-family: var(--f-display); font-size: var(--t-2); line-height: 1.1; letter-spacing: -0.025em; }
.titulo-bloco--grande { font-size: clamp(2rem, 4.6vw, 3.6rem); letter-spacing: -0.035em; }
.titulo-bloco--caixa { text-transform: uppercase; letter-spacing: -0.01em; }
.titulo-pequeno { font-family: var(--f-display); font-size: var(--t-3); letter-spacing: -0.01em; }
.titulo-faixa {
  font-family: var(--f-display); font-size: clamp(2.2rem, 6vw, 5.2rem); line-height: 0.98;
  letter-spacing: -0.04em; text-transform: uppercase; font-weight: 800;
}
.abre { font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.6; color: var(--branco); max-width: 60ch; }
.apoio { color: var(--prata); max-width: 62ch; }
.nota { color: var(--prata); font-size: var(--t-peq); max-width: 62ch; }
.fecho { color: var(--branco); max-width: 60ch; }
.fecho-destaque {
  font-family: var(--f-serifa); font-style: italic; font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  line-height: 1.25; color: var(--branco); max-width: 34ch;
}

.cap-topo { display: grid; gap: 22px; margin-bottom: clamp(48px, 7vw, 88px); }
.cap-topo--esq { max-width: 980px; }
.cap-topo--centro { text-align: center; justify-items: center; margin-inline: auto; max-width: 1100px; }
.cap-topo--dir { margin-left: auto; max-width: 900px; }
.cap-topo--larga { max-width: 1200px; }

.bloco { display: grid; gap: 28px; margin-top: clamp(56px, 8vw, 110px); }
.bloco:first-of-type { margin-top: 0; }
.bloco-topo { display: grid; gap: 10px; }
.bloco-topo--lado { grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .bloco-topo--lado { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; } }

.vidro {
  background: var(--vidro);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.botoes-linha { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.botoes-centro { justify-content: center; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--f-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform .2s ease, box-shadow .25s ease, background-color .2s, border-color .2s, color .2s;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primario {
  background: var(--branco); color: var(--preto);
  box-shadow: inset 0 -2px 0 rgba(8, 9, 13, .15);
}
.btn-primario:hover:not(:disabled) { background: #ffffff; }
.btn-contorno { background: transparent; color: var(--branco); border-color: var(--linha-forte); }
.btn-contorno:hover:not(:disabled) { border-color: var(--branco); background: var(--vidro-claro); }
.btn-contorno[aria-pressed="true"] { background: var(--branco); color: var(--preto); border-color: var(--branco); }
.btn-vidro {
  background: rgba(245, 243, 240, .08); color: var(--branco); border-color: var(--linha-forte);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn-vidro:hover:not(:disabled) { background: rgba(245, 243, 240, .14); }

/* Opções de resposta (cenas, quiz, laboratório) */
.opcoes { display: grid; gap: 10px; }
.opcoes--linha { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.opcao {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  padding: 14px 16px; min-height: 52px; border-radius: var(--raio-peq);
  background: rgba(245, 243, 240, .04); border: 1px solid var(--linha); cursor: pointer;
  line-height: 1.45; transition: border-color .2s, background-color .2s, transform .2s;
}
.opcao:hover { border-color: var(--linha-forte); background: rgba(245, 243, 240, .08); }
.opcao-letra {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-mono); font-size: .75rem; border: 1px solid var(--linha-forte); color: var(--prata);
}
.opcao[aria-pressed="true"], .opcao[aria-checked="true"] {
  border-color: var(--violeta); background: rgba(167, 139, 250, .14);
}
.opcao[aria-pressed="true"] .opcao-letra, .opcao[aria-checked="true"] .opcao-letra {
  background: var(--violeta); color: var(--preto); border-color: var(--violeta);
}
.opcao[aria-pressed="true"] .opcao-letra::after, .opcao[aria-checked="true"] .opcao-letra::after { content: "✓"; }
.opcao[aria-pressed="true"] .opcao-letra span, .opcao[aria-checked="true"] .opcao-letra span { display: none; }

.resposta:empty { display: none; }
.resposta {
  border-left: 3px solid var(--azul); padding: 4px 0 4px 18px; display: grid; gap: 10px;
  animation: surgir .45s ease both;
}
.resposta p { max-width: 62ch; }
.resposta .btn { justify-self: start; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--linha-forte);
  background: transparent; cursor: pointer; font-size: .95rem; transition: background-color .2s, border-color .2s, color .2s;
}
.chip:hover { border-color: var(--branco); }
.chip[aria-checked="true"] { background: var(--branco); color: var(--preto); border-color: var(--branco); }

.seletor { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--linha-forte); background: rgba(8, 9, 13, .5); }
.seletor 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);
}
.seletor button[aria-checked="true"] { background: var(--branco); color: var(--preto); }
.seletor--grande button { min-height: 50px; padding: 10px 22px; }

.campo {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: var(--raio-peq);
  border: 1px solid var(--linha-forte); background: rgba(8, 9, 13, .6); color: var(--branco); font: inherit;
}
.campo::placeholder { color: rgba(185, 187, 199, .7); }
textarea.campo { resize: vertical; }

@keyframes surgir { from { transform: translateY(10px); opacity: .2; } to { transform: none; opacity: 1; } }

/* ---------- Palco do espelho ---------- */
.palco { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
.palco-reserva { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(60% 50% at 50% 40%, rgba(167, 139, 250, .18), transparent 70%), radial-gradient(40% 40% at 70% 80%, rgba(103, 217, 255, .1), transparent 70%), var(--preto); }
.reserva-espelho {
  position: absolute; left: 50%; top: 46%; width: min(36vw, 300px); aspect-ratio: 2 / 3;
  transform: translate(-50%, -50%); border-radius: 26px; overflow: hidden;
  background: linear-gradient(160deg, rgba(167, 139, 250, .55), rgba(103, 217, 255, .3) 45%, rgba(255, 155, 203, .45));
  border: 1px solid rgba(245, 243, 240, .35); box-shadow: 0 0 40px rgba(167, 139, 250, .18); opacity: .7;
  transition: transform 1s ease, border-radius 1s ease, opacity 1s ease, filter 1s ease, left 1s ease;
}
.reserva-brilho { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(245, 243, 240, .45) 50%, transparent 60%); animation: varrer 7s linear infinite; }
@keyframes varrer { from { transform: translateX(-40%); } to { transform: translateX(40%); } }
.reserva-fantasmas i {
  position: absolute; width: min(14vw, 110px); aspect-ratio: 2 / 3; border-radius: 16px; border: 1px solid rgba(245, 243, 240, .3);
  background: linear-gradient(160deg, rgba(167, 139, 250, .25), rgba(103, 217, 255, .12)); opacity: 0; transition: opacity 1s ease;
}
.reserva-fantasmas i:nth-child(1) { left: 18%; top: 22%; } .reserva-fantasmas i:nth-child(2) { left: 72%; top: 18%; }
.reserva-fantasmas i:nth-child(3) { left: 14%; top: 62%; } .reserva-fantasmas i:nth-child(4) { left: 76%; top: 60%; }
.palco-reserva[data-estado="2"] .reserva-fantasmas i { opacity: .7; }
.palco-reserva[data-estado="3"] .reserva-espelho { filter: hue-rotate(40deg) saturate(1.6); transform: translate(-50%, -50%) skewX(-6deg) scaleY(1.05); }
.palco-reserva[data-estado="4"] .reserva-espelho { border-radius: 50% 30% 50% 20%; transform: translate(-50%, -50%) rotate(8deg); }
.palco-reserva[data-estado="5"] .reserva-espelho { opacity: .25; transform: translate(-50%, -50%) scale(1.6); filter: blur(6px); }
.palco-reserva.fundo .reserva-espelho { left: 78%; opacity: .5; }
@media (max-width: 760px) { .palco-reserva.fundo .reserva-espelho { left: 50%; opacity: .25; } }
html.modo-leve .reserva-brilho { animation: none; }
@media (prefers-reduced-motion: reduce) { .reserva-brilho { animation: none; } }

.cortina {
  position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, rgba(167, 139, 250, .55), rgba(20, 21, 29, .96) 55%, var(--preto));
  transition: opacity .55s ease;
}
.cortina.ativa { opacity: 1; }

/* ---------- Navegação ---------- */
.nav {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 40;
  background: rgba(8, 9, 13, .62); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--linha);
}
.nav-miolo {
  max-width: 1440px; margin: 0 auto; min-height: var(--nav-altura);
  padding-left: var(--gutter-esq); padding-right: var(--gutter-dir);
  display: flex; align-items: center; gap: 18px;
}
.marca {
  font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em;
  color: var(--branco); text-decoration: none; white-space: nowrap;
}
.marca span { color: var(--violeta); }
.abas { flex: 1; min-width: 0; display: flex; justify-content: center; gap: 4px; }
.aba {
  position: relative; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; cursor: pointer; color: var(--prata); font-size: .95rem; font-weight: 600; white-space: nowrap;
  transition: color .2s, background-color .2s, border-color .2s;
}
.aba:hover { color: var(--branco); border-color: var(--linha-forte); }
.aba[aria-selected="true"] { color: var(--branco); background: rgba(167, 139, 250, .18); border-color: rgba(167, 139, 250, .5); }
.aba[aria-selected="true"]::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--azul);
}
.aba-curto { display: none; }
.btn-leve {
  min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--linha-forte); white-space: nowrap;
  background: transparent; cursor: pointer; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
}
.btn-leve[aria-pressed="true"] { background: var(--branco); color: var(--preto); }
.nav-progresso { height: 2px; background: rgba(185, 187, 199, .12); }
.nav-progresso span {
  display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--violeta), var(--azul), var(--rosa));
}
@media (max-width: 640px) {
  .nav-miolo { gap: 8px; }
  .nav .marca { display: none; }
  .abas { justify-content: flex-start; }
  .aba { padding: 8px 14px; }
  .aba-longo { display: none; }
  .aba-curto { display: inline; }
  .btn-leve { margin-left: auto; padding: 6px 10px; font-size: .64rem; }
}

/* ---------- Abertura ---------- */
.heroi {
  position: relative; min-height: min(100svh, 900px); display: grid; place-items: center; text-align: center;
  padding: calc(var(--nav-altura) + 40px) var(--gutter-dir) 90px var(--gutter-esq);
}
.cap-inicio { padding-block: 0 clamp(80px, 12vh, 140px); }
.heroi-miolo { display: grid; justify-items: center; gap: 22px; max-width: 1100px; }
.heroi-titulo {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(2.3rem, 9vw, 8.2rem);
  line-height: .9; letter-spacing: -0.05em; font-variation-settings: "opsz" 96;
}
.heroi-titulo .letras { display: inline-block; white-space: nowrap; }
.heroi-titulo .letra { display: inline-block; }
.heroi-titulo .letra--hifen { color: var(--violeta); }
.heroi-frase { font-family: var(--f-serifa); font-style: italic; font-size: clamp(1.4rem, 2.8vw, 2.1rem); line-height: 1.2; }
.heroi-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.heroi-rotulo, .heroi-dica, .heroi-frase { text-shadow: 0 1px 14px rgba(8, 9, 13, .95), 0 0 2px rgba(8, 9, 13, .9); }
.heroi-dica { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--prata); }
.pular-abertura {
  position: absolute; right: var(--gutter-dir); bottom: 28px; min-height: 40px; padding: 6px 14px;
  background: transparent; border: 1px solid var(--linha-forte); border-radius: 999px; cursor: pointer;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--prata);
}
.heroi.abertura-feita .pular-abertura { display: none; }

/* Animação de entrada do título (só quando o movimento está liberado) */
.heroi.abrindo .letra { animation: letra 1.1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 70ms + 200ms); }
.heroi.abrindo .heroi-frase { animation: subir 1s ease both 1.2s; }
.heroi.abrindo .heroi-botoes, .heroi.abrindo .heroi-dica, .heroi.abrindo .heroi-rotulo { animation: subir .9s ease both 1.6s; }
@keyframes letra {
  from { transform: translateY(0.35em) scale(1.08); opacity: .15; filter: blur(8px); letter-spacing: .1em; }
  to { transform: none; opacity: 1; filter: none; }
}
@keyframes subir { from { transform: translateY(16px); opacity: .25; } to { transform: none; opacity: 1; } }

.prologo-miolo { display: grid; gap: clamp(36px, 5vw, 64px); }
.mega {
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-mega); line-height: .86;
  letter-spacing: -0.055em; text-transform: uppercase; display: grid;
}
.mega span:nth-child(2) { color: transparent; -webkit-text-stroke: 1.5px var(--prata); padding-left: .6em; }
.mega span:nth-child(3) { color: var(--violeta); padding-left: 1.2em; }
@media (max-width: 700px) { .mega span:nth-child(2), .mega span:nth-child(3) { padding-left: 0; } }
.prologo-texto { display: grid; gap: 16px; max-width: 46ch; justify-self: end; }
@media (max-width: 700px) { .prologo-texto { justify-self: start; } }
.assinatura { font-family: var(--f-serifa); font-style: italic; font-size: 1.45rem; line-height: 1.3; color: var(--rosa); }

/* Entrada suave dos títulos ao rolar (parte de um estado visível) */
.js .entra { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .entra:not(.visto) { transform: translateY(26px); }
html.modo-leve .entra:not(.visto) { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .entra:not(.visto) { transform: none; } }

/* ---------- Aviso ---------- */
.aviso {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  transform: translate(-50%, 140%); max-width: calc(100% - 32px);
  background: var(--branco); color: var(--preto); padding: 12px 20px; border-radius: 999px; font-weight: 600;
  box-shadow: var(--sombra); transition: transform .35s ease; pointer-events: none; text-align: center;
}
.aviso.ativo { transform: translate(-50%, 0); }
.aviso:empty { display: none; }