/* ===================================================================
   Lirabook — site (página inicial) · spec v8.7, Direção D2 "A história da página"
   Protótipos e decisões: docs/specs/prototipos/site/ e docs/specs/spec-v8.7-site.md
   Tokens = os do app. Desempenho: só transform/opacity animam; sem filter em
   áreas grandes. O ícone do Lirabook NUNCA leva border-radius (já tem o próprio).
   =================================================================== */
/* Protótipos do site (spec v8.7) — base comum às direções A, B, C e ao painel.
   Tokens = os do site atual (site/styles.css), para comparar só o LAYOUT. */
:root {
  --amarelo: #F5C400;
  --amarelo-hover: #E6B800;
  --amarelo-texto: #7A6200;
  --amarelo-suave: #FFFBE6;
  --amarelo-claro: #FFF3B0;
  --chumbo: #3D3D3D;
  --cinza-escuro: #2A2A2A;
  --cinza-medio: #6B6B6B;
  --cinza-claro: #BCBCBC;
  --papel: #F2F0EB;
  --papel-2: #ECE8E0;
  --mesa: #E4DFD4;
  --mesa-ponto: rgba(122, 98, 0, 0.07);
  --superficie-1: #FAFAF7;
  --branco-papel: #FFFEFB;
  --cortica: #D4B896;
  --cortica-escura: #B8976E;
  --verde: #D4EDDA;
  --azul: #CCE5FF;
  --lilas: #E8D5FF;
  --rosa: #FFD6D6;
  --corretor: #D0352B;
  --font-titulo: 'Lora', Georgia, serif;
  --font-corpo: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --shadow-card: 2px 3px 10px rgba(61, 61, 61, 0.10);
  --shadow-painel: 0 6px 26px rgba(61, 61, 61, 0.10);
  --shadow-elevado: 0 12px 40px rgba(61, 61, 61, 0.16);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-corpo); color: var(--chumbo); background: var(--papel);
  line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.serif { font-family: var(--font-titulo); }



/* Botões, iguais aos do site atual */
.btn {
  display: inline-block; font: 600 16px/1 var(--font-corpo); text-decoration: none;
  padding: 14px 26px; border-radius: 22px; border: 1.5px solid transparent; cursor: pointer;
}
.btn-primario { background: var(--amarelo); color: var(--cinza-escuro); box-shadow: var(--shadow-card); }
.btn-secundario { background: transparent; color: var(--chumbo); border-color: var(--cinza-claro); }

/* Entrada ao rolar (comum.js marca .visivel) */
.revela { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.revela.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revela { opacity: 1; transform: none; }
}

/* celular: cabeçalho só com a marca e o botão; nada passa da largura da tela */
@media (max-width: 560px) {
  .topo nav a:not(.btn) { display: none; }
  .topo { padding: 16px; }
  .topo img { height: 26px; }
  main, section { overflow-x: clip; }
}

/* ===== A amostra (o trecho que vira livro) ===== */
/* A AMOSTRA — o trecho de história que vira livro (spec v8.7).
   Um só markup; o estado vem de [data-estado="1..5"] no .am:
   1 rascunho · 2 organizado · 3 revisado · 4 diagramado · 5 pronto para a gráfica.
   Tamanho: tudo em em; quem usa define o font-size do .am. */
.am { position: relative; font-size: 16px; padding: 1.4em 3.2em 1.4em 1.4em; }
.am-folha {
  position: relative; background: var(--branco-papel); color: var(--cinza-escuro);
  border-radius: 6px; box-shadow: var(--shadow-painel);
  padding: 2.2em 2.2em 2.6em; font-family: var(--font-titulo); font-size: 1em; line-height: 1.7;
  transition: padding .35s var(--ease), border-radius .35s var(--ease), transform .35s var(--ease), box-shadow .6s;
  max-width: 30em; margin: 0 auto;
}
.am-tit { font: 600 1.25em/1.3 var(--font-titulo); margin-bottom: .8em; transition: all .35s var(--ease); }
.am p { margin-bottom: .7em; transition: all .35s var(--ease); text-align: left; }
.md { color: var(--cinza-claro); font-family: var(--font-mono); font-size: .82em; transition: opacity .4s, font-size .4s; }
.am-nota-txt { color: var(--cinza-medio); font-style: italic; background: var(--amarelo-claro); border-radius: 3px; padding: 0 .2em; transition: all .4s; }
.am-cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--cinza-escuro); vertical-align: -.2em; margin-left: 1px; animation: am-pisca 1s steps(1) infinite; }
@keyframes am-pisca { 50% { opacity: 0; } }

/* elementos que só aparecem em certos estados */
.am-cabeca, .am-folio, .am-marcas, .am-selo, .am-nota-marca, .am-balao, .am-ouvir, .am-certo, .am-ficha, .am-fios { opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.am-certo { display: none; }
.am-cabeca { position: absolute; top: 1.1em; left: 0; right: 0; text-align: center; font: italic .62em/1 var(--font-titulo); letter-spacing: .08em; color: var(--cinza-medio); }
.am-folio { position: absolute; bottom: 1em; left: 0; right: 0; text-align: center; font: .68em/1 var(--font-titulo); color: var(--cinza-medio); }

/* 2 · organizado: wikilinks + fichas da Biblioteca ligadas por fios */
.am-wl { transition: all .4s; }
.am[data-estado="2"] .am-wl, .am[data-estado="3"] .am-wl {
  text-decoration-line: underline; text-decoration-color: var(--cortica-escura);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.am:not([data-estado="1"]) .md { opacity: 0; font-size: 0; }
.am-ficha {
  position: absolute; z-index: 3; width: 9.5em; font-family: var(--font-corpo); font-size: .72em; line-height: 1.4;
  background: var(--superficie-1); border: 1px solid var(--cortica); border-radius: 8px;
  padding: .7em .8em; box-shadow: var(--shadow-card);
}
.am-ficha b { display: block; font-size: 1.1em; color: var(--cinza-escuro); }
.am-ficha i { font-style: normal; font-size: .85em; font-weight: 600; padding: .1em .5em; border-radius: 10px; }
.am-ficha.f1 { right: -1.2em; top: 18%; transform: rotate(3deg) translateX(1em); }
.am-ficha.f1 i { background: var(--verde); }
.am-ficha.f2 { right: -.6em; top: 56%; transform: rotate(-2deg) translateX(1em); }
.am-ficha.f2 i { background: var(--azul); }
.am-fios { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; }
.am-fios path { fill: none; stroke: var(--cortica-escura); stroke-width: 1.6; stroke-dasharray: 5 5; }
.am[data-estado="2"] .am-folha { transform: translateX(-4.5em); }
.am[data-estado="2"] .am-ficha { opacity: 1; transform: rotate(var(--g, 2deg)); }
.am[data-estado="2"] .am-ficha.f2 { --g: -2deg; }
.am[data-estado="2"] .am-fios { opacity: 1; }

/* 3 · revisado: sublinhado do corretor + balão + frase sendo lida */
.am-erro { position: relative; }
.am[data-estado="3"] .am-errado {
  text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: var(--corretor);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.am-balao {
  position: absolute; left: 50%; top: 1.9em; transform: translate(-50%, 6px); white-space: nowrap; z-index: 4;
  font: .7em/1 var(--font-corpo); color: var(--cinza-medio);
  background: var(--superficie-1); border: 1px solid var(--cortica); border-radius: 8px; box-shadow: var(--shadow-card); padding: .7em .9em;
}
.am-balao b { color: var(--cinza-escuro); margin-left: .3em; }
.am[data-estado="3"] .am-balao { opacity: 1; transform: translate(-50%, 0); }
.am-frase { transition: background .5s; border-radius: 3px; }
.am[data-estado="3"] .am-frase { background: var(--amarelo-claro); box-shadow: 0 0 0 .15em var(--amarelo-claro); }
.am-ouvir {
  position: absolute; top: .8em; right: .8em; font: 600 .66em/1 var(--font-corpo);
  background: var(--amarelo); color: var(--cinza-escuro); border-radius: 20px; padding: .55em .9em;
}
.am[data-estado="3"] .am-ouvir { opacity: 1; }

/* 4 · diagramado: página de livro */
.am[data-estado="4"] .am-folha, .am[data-estado="5"] .am-folha { border-radius: 2px; padding: 3.6em 2.4em 3.4em; max-width: 21em; min-height: 29.7em; }
.am[data-estado="4"] .am-tit, .am[data-estado="5"] .am-tit { text-align: center; font-weight: 500; font-size: 1.05em; letter-spacing: .02em; margin: .6em 0 1.4em; }
.am[data-estado="4"] p, .am[data-estado="5"] p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-indent: 1.4em; margin-bottom: 0; font-size: .92em; }
.am[data-estado="4"] p:first-of-type, .am[data-estado="5"] p:first-of-type { text-indent: 0; }
.am[data-estado="4"] p:first-of-type::first-letter, .am[data-estado="5"] p:first-of-type::first-letter {
  float: left; font-size: 3.4em; line-height: .82; padding: .06em .08em 0 0; color: var(--amarelo-texto);
}
.am[data-estado="4"] .am-cabeca, .am[data-estado="5"] .am-cabeca,
.am[data-estado="4"] .am-folio, .am[data-estado="5"] .am-folio { opacity: 1; }
.am[data-estado="4"] .am-errado, .am[data-estado="5"] .am-errado { display: none; }
.am[data-estado="4"] .am-certo, .am[data-estado="5"] .am-certo { display: inline; opacity: 1; }
.am[data-estado="4"] .am-cursor, .am[data-estado="5"] .am-cursor,
.am[data-estado="4"] .am-nota-txt, .am[data-estado="5"] .am-nota-txt { display: none; }
.am-nota-marca {
  position: absolute; right: -1.1em; top: 52%; width: 1.7em; height: 1.7em; border-radius: 4px 4px 4px 0;
  background: var(--amarelo); box-shadow: var(--shadow-card); font: 700 .7em/1.7em var(--font-corpo); text-align: center; color: var(--cinza-escuro);
}
.am[data-estado="4"] .am-nota-marca { opacity: 1; }

/* 5 · pronto para a gráfica: marcas de corte + selo; a nota não sai na impressão */
.am-marcas { position: absolute; inset: -1.2em; }
.am-marcas i { position: absolute; width: 1em; height: 1em; border-color: var(--cinza-escuro); border-style: solid; border-width: 0; }
.am-marcas i:nth-child(1) { top: 0; left: 0; border-right-width: 1px; border-bottom-width: 1px; }
.am-marcas i:nth-child(2) { top: 0; right: 0; border-left-width: 1px; border-bottom-width: 1px; }
.am-marcas i:nth-child(3) { bottom: 0; left: 0; border-right-width: 1px; border-top-width: 1px; }
.am-marcas i:nth-child(4) { bottom: 0; right: 0; border-left-width: 1px; border-top-width: 1px; }
.am[data-estado="5"] .am-marcas { opacity: 1; }
.am[data-estado="5"] .am-folha { box-shadow: none; outline: 1px solid var(--cortica); }
.am-selo {
  position: absolute; z-index: 5; right: 1.6em; bottom: -.4em; transform: rotate(-4deg) scale(1.4);
  font: 700 .72em/1.3 var(--font-corpo); text-align: center; letter-spacing: .04em;
  background: var(--verde); color: var(--cinza-escuro); border: 1.5px solid var(--cinza-escuro); border-radius: 8px; padding: .55em .9em;
}
.am-selo small { display: block; font-weight: 500; letter-spacing: 0; font-size: .85em; }
.am[data-estado="5"] .am-selo { opacity: 1; transform: rotate(-4deg) scale(1); transition-timing-function: cubic-bezier(.3, 1.6, .5, 1); }

/* celular: as fichas encostam na borda sem empurrar a página para fora */
@media (max-width: 820px) {
  .am[data-estado="2"] .am-folha { transform: translateX(-2.6em); }
  .am-ficha { width: 8.2em; font-size: .66em; }
  .am-ficha.f1 { right: -.4em; } .am-ficha.f2 { right: 0; }
}

/* ===== Página ===== */

  /* Desempenho (Retorno 1): nada de filter/drop-shadow; só transform e opacity animam. */
  body { background: var(--mesa); }
  .mesa { background: radial-gradient(var(--mesa-ponto) 1.2px, transparent 1.6px) 0 0 / 16px 16px, var(--mesa); }
  .novo { display: inline-block; font: 800 10px/1 var(--font-corpo); letter-spacing: .08em; text-transform: uppercase; background: var(--amarelo); color: var(--cinza-escuro); padding: 4px 7px; border-radius: 8px; vertical-align: 3px; white-space: nowrap; }
  .mac { display: inline-block; font: 700 10px/1 var(--font-corpo); letter-spacing: .08em; text-transform: uppercase; background: var(--cinza-escuro); color: var(--amarelo); padding: 4px 7px; border-radius: 8px; vertical-align: 3px; white-space: nowrap; }

  /* ============ HERO: a mesa à noite, a luz da luminária, o livro ============ */
  .hero {
    position: relative; min-height: 100vh; color: var(--papel); overflow: hidden;
    background: radial-gradient(ellipse 60% 55% at 72% 46%, rgba(245, 196, 0, .20), transparent 70%), radial-gradient(ellipse 90% 80% at 72% 50%, #3a3326, var(--cinza-escuro) 70%);
    display: flex; flex-direction: column;
  }
  .hero .topo { display: flex; align-items: center; justify-content: space-between; max-width: 1240px; width: 100%; margin: 0 auto; padding: 22px 28px; }
  .hero .topo img { height: 30px; }
  .hero .topo nav { display: flex; gap: 22px; align-items: center; font-size: 15px; font-weight: 500; color: var(--cortica); }
  .hero .topo nav a { text-decoration: none; }
  .hero-grade { flex: 1; max-width: 1240px; width: 100%; margin: 0 auto; padding: 10px 28px 70px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 40px; align-items: center; }
  .hero h1 { font: 700 clamp(46px, 6.4vw, 92px)/1 var(--font-titulo); letter-spacing: -.015em; }
  .hero h1 em { color: var(--amarelo); display: block; }
  .hero .sub { font-size: clamp(18px, 1.7vw, 22px); color: #E5DFD1; margin: 22px 0 26px; max-width: 34em; line-height: 1.55; }
  .verbos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 30px; }
  .verbos a { text-decoration: none; font: 600 15px/1 var(--font-corpo); padding: 10px 14px; border-radius: 20px; border: 1.5px solid rgba(212, 184, 150, .5); color: var(--papel); transition: background .2s, border-color .2s; }
  .verbos a:hover { background: rgba(245, 196, 0, .14); border-color: var(--amarelo); }
  .verbos i { color: var(--cortica); font-style: normal; }
  .acoes { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
  .btn-grande { font-size: 19px; padding: 18px 30px; border-radius: 30px; }
  .btn-abrir { position: relative; }
  .btn-abrir::after { content: ""; position: absolute; inset: -6px; border-radius: 36px; border: 2px solid var(--amarelo); opacity: 0; animation: anel 2.2s var(--ease) 2.4s 3; }
  @keyframes anel { 0% { opacity: .8; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.18); } }
  .btn-claro { color: var(--papel); border-color: rgba(212, 184, 150, .6); }
  .privado { display: flex; gap: 12px; align-items: center; margin-top: 30px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(212, 184, 150, .25); font-size: 15px; color: #E5DFD1; max-width: 34em; }
  .privado svg { flex: none; width: 30px; height: 30px; fill: var(--amarelo); }
  .privado b { color: var(--papel); }

  /* O livro 3D: a capa gira na lombada e revela o sumário. Só transform. */
  .palco-livro { display: flex; justify-content: center; }
  .livro { --pw: min(290px, 21vw); --ph: calc(var(--pw) * 1.42); position: relative; width: calc(var(--pw) * 2); height: var(--ph); perspective: 2400px; transform: translateX(calc(var(--pw) * -.5)); transition: transform 1.1s var(--ease); }
  .livro.aberto { transform: none; }
  .pg { position: absolute; top: 0; width: var(--pw); height: var(--ph); background: var(--branco-papel); color: var(--cinza-escuro); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .7); }
  .pg-dir { left: 50%; border-radius: 0 6px 6px 0; background-image: linear-gradient(90deg, rgba(0,0,0,.10), transparent 8%); padding: 8% 9% 7%; }
  .capa { position: absolute; top: 0; left: 50%; width: var(--pw); height: var(--ph); transform-origin: left center; transform-style: preserve-3d; transition: transform 1.3s cubic-bezier(.6, .05, .25, 1); z-index: 3; }
  .livro.aberto .capa { transform: rotateY(-180deg); }
  .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 0 8px 8px 0; }
  .frente {
    background: linear-gradient(90deg, rgba(0,0,0,.4) 0 3%, rgba(255,255,255,.07) 3.5% 4.2%, transparent 5%), linear-gradient(155deg, #4a412f, #2b2822 65%);
    box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 16% 12% 12%; text-align: center; color: var(--papel);
  }
  .frente img { width: 30%; }  /* o ícone já tem o próprio canto arredondado: nada de border-radius por cima */
  .frente b { font: 600 calc(var(--pw) * .1)/1.15 var(--font-titulo); }
  .frente b em { color: var(--amarelo); display: block; }
  .frente span { font: 600 calc(var(--pw) * .036)/1.6 var(--font-corpo); letter-spacing: .18em; text-transform: uppercase; color: var(--cortica); }
  .verso-capa { transform: rotateY(180deg); border-radius: 6px 0 0 6px; background: var(--branco-papel); background-image: linear-gradient(270deg, rgba(0,0,0,.10), transparent 8%); color: var(--cinza-escuro); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 12%; }
  .verso-capa p { font: italic 500 calc(var(--pw) * .068)/1.35 var(--font-titulo); }
  .verso-capa .seta { margin-top: 8%; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 calc(var(--pw) * .05)/1.2 var(--font-corpo); color: var(--amarelo-texto); text-decoration: none; }
  .verso-capa .seta svg { width: calc(var(--pw) * .16); height: calc(var(--pw) * .16); animation: pula 1.1s var(--ease) infinite; }
  @keyframes pula { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
  .sumario h2 { font: 600 calc(var(--pw) * .075)/1 var(--font-titulo); margin-bottom: 7%; }
  .sumario a { display: flex; align-items: baseline; gap: 6px; text-decoration: none; padding: 3.2% 0; font: 500 calc(var(--pw) * .052)/1.25 var(--font-titulo); border-bottom: 1px dotted var(--cinza-claro); transition: background .2s; }
  .sumario a:hover { background: var(--amarelo-suave); }
  .sumario a > span:first-child { color: var(--amarelo-texto); width: 1.2em; flex: none; }
  .sumario a small { margin-left: auto; display: flex; gap: 4px; }
  .sumario .novo, .sumario .mac { font-size: calc(var(--pw) * .028); padding: 3px 5px; }

  /* ============ MARCADOR: a fita do livro, sempre visível ============ */
  .fita { position: fixed; right: 18px; top: 50%; z-index: 50; transform: translate(220%, -50%); transition: transform .45s var(--ease); display: flex; flex-direction: column; gap: 6px; }
  .fita.visivel { transform: translate(0, -50%); }
  .fita a { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; text-decoration: none; font: 700 15px/1 var(--font-titulo); background: var(--superficie-1); border: 1px solid var(--cortica); color: var(--cinza-medio); box-shadow: var(--shadow-card); transition: background .25s, color .25s, transform .25s var(--ease); }
  .fita a.atual { background: var(--amarelo); border-color: var(--amarelo); color: var(--cinza-escuro); transform: translateX(-6px); }
  .fita a span { position: absolute; right: 50px; white-space: nowrap; font: 600 13px var(--font-corpo); background: var(--cinza-escuro); color: var(--papel); padding: 7px 10px; border-radius: 8px; opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; pointer-events: none; }
  .fita a:hover span, .fita a.atual span { opacity: 1; transform: none; }
  .fita:not(.visivel) a span { opacity: 0; } /* fita escondida: a etiqueta some junto */

  /* ============ CAPÍTULOS: página dupla + papéis soltos ============ */
  .cap { max-width: 1180px; margin: 0 auto; padding: 90px 28px 40px; scroll-margin-top: 10px; }
  .lamina { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
  .pagina { position: relative; background: var(--branco-papel); min-height: 640px; padding: 70px 58px 74px; box-shadow: 0 18px 40px -22px rgba(61, 61, 61, .5); }
  .pagina.esq { border-radius: 6px 0 0 6px; background-image: linear-gradient(270deg, rgba(0,0,0,.08), transparent 7%); }
  .pagina.dir { border-radius: 0 6px 6px 0; background-image: linear-gradient(90deg, rgba(0,0,0,.08), transparent 7%); }
  .cab { position: absolute; top: 30px; left: 58px; right: 58px; font: italic 12px/1 var(--font-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--cinza-medio); }
  .dir .cab { text-align: right; }
  .folio { position: absolute; bottom: 28px; font: 13px var(--font-titulo); color: var(--cinza-medio); }
  .esq .folio { left: 58px; } .dir .folio { right: 58px; }
  .num { font: 400 104px/1 var(--font-titulo); color: var(--amarelo-texto); }
  .pagina h2 { font: 600 clamp(32px, 3.4vw, 44px)/1.1 var(--font-titulo); color: var(--cinza-escuro); margin: 8px 0 18px; }
  .pagina .intro { font: 19px/1.7 var(--font-titulo); color: var(--cinza-escuro); margin-bottom: 22px; }
  .recursos { list-style: none; display: grid; gap: 14px; }
  .recursos li { font-size: 16px; color: var(--cinza-medio); padding-left: 22px; position: relative; line-height: 1.5; }
  .recursos li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 2px; background: var(--cortica); transform: rotate(45deg); }
  .recursos li.n::before { background: var(--amarelo); }
  .recursos b { color: var(--cinza-escuro); font-weight: 600; }

  /* Os papéis: caem na página quando o capítulo entra (rápido, em sequência) */
  .visual { position: relative; height: 100%; min-height: 480px; display: flex; align-items: center; justify-content: center; }
  .papel { position: absolute; z-index: 4; opacity: 0; transform: translateY(-26px) rotate(var(--g, 0deg)) scale(1.05); transition: opacity .32s var(--ease), transform .4s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
  .cap.entrou .papel { opacity: 1; transform: rotate(var(--g, 0deg)); }
  .post { width: 150px; padding: 18px 14px 14px; font: italic 16px/1.35 var(--font-titulo); color: var(--cinza-escuro); box-shadow: 2px 5px 10px rgba(0,0,0,.16); }
  .post::before { content: ""; position: absolute; top: -6px; left: 50%; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: var(--corretor); box-shadow: 0 2px 2px rgba(0,0,0,.3); }
  .post b { display: block; font: 700 11px/1 var(--font-corpo); font-style: normal; letter-spacing: .07em; text-transform: uppercase; color: var(--cinza-medio); margin-bottom: 7px; }
  .cartao { background: var(--superficie-1); border: 1px solid var(--cortica); border-radius: 10px; padding: 14px 16px; box-shadow: 0 8px 18px -8px rgba(61,61,61,.35); font-size: 14px; color: var(--cinza-medio); }
  .cartao b { display: block; font: 600 16px/1.25 var(--font-titulo); color: var(--cinza-escuro); margin-bottom: 4px; }
  .fita-adesiva { position: absolute; top: -11px; left: 50%; width: 70px; height: 22px; margin-left: -35px; background: rgba(255, 243, 176, .8); transform: rotate(-4deg); }
  .verde { background: var(--verde); } .azul { background: var(--azul); } .rosa { background: var(--rosa); } .lilas { background: var(--lilas); } .amarela { background: var(--amarelo-claro); }
  .visual .am { font-size: 13px; width: 100%; position: relative; z-index: 2; }

  /* peças desenhadas específicas */
  .linha-tempo { width: 270px; }
  .linha-tempo .atos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
  .linha-tempo .atos div { background: var(--papel); border-radius: 6px; padding: 6px; display: grid; gap: 4px; }
  .linha-tempo .atos i { height: 14px; border-radius: 3px; background: var(--azul); }
  .linha-tempo .atos i:nth-child(2n) { background: var(--verde); }
  .mapa-mini { width: 190px; height: 150px; border-radius: 10px; background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 75%, #fff, transparent), radial-gradient(1px 1px at 85% 65%, #fff, transparent), #1f2340; overflow: hidden; box-shadow: 0 10px 20px -8px rgba(0,0,0,.45); }
  .mapa-mini .astro { position: absolute; border-radius: 50%; }
  .mapa-mini .a1 { width: 54px; height: 54px; left: 22px; top: 40px; background: radial-gradient(circle at 35% 35%, var(--amarelo-claro), var(--amarelo-hover)); }
  .mapa-mini .a2 { width: 30px; height: 30px; right: 30px; top: 22px; background: radial-gradient(circle at 35% 35%, var(--lilas), #8f7bb8); }
  .mapa-mini svg { position: absolute; inset: 0; }
  .mapa-mini path { fill: none; stroke: var(--amarelo); stroke-width: 2.4; stroke-dasharray: 5 4; }
  .mapa-mini span { position: absolute; left: 10px; bottom: 8px; font: 700 10px var(--font-corpo); letter-spacing: .08em; color: var(--papel); }
  .revisao-lista { width: 250px; }
  .revisao-lista .item { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px dashed var(--cortica); font-size: 13px; }
  .revisao-lista .item s { color: var(--corretor); text-decoration-thickness: 1px; }
  .revisao-lista .item b { display: inline; font: 600 13px var(--font-corpo); color: var(--cinza-escuro); margin: 0; }
  .onda { width: 220px; display: flex; align-items: center; gap: 12px; }
  .onda svg { width: 120px; height: 34px; }
  .onda rect { fill: var(--amarelo-hover); }
  .anel-meta { width: 170px; text-align: center; }
  .anel-meta svg { width: 110px; height: 110px; transform: rotate(-90deg); }
  .anel-meta circle { fill: none; stroke-width: 11; }
  .anel-meta .t { stroke: var(--papel-2); } .anel-meta .p { stroke: var(--amarelo); stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 90; }
  .gantt { width: 260px; }
  .gantt div { height: 12px; border-radius: 6px; background: var(--cortica); margin-top: 8px; }
  .recibo { width: 190px; background: var(--branco-papel); padding: 16px 16px 20px; font: 13px/1.6 var(--font-mono); color: var(--cinza-escuro); box-shadow: 0 8px 18px -8px rgba(61,61,61,.35); clip-path: polygon(0 0, 100% 0, 100% 100%, 92% 96%, 84% 100%, 76% 96%, 68% 100%, 60% 96%, 52% 100%, 44% 96%, 36% 100%, 28% 96%, 20% 100%, 12% 96%, 4% 100%, 0 96%); }
  .recibo div { display: flex; justify-content: space-between; }
  .janelas { width: 230px; height: 140px; }
  .janelas div { position: absolute; width: 150px; height: 96px; border-radius: 8px; background: var(--superficie-1); border: 1px solid var(--cortica); box-shadow: 0 8px 16px -8px rgba(61,61,61,.4); overflow: hidden; }
  .janelas div::before { content: ""; display: block; height: 16px; background: var(--cinza-escuro); }
  .janelas div span { display: block; padding: 8px 10px; font: 600 12px var(--font-titulo); }
  .capa-aberta { width: 300px; height: 150px; display: grid; grid-template-columns: 1fr 22px 1fr; box-shadow: 0 10px 22px -10px rgba(0,0,0,.45); }
  .capa-aberta div { background: linear-gradient(155deg, #4a412f, #2b2822); color: var(--papel); display: grid; place-items: center; font: 600 12px var(--font-titulo); text-align: center; padding: 8px; }
  .capa-aberta .lombada { background: #231f19; writing-mode: vertical-rl; font-size: 9px; letter-spacing: .1em; color: var(--cortica); }
  .capa-aberta .frente-c em { color: var(--amarelo); display: block; font-size: 16px; }
  .selo { padding: 10px 16px; border: 2.5px solid var(--amarelo-texto); color: var(--amarelo-texto); border-radius: 10px; background: rgba(255, 251, 230, .92); font: 800 15px/1.25 var(--font-corpo); text-align: center; letter-spacing: .04em; }
  .selo small { display: block; font-weight: 500; letter-spacing: 0; }
  .etiqueta { padding: 8px 12px; border-radius: 8px; font: 700 13px var(--font-mono); background: var(--superficie-1); border: 1px solid var(--cortica); box-shadow: var(--shadow-card); }

  /* ============ CAPÍTULO 6: privacidade, em destaque ============ */
  .cap-privado .pagina { background-color: var(--cinza-escuro); color: var(--papel); }
  .cap-privado .pagina.esq { background-image: linear-gradient(270deg, rgba(0,0,0,.35), transparent 7%); }
  .cap-privado .pagina.dir { background-image: linear-gradient(90deg, rgba(0,0,0,.35), transparent 7%); }
  .cap-privado h2 { color: var(--papel); }
  .cap-privado .intro { color: #E5DFD1; }
  .cap-privado .cab, .cap-privado .folio { color: var(--cortica); }
  .cap-privado .num { color: var(--amarelo); }
  .promessas { list-style: none; display: grid; gap: 16px; margin-top: 10px; }
  .promessas li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: 16px; color: #E5DFD1; line-height: 1.5; }
  .promessas li svg { width: 24px; height: 24px; fill: var(--amarelo); margin-top: 2px; }
  .promessas b { color: var(--papel); display: block; font: 600 18px/1.3 var(--font-titulo); }
  .pasta { width: 300px; background: var(--superficie-1); color: var(--cinza-escuro); border-radius: 10px; padding: 16px 18px; font: 14px/1.9 var(--font-mono); box-shadow: 0 16px 30px -12px rgba(0,0,0,.6); }
  .pasta .t { font: 700 12px var(--font-corpo); letter-spacing: .08em; text-transform: uppercase; color: var(--cinza-medio); margin-bottom: 6px; }
  .pasta div { padding-left: 18px; } .pasta div.r { padding-left: 0; }
  .fonte { margin-top: 26px; font-size: 13px; color: var(--cortica); }
  .fonte a { color: var(--amarelo); }

  /* ============ FECHAMENTO ============ */
  .convite { padding: 100px 28px 110px; }
  .convite-bloco { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center;
    background: var(--superficie-1); border: 1px solid var(--cortica); border-radius: 26px; padding: 56px; box-shadow: var(--shadow-painel); }
  .convite-kicker { font: 600 12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amarelo-texto); }
  .convite h2 { font: 700 clamp(32px, 3.8vw, 48px)/1.1 var(--font-titulo); color: var(--cinza-escuro); margin: 12px 0 16px; }
  .convite-txt p { font-size: 17px; color: var(--cinza-medio); margin-bottom: 22px; max-width: 30em; }
  .convite-txt ul { list-style: none; display: grid; gap: 10px; }
  .convite-txt li { display: flex; gap: 10px; align-items: center; font-weight: 500; color: var(--chumbo); }
  .convite-txt li svg { width: 22px; height: 22px; fill: var(--amarelo-hover); flex: none; }
  .convite-form { display: grid; gap: 16px; background: var(--papel); border-radius: 18px; padding: 28px; }
  .convite-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--cinza-escuro); }
  .convite-form input, .convite-form select { font: 16px var(--font-corpo); padding: 13px 14px; border: 1.5px solid var(--cinza-claro); border-radius: 10px; background: var(--superficie-1); color: var(--chumbo); }
  .convite-form input:focus, .convite-form select:focus { outline: none; border-color: var(--amarelo); box-shadow: 0 0 0 3px var(--amarelo-claro); }
  .convite-form button { width: 100%; border: none; }
  .convite-form small { font-size: 13px; color: var(--cinza-medio); text-align: center; }

  .rodape { background: var(--cinza-escuro); color: #E5DFD1; padding: 64px 28px 30px; }
  .rodape-grade { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
  .rodape-marca img { height: 40px; margin-bottom: 12px; }
  .rodape-marca p { font: italic 18px var(--font-titulo); color: var(--cortica); }
  .rodape nav { display: grid; gap: 10px; align-content: start; font-size: 15px; }
  .rodape nav b { font: 700 12px var(--font-corpo); letter-spacing: .1em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 4px; }
  .rodape nav a { text-decoration: none; color: #E5DFD1; }
  .rodape nav a:hover { color: var(--papel); text-decoration: underline; text-decoration-color: var(--amarelo); text-underline-offset: 3px; }
  .rodape-fim { max-width: 1080px; margin: 44px auto 0; padding-top: 20px; border-top: 1px solid rgba(212, 184, 150, .25); font-size: 13px; color: var(--cortica); }
  /* Crédito na paleta do Entrequadro (ADR-010 deles, adendo 5): rodapé em "noite", logo escuro */
  .credito { --eq-noite: #331055; --eq-lavanda: #D2BBE8; --eq-amarelo: #F9FD59;
    background: var(--eq-noite); text-align: center; padding: 26px 20px 30px; }
  .credito a { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; text-decoration: none; }
  .credito img { height: 46px; width: auto; }
  .credito-txt { display: grid; text-align: left; font-size: 14px; line-height: 1.35; color: var(--eq-lavanda); padding-left: 18px; border-left: 1px solid rgba(210, 187, 232, .35); }
  .credito-txt b { font-weight: 600; color: var(--eq-amarelo); }
  .credito a:hover .credito-txt { color: #fff; }
  .colofao { font: italic 16px/1.7 var(--font-titulo); color: var(--cinza-medio); text-align: center; }
  .colofao .orn { font-size: 30px; color: var(--amarelo-texto); font-style: normal; display: block; margin-bottom: 14px; }

  /* ============ RETORNO 2: grade de letras, prólogo, reviravolta, epílogo ============ */
  .grade { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .topo-grande { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; max-width: 1240px; margin: 0 auto; padding: 26px 28px; }
  .topo-grande img { height: 52px; }
  .topo-grande nav { display: flex; gap: 22px; align-items: center; font-size: 15px; font-weight: 500; color: var(--cortica); }
  .topo-grande nav a { text-decoration: none; }
  .prologo { position: relative; height: 100vh; min-height: 560px; background: radial-gradient(ellipse 70% 60% at 50% 50%, #332d22, #1f1d19 75%); color: var(--papel); overflow: hidden; }
  .prologo .rodape-prologo { position: absolute; left: 0; right: 0; bottom: 6vh; z-index: 3; text-align: center; padding: 0 20px; }
  .prologo .rodape-prologo p { font: italic 500 clamp(20px, 2.4vw, 28px)/1.4 var(--font-titulo); color: #E5DFD1; margin-bottom: 18px; }
  .prologo .rodape-prologo p b { font-style: normal; color: var(--amarelo); }
  .comecar { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; font: 700 17px var(--font-corpo); color: var(--amarelo); }
  .comecar svg { width: 46px; height: 46px; fill: var(--amarelo); animation: pula 1.1s var(--ease) infinite; }
  .dica-luz { position: absolute; z-index: 3; right: 28px; bottom: 6vh; font: 500 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cortica); opacity: .8; }
  .hero { padding-top: 40px; }
  .hero .grade { opacity: .9; }
  .hero-grade { position: relative; z-index: 2; }

  .reviravolta { position: relative; height: 100vh; min-height: 560px; background: #1f1d19; color: var(--papel); overflow: hidden; display: flex; align-items: center; }
  .reviravolta .txt { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 28px; width: 100%; pointer-events: none; }
  .reviravolta .kicker { font: 600 13px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--amarelo); }
  .reviravolta h2 { font: 700 clamp(34px, 4.6vw, 64px)/1.08 var(--font-titulo); max-width: 11em; margin: 14px 0 18px; text-shadow: 0 2px 24px #1f1d19, 0 0 4px #1f1d19; }
  .reviravolta h2 em { color: var(--amarelo); }
  .reviravolta p { font-size: clamp(18px, 1.8vw, 22px); color: #E5DFD1; max-width: 26em; text-shadow: 0 0 12px #1f1d19; }

  .epilogo { position: relative; height: 92vh; min-height: 520px; background: #1f1d19; color: var(--papel); overflow: hidden; }
  .epilogo .txt { position: absolute; left: 0; right: 0; bottom: 8vh; z-index: 2; text-align: center; padding: 0 20px; }
  .epilogo p { font: italic 500 clamp(20px, 2.4vw, 28px)/1.4 var(--font-titulo); color: #E5DFD1; }
  .epilogo p b { font-style: normal; color: var(--amarelo); }

  /* ============ CELULAR ============ */
  @media (max-width: 900px) {
    .hero-grade { grid-template-columns: 1fr; gap: 34px; padding: 4px 18px 50px; text-align: left; }
    .hero-txt { display: contents; }
    .hero h1 { order: 1; } .palco-livro { order: 2; margin: 4px 0 6px; } .hero .sub { order: 3; margin: 0; }
    .verbos { order: 4; margin: 0; } .acoes { order: 5; } .privado { order: 6; margin-top: 0; }
    .hero-grade { gap: 22px; }
    .livro { --pw: 44vw; }
    .hero h1 { font-size: 48px; }
    .topo-grande { padding: 18px 16px; } .topo-grande img { height: 38px; } .topo-grande nav a:not(.btn) { display: none; }
    .dica-luz { display: none; }
    .reviravolta .txt { align-self: flex-end; padding-bottom: 8vh; }
    .verbos a { font-size: 14px; padding: 9px 12px; }
    .btn-grande { font-size: 18px; padding: 16px 24px; width: 100%; text-align: center; }
    .fita { top: auto; bottom: 10px; right: 50%; transform: translate(50%, 140%); flex-direction: row; background: var(--cinza-escuro); padding: 6px; border-radius: 14px; box-shadow: var(--shadow-elevado); }
    .fita.visivel { transform: translate(50%, 0); }
    .fita a { width: 38px; height: 38px; }
    .fita a.atual { transform: translateY(-4px); }
    .fita a span { display: none; }
    .cap { padding: 60px 12px 20px; }
    .lamina { grid-template-columns: 1fr; gap: 0; }
    .pagina { min-height: 0; padding: 58px 24px 60px; border-radius: 6px !important; background-image: none !important; }
    .lamina { gap: 12px; }
    .pagina:has(.visual) { order: 2; }
    .cab { left: 24px; right: 24px; top: 24px; }
    .esq .folio, .dir .folio { left: 0; right: 0; text-align: center; bottom: 22px; }
    .num { font-size: 72px; }
    .visual { min-height: 420px; }
    .visual .am { font-size: 11px; }
    .papel { scale: .82; }
    .convite { padding: 60px 12px 70px; }
    .convite-bloco { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px; border-radius: 20px; }
    .convite-form { padding: 20px; }
    .rodape { padding: 48px 20px 90px; }
    .rodape-grade { grid-template-columns: 1fr 1fr; gap: 28px; }
    .rodape-marca { grid-column: 1 / -1; }
    .credito img { height: 38px; }
    .credito-txt { padding-left: 0; border-left: 0; text-align: center; }
  }

/* ===== Site real (spec v8.7): formulário, leitor de tela ===== */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pote { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.convite-form[hidden], .form-ok[hidden], .form-aviso[hidden] { display: none; }
.form-aviso { font-size: 14px; color: var(--corretor); text-align: center; }
.form-ok { background: var(--verde); border: 1px solid var(--cortica); border-radius: 18px; padding: 32px 28px; text-align: center; }
.form-ok-icone { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--cinza-escuro); color: var(--amarelo); font: 700 22px var(--font-corpo); margin-bottom: 12px; }
.form-ok p { font-size: 17px; color: var(--cinza-escuro); }
.cf-turnstile { min-height: 0; }