/* ─────────────────────────────────────────────────────────────────────────
   Preparação de obra — área de autor.
   Assenta nos tokens de site-base.css (papel, tinta, vermelho, Fraunces).
   O autor chega aqui por um link privado para fazer UMA coisa, por isso a
   página não tem loja, menu de navegação nem rodapé: só o trabalho.
   ───────────────────────────────────────────────────────────────────────── */

.prep-body {
  background: var(--paper); min-height: 100vh;
  /* clip, não hidden: corta o que passa a direita do ecrã sem criar barra
     horizontal nem um contentor de scroll novo. */
  overflow-x: clip;
}

/* Os ecrãs de estado usam display:grid, que ganha ao [hidden] por omissão.
   Sem isto, o "a carregar" e o erro ficam visíveis por cima do formulário. */
[hidden] { display: none !important; }

/* ── Barra de topo ─────────────────────────────────────────────────────────
   Discreta de propósito: quem manda no ecrã é o livro. Sem maiúsculas
   espaçadas, sem pastilhas, sem números em círculos — os passos são palavras
   e o traço que os sublinha é o próprio progresso.
   ────────────────────────────────────────────────────────────────────────── */
.prep-topo {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250,247,242,.82);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.prep-topo-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 20px var(--gutter) 8px;
  display: flex; align-items: center; gap: 16px;
}
.prep-marca { height: 28px; width: auto; flex: 0 0 auto; opacity: .92; }
.prep-obra {
  font-family: var(--font-display); font-size: clamp(.98rem, 1.3vw, 1.16rem);
  font-weight: 600; letter-spacing: -.018em; line-height: 1.2; margin: 0;
  color: var(--ink); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prep-obra::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 1px; height: 15px; margin-right: 15px;
  background: var(--line-strong);
}
.prep-estado {
  margin: 0 0 0 auto; display: flex; align-items: center; gap: 7px;
  font-size: .8rem; color: var(--muted); white-space: nowrap; flex: 0 0 auto;
}
.prep-estado .ponto {
  width: 6px; height: 6px; border-radius: 999px; background: currentColor;
  opacity: .45; transition: background .3s ease, opacity .3s ease;
}
.prep-estado.a-guardar { color: #B08A1E; }
.prep-estado.guardado  { color: #1F7A4D; }
.prep-estado.erro      { color: var(--red-bright); }
.prep-estado.a-rever   { color: var(--red); font-weight: 600; }
.prep-estado.a-rever .ponto { opacity: 1; }

/* ── Modo editora ──────────────────────────────────────────────────────────
   A equipa abre o mesmo link, num iframe do backoffice, para ver o que o
   autor escreveu — e para corrigir, se for preciso. Edita tudo, como o autor;
   o que muda é o sinal de que não é o autor que está ali, e as duas decisões
   no fim. A capa não pisca porque a chamada de atenção era para quem escreve
   pela primeira vez. */
body.modo-verificacao .capa-escrita:placeholder-shown { animation: none; }
body.modo-verificacao .prep-topo { box-shadow: inset 0 -2px 0 var(--red); }
.prep-estado.a-guardar .ponto,
.prep-estado.guardado .ponto,
.prep-estado.erro .ponto { opacity: 1; }
.prep-estado.a-guardar .ponto { animation: pulsa 1.1s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .3; } }

/* ── A régua ───────────────────────────────────────────────────────────── */
.prep-regua { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.prep-lista {
  display: flex; gap: clamp(15px, 1.9vw, 30px); list-style: none; margin: 0;
  padding: 10px 0 14px; overflow-x: auto; scrollbar-width: none;
}
.prep-lista::-webkit-scrollbar { display: none; }
.prep-lista li { flex: 0 0 auto; }
.prep-lista button {
  position: relative; padding: 3px 0; white-space: nowrap;
  font-size: .87rem; color: var(--muted); letter-spacing: -.005em;
  transition: color .3s ease;
}
.prep-lista button:hover { color: var(--ink); }
/* Feito: a palavra ganha tinta e um ponto vermelho à frente. */
.prep-lista li.feito button { color: var(--ink-soft); }
.prep-lista li.feito button::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 4px; height: 4px; border-radius: 999px; background: var(--red);
  margin-right: 7px; margin-top: -2px;
}
.prep-lista li.opcional button { font-style: italic; }
.prep-lista button[aria-current="true"] { color: var(--ink); font-weight: 600; }
.prep-lista button[aria-current="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -14px;
  height: 2px; background: var(--red); border-radius: 2px;
}

/* O traço do fundo é o progresso: enche-se com as secções essenciais feitas. */
.prep-barra { height: 1px; background: var(--line); }
.prep-barra i {
  display: block; height: 100%; width: 0; background: var(--red);
  transition: width .7s var(--ease);
}

/* ── Grelha ────────────────────────────────────────────────────────────── */
.prep-wrap {
  max-width: 1340px; margin: 0 auto;
  padding: clamp(22px,3.4vw,44px) var(--gutter) 90px;
}

/* ── Coluna direita: a secção ──────────────────────────────────────────── */
.prep-painel { display: none; }
.prep-painel.activo { display: block; animation: prep-entra .5s var(--ease) both; }
@keyframes prep-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.prep-cabeca { max-width: 62ch; margin-bottom: 26px; }
.prep-cabeca h2 {
  font-family: var(--font-display); font-size: clamp(1.9rem,3.2vw,2.75rem);
  line-height: 1.08; letter-spacing: -.025em; margin: 10px 0 14px;
}
.prep-cabeca p { color: var(--ink-soft); line-height: 1.66; margin: 0; }

.prep-cartao {
  background: var(--card); border-radius: var(--radius); padding: clamp(20px,3vw,30px);
  box-shadow: var(--shadow-sm); border: 1px solid var(--line); display: grid; gap: 18px;
}
.prep-campo { display: grid; gap: 7px; }
.prep-campo > label {
  font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  display: flex; align-items: baseline; gap: 8px;
}
.prep-campo .conta { margin-left: auto; font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.prep-campo .conta.curto { color: #C9A227; }
.prep-campo .conta.bom   { color: #1F7A4D; }

.prep-input, .prep-rico {
  width: 100%; padding: .8em .95em; border-radius: var(--radius-xs);
  border: 1px solid var(--line-strong); background: var(--paper);
  font: inherit; font-size: .96rem; color: var(--ink); line-height: 1.6;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.prep-input:focus, .prep-rico:focus {
  outline: none; border-color: var(--red); background: #fff;
  box-shadow: 0 0 0 3px rgba(176,25,31,.12);
}
.prep-input::placeholder, .prep-rico:empty::before {
  color: var(--muted); opacity: .75;
}
.prep-rico:empty::before { content: attr(data-placeholder); pointer-events: none; }
.prep-rico { min-height: 168px; overflow-y: auto; }
.prep-rico p { margin: 0 0 .7em; }
.prep-rico p:last-child { margin-bottom: 0; }
.prep-nome { font-family: var(--font-display); font-size: 1.35rem; }

.prep-dica { font-size: .82rem; color: var(--muted); line-height: 1.55; margin: 0; }
.prep-dica strong { color: var(--ink-soft); }

/* ── Ficheiro ──────────────────────────────────────────────────────────── */
.prep-ficheiro {
  position: relative; display: grid; gap: 5px; place-items: center; text-align: center;
  padding: 30px 18px; border-radius: var(--radius-sm);
  border: 1.5px dashed rgba(176,25,31,.34); background: rgba(176,25,31,.035);
  transition: background .3s ease, border-color .3s ease;
}
.prep-ficheiro input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.prep-ficheiro.sobre { background: rgba(176,25,31,.09); border-color: var(--red); }
.prep-ficheiro.tem { border-style: solid; border-color: var(--red); background: rgba(176,25,31,.06); }
.prep-ficheiro b { font-size: .96rem; color: var(--ink); }
.prep-ficheiro small { font-size: .78rem; color: var(--muted); }

/* ── Navegação entre secções ───────────────────────────────────────────── */
.prep-rodape { display: flex; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.prep-rodape .btn--red { --btn-bg: var(--red); --btn-fg: #fff; }
.prep-rodape .btn--linha {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong);
}

/* ── Revisão final ─────────────────────────────────────────────────────── */
.prep-revisao { display: grid; gap: 2px; }
.prep-revisao-linha {
  display: flex; align-items: center; gap: 12px; padding: 13px 4px;
  border-bottom: 1px solid var(--line); font-size: .94rem;
}
.prep-revisao-linha:last-child { border-bottom: 0; }
.prep-revisao-linha .marca { width: 20px; font-weight: 700; }
.prep-revisao-linha.ok   .marca { color: #1F7A4D; }
.prep-revisao-linha.falta .marca { color: var(--red); }
.prep-revisao-linha .nome { flex: 1; }
.prep-revisao-linha .ver { font-size: .84rem; color: var(--red); font-weight: 600; }

.prep-aviso {
  display: flex; gap: 12px; padding: 15px 17px; border-radius: var(--radius-sm);
  background: rgba(176,25,31,.05); border: 1px solid rgba(176,25,31,.16);
  font-size: .89rem; color: var(--ink-soft); line-height: 1.55;
}
.prep-aviso b { color: var(--ink); }

/* ── Estados de página inteira ─────────────────────────────────────────── */
.prep-centro {
  min-height: 70vh; display: grid; place-items: center; text-align: center;
  padding: 40px var(--gutter);
}
.prep-centro .caixa { max-width: 46ch; display: grid; gap: 14px; justify-items: center; }
.prep-centro h1 { font-family: var(--font-display); font-size: clamp(1.9rem,4vw,2.9rem); line-height: 1.1; }
.prep-centro p { color: var(--ink-soft); margin: 0; }

/* ═════════════════════════════════════════════════════════════════════════
   O LIVRO — um só, com espessura a sério (mesma construção do site v2).
   Cada secção muda-lhe o estado e ele transforma-se; nunca é recriado.
   ═════════════════════════════════════════════════════════════════════════ */
.prep-palco {
  display: grid; grid-template-columns: minmax(290px, 36%) 1fr;
  gap: clamp(28px, 4vw, 60px); align-items: center;
  min-height: clamp(430px, 56vh, 640px);
}
.prep-fala h2 {
  font-family: var(--font-display); font-size: clamp(1.8rem, 2.9vw, 2.5rem);
  line-height: 1.08; letter-spacing: -.025em; margin: 10px 0 14px;
}
.prep-fala p { color: var(--ink-soft); line-height: 1.66; margin: 0 0 18px; max-width: 52ch; }
.prep-conta {
  font-size: .78rem; color: var(--muted); margin: -6px 0 18px;
  font-variant-numeric: tabular-nums; transition: color .3s ease;
}
.prep-conta.perto { color: #C9A227; }
.prep-conta.cheio { color: var(--red); font-weight: 600; }
.prep-conta.curto { color: #C9A227; }

.livro-palco {
  position: relative; width: 100%; display: grid; place-items: center;
  min-height: clamp(400px, 52vh, 600px);
  /* Sem overflow: quando o livro se aproxima da badana sai pela direita do
     ecrã. Quem corta é a janela (overflow-x: clip no body), não uma caixa. */
}

.livro3d {
  --larg: clamp(240px, 30vw, 410px);
  --alt: calc(var(--larg) * 943 / 600);
  --lombada: 20;
  --esp: calc(var(--larg) * var(--lombada) / 150);
  position: relative; width: var(--larg); height: var(--alt);
  perspective: 2600px;
  transition: width .9s var(--ease), height .9s var(--ease), opacity .7s ease, transform .9s var(--ease);
}
.livro3d-corpo {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateY(var(--gy, -15deg)) rotateX(var(--gx, 1deg));
  transition: transform 1.05s var(--ease);
}
.face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.f-frente {
  transform: translateZ(calc(var(--esp) / 2)); transform-origin: left center;
  transform-style: preserve-3d; border-radius: 2px 5px 5px 2px;
  transition: transform 1.05s var(--ease), box-shadow 1.05s var(--ease);
  box-shadow: 0 30px 50px -26px rgba(22,18,15,.55), 0 2px 6px rgba(22,18,15,.14);
}
.capa-fora, .capa-dentro {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: inherit; overflow: hidden; background: #7E1010;
  display: flex; flex-direction: column; padding: 11% 9% 8%;
}
.capa-fora::before, .f-tras::before {
  content: ""; position: absolute; inset: 0;
  background: url("../imgs/preparacao/iBooks_Covers.png") 0 0 / 100% 100% repeat; opacity: .9;
}
.capa-fora > *, .capa-dentro > *, .f-tras > * { position: relative; z-index: 1; }
.capa-dentro {
  transform: rotateY(180deg); background: #F4EEE1;
  /* Espelhada: alinhar ao início encosta a aba à borda de fora da capa. */
  padding: 0; flex-direction: row; justify-content: flex-start;
}
/* Papel: fibra fina em vez da textura da capa, que aqui não faz sentido. */
.capa-dentro::before {
  content: ""; position: absolute; inset: 0; opacity: .55;
  background:
    repeating-linear-gradient(94deg, rgba(140,120,95,.05) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(3deg, rgba(140,120,95,.045) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #FBF7EE, #EFE7D8);
}
/* A aba dobrada: cerca de metade da capa, é aí que a biografia vive. */
.badana-aba {
  position: relative; z-index: 1; width: 62.5%; height: 100%;
  background: #7E1010; padding: 8% 6% 6%;
  display: flex; flex-direction: column; gap: 7px;
  /* A sombra cai do lado de dentro: é a aba levantada a projectar-se. */
  box-shadow: 16px 0 26px -12px rgba(22,18,15,.62), 3px 0 0 rgba(0,0,0,.16);
  border-right: 1px solid rgba(0,0,0,.22);
}
/* Bem mais ténue do que na capa: por dentro o relevo quase não se nota. */
.badana-aba::before {
  content: ""; position: absolute; inset: 0;
  background: url("../imgs/preparacao/iBooks_Covers.png") 0 0 / 100% 100% repeat; opacity: .22;
}
.badana-aba::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; z-index: 2;
  background: linear-gradient(90deg, rgba(0,0,0,.3), rgba(0,0,0,.04) 70%, transparent);
}
.badana-aba > * { position: relative; z-index: 1; }

.vinco {
  position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(0,0,0,.32) 0, rgba(0,0,0,.13) 7px, rgba(0,0,0,.03) 20px, rgba(0,0,0,0) 34px,
    rgba(255,255,255,.05) 84%, rgba(255,255,255,.14) 100%);
}
/* A textura tem uma barra de um lado: na contracapa roda para o lado certo. */
.f-tras::before { transform: rotate(180deg); }
.f-tras {
  transform: rotateY(180deg) translateZ(calc(var(--esp) / 2));
  background: #7C0F14; border-radius: 5px 2px 2px 5px; overflow: hidden;
  display: flex; flex-direction: column; padding: 11% 9% 8%;
}
.f-lombada {
  width: var(--esp); left: 0; transform-origin: left center;
  transform: rotateY(-90deg) translateX(calc(var(--esp) / -2));
  background: linear-gradient(90deg, #6F0D12, #9A161C 55%, #7C0F14);
}
.f-folhas {
  width: var(--esp); left: auto; right: 0; transform-origin: right center;
  transform: rotateY(90deg) translateX(calc(var(--esp) / 2));
  background: linear-gradient(90deg, #D8CBB6 0, #F7F1E6 26%, #FFFDF9 52%, #EFE7D8 82%, #CFC0A8 100%);
  box-shadow: inset 0 0 8px rgba(22,18,15,.2);
}
.f-pagina {
  transform: translateZ(calc(var(--esp) / 2 - 2px));
  border-radius: 2px 5px 5px 2px; overflow: hidden;
  background: linear-gradient(180deg, #FDFBF7, #F3EDE3);
  box-shadow: inset 14px 0 22px -18px rgba(22,18,15,.9);
  padding: 13% 11% 9%; display: flex; flex-direction: column;
}
.f-folha-virada {
  transform: translateZ(calc(var(--esp) / 2 - 1px)); transform-origin: left center;
  border-radius: 2px 5px 5px 2px; overflow: hidden;
  background: linear-gradient(180deg, #FDFBF7, #F1EADF);
  box-shadow: inset 14px 0 22px -18px rgba(22,18,15,.9);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 16% 13% 9%;
  transition: transform 1.05s var(--ease) .12s, box-shadow 1.05s var(--ease);
  backface-visibility: hidden;
}
.f-folha-virada .rosto-autor {
  font-family: 'Cinzel', var(--font-display), serif; text-transform: uppercase;
  text-align: center; font-size: clamp(.42rem, .62vw, .55rem); letter-spacing: .1em;
  color: rgba(42,35,29,.52); font-weight: 600;
}
.f-folha-virada .rosto {
  font-family: var(--font-display); text-transform: uppercase; text-align: center;
  font-size: clamp(.62rem, .98vw, .84rem); letter-spacing: .05em; line-height: 1.28;
  color: rgba(42,35,29,.62);
}
/* Sem isto o margin-top:auto do site absorvia o espaço e o título subia. */
.f-folha-virada .pagina-site { margin-top: 0; padding-top: 0; }
.livro3d::after {
  content: ""; position: absolute; left: 4%; right: -4%; bottom: -18px; height: 20px;
  background: radial-gradient(56% 100% at 48% 0%, rgba(22,18,15,.3), transparent 74%);
  filter: blur(6px); pointer-events: none;
}

/* ── O que se escreve em cada sítio ────────────────────────────────────── */
.capa-escrita {
  width: 100%; background: transparent; border: 0; outline: none;
  resize: none; overflow: hidden;             /* cresce para baixo, sem barra */
  color: #fff; text-align: center; font-family: 'Cinzel', var(--font-display), serif;
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  font-size: clamp(.9rem, 1.5vw, 1.24rem); line-height: 1.35;
  padding: 6px 2px; border-bottom: 1px dashed rgba(255,255,255,.3);
  transition: border-color .3s ease, background .3s ease;
}
.capa-escrita:focus { border-bottom-color: rgba(255,255,255,.85); background: rgba(255,255,255,.07); }
.capa-escrita::placeholder {
  color: rgba(255,255,255,.62); text-transform: none; letter-spacing: .02em;
  font-family: var(--font-sans); font-weight: 400; font-size: .7rem;
}
/* Por preencher, a capa chama a atenção; pára assim que houver nome. */
.capa-escrita:placeholder-shown { animation: chama-nome 2.6s ease-in-out infinite; }
.capa-escrita:placeholder-shown:focus { animation: none; }
@keyframes chama-nome {
  0%, 100% { border-bottom-color: rgba(255,255,255,.22); background: transparent; }
  50%      { border-bottom-color: rgba(255,255,255,.7);  background: rgba(255,255,255,.06); }
}

.capa-titulo {
  margin-top: auto; text-align: center; font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase; line-height: 1.06;
  font-size: clamp(1.25rem, 2.3vw, 1.8rem); color: rgba(255,255,255,.30); word-break: break-word;
}
.capa-logo { margin-top: auto; padding-top: 12px; display: grid; place-items: center; }
.capa-logo img { width: 62px; opacity: .92; }

.capa-texto {
  flex: 1; width: 100%; background: transparent; border: 0; outline: none;
  color: rgba(255,255,255,.94); font-family: var(--font-sans);
  font-size: clamp(.58rem, .92vw, .72rem); line-height: 1.6; text-align: left;
  overflow: hidden; padding: 4px; border-radius: 6px;
}
.capa-texto:focus { background: rgba(255,255,255,.07); }
.capa-texto:empty::before { content: attr(data-placeholder); color: rgba(255,255,255,.5); }
.capa-texto p { margin: 0 0 .5em; }
.capa-texto em, .capa-texto i { font-style: italic; }
.capa-isbn {
  margin-top: 8px; align-self: center; width: 56%; height: 22px; border-radius: 3px;
  background: repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px); opacity: .8;
}
/* Fora da secção da biografia, a aba é só para ver. */
.capa-texto[contenteditable="false"] { cursor: default; }
.capa-texto[contenteditable="false"]:focus { background: transparent; }

/* Quadrada e maior. Moldura, não botão: a fotografia é pedida por fora. */
.badana-foto {
  width: 62%; aspect-ratio: 1 / 1; border-radius: 3px; align-self: center; flex: 0 0 auto;
  background: rgba(255,255,255,.1); border: 1px dashed rgba(255,255,255,.3);
  display: grid; place-items: center; color: rgba(255,255,255,.55);
  font-size: .48rem; text-align: center; padding: 8px; line-height: 1.45; letter-spacing: .03em;
}
.badana-nome {
  text-align: center; color: #fff; font-family: 'Cinzel', var(--font-display), serif;
  text-transform: uppercase; letter-spacing: .06em; font-size: .56rem; font-weight: 700;
}
/* A aba é estreita e o limite é 750: o corpo tem de caber. */
.badana-aba .capa-texto {
  font-size: clamp(.4rem, .56vw, .5rem); line-height: 1.46;
  text-align: justify; hyphens: auto;
}

/* A página do livro: cresce com o texto, nunca tem barra de deslocamento. */
.pagina-escrita {
  flex: 1; width: 100%; background: transparent; border: 0; outline: none;
  font-family: var(--font-display); color: #2A231D;
  font-size: clamp(.66rem, 1.02vw, .84rem); line-height: 1.9;
  overflow: visible; min-height: 3em;
}
.pagina-escrita:empty::before { content: attr(data-placeholder); color: rgba(42,35,29,.34); font-style: italic; }
.pagina-escrita p { margin: 0 0 .75em; }
.pagina-escrita em, .pagina-escrita i { font-style: italic; }
.pagina-escrita.centro { text-align: center; font-style: italic; display: block; padding-top: 22%; }
.pagina-num {
  margin-top: auto; padding-top: 16px; text-align: center; font-size: .56rem;
  color: rgba(42,35,29,.42); font-family: var(--font-display); letter-spacing: .04em;
}
.pagina-site {
  margin-top: auto; padding-top: 12px; text-align: center;
  font-family: var(--font-nav); font-size: .5rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(42,35,29,.36);
}

/* ── Montra ────────────────────────────────────────────────────────────── */
.livro-montra {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .55s ease .3s;
}
/* Ocupa a coluna: é uma montra de livraria, não um cartão de visita. */
.montra-caixa {
  width: 100%; max-width: 620px; background: #fff; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); border: 1px solid var(--line);
  padding: 18px 22px 22px; display: grid; gap: 13px;
  transform: translateY(14px); transition: transform .8s var(--ease) .3s;
}
.montra-topo { display: flex; gap: 6px; align-items: center; }
.montra-topo i { width: 8px; height: 8px; border-radius: 999px; background: var(--paper-3); }
.montra-topo span { margin-left: 8px; font-size: .68rem; color: var(--muted); letter-spacing: .04em; }
.montra-corpo { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: start; }
.montra-capa { width: 84px; aspect-ratio: 600/943; border-radius: 3px; background: #7E1010; box-shadow: var(--shadow-xs); position: relative; overflow: hidden; }
.montra-capa::before { content: ""; position: absolute; inset: 0; background: url("../imgs/preparacao/iBooks_Covers.png") 0 0/100% 100%; opacity: .85; }
.montra-texto { display: grid; gap: 5px; }
.montra-titulo { font-family: var(--font-display); font-size: 1.14rem; line-height: 1.18; }
.montra-autor { font-size: .82rem; color: var(--muted); }
.montra-preco { font-family: var(--font-display); color: var(--red); font-size: 1.04rem; }
.montra-escrita {
  width: 100%; background: var(--paper); border: 1px dashed var(--line-strong); outline: none;
  border-radius: 8px; padding: 12px 14px; font-size: .88rem; line-height: 1.6; color: var(--ink-2);
  min-height: 92px; overflow: hidden; transition: border-color .3s ease, background .3s ease;
}
.montra-escrita:focus { border-style: solid; border-color: var(--red); background: #fff; }
.montra-escrita:empty::before { content: attr(data-placeholder); color: var(--muted); }

/* ── Frases ────────────────────────────────────────────────────────────── */
.livro-frases {
  position: absolute; inset: 0; display: grid; align-content: center; gap: 14px;
  opacity: 0; pointer-events: none; transition: opacity .55s ease .25s;
}
.frase-cartao {
  background: #FAF4E9; border-radius: 12px; box-shadow: var(--shadow-sm);
  padding: 20px 22px; display: flex; align-items: flex-start;
  transform: translateY(12px); transition: transform .7s var(--ease), box-shadow .5s var(--ease);
}
.frase-cartao:focus-within { box-shadow: var(--shadow-md); }
.frase-cartao::before {
  content: "\201C"; font-family: var(--font-display); font-size: 2.2rem; line-height: .78;
  color: var(--red); opacity: .32; margin-right: 10px; flex: 0 0 auto;
}
.frase-escrita {
  flex: 1; background: transparent; border: 0; outline: none; resize: none;
  font-family: var(--font-display); font-size: 1rem; line-height: 1.55;
  color: var(--ink-2); font-style: italic; overflow: hidden; min-height: 3.1em;
}
.frase-escrita::placeholder { color: rgba(22,18,15,.28); }

/* ── Manuscrito ────────────────────────────────────────────────────────── */
.livro-manuscrito {
  position: absolute; inset: 3% 1%; background: #FAF4E9; border-radius: 8px;
  box-shadow: var(--shadow-book); border: 2px dashed rgba(176,25,31,.3);
  display: grid; place-items: center; text-align: center; padding: 12%;
  opacity: 0; pointer-events: none; transform: translateY(16px) rotate(-1.5deg);
  transition: opacity .55s ease .2s, transform .8s var(--ease) .2s, border-color .3s ease, background .3s ease;
}
.livro-manuscrito.sobre { border-color: var(--red); background: #fff; }
.livro-manuscrito.tem { border-style: solid; border-color: rgba(176,25,31,.42); }
.livro-manuscrito input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.livro-manuscrito .linhas {
  position: absolute; inset: 15% 17%; z-index: 0; opacity: .45;
  background: repeating-linear-gradient(180deg, transparent 0 12px, rgba(22,18,15,.12) 12px 13px);
}
.livro-manuscrito .dentro { position: relative; z-index: 1; display: grid; gap: 5px; justify-items: center; }
.livro-manuscrito b { font-family: var(--font-display); font-size: 1rem; color: var(--ink); line-height: 1.25; }
.livro-manuscrito small { font-size: .74rem; color: var(--muted); line-height: 1.5; max-width: 24ch; }
/* Os formatos são informação de rodapé: mais pequenos e mais apagados. */
.livro-manuscrito .ficheiro-formatos {
  margin-top: 4px; font-size: .66rem; color: var(--muted); opacity: .68; letter-spacing: .02em;
}

/* ── Folha solta: dedicatória, agradecimentos, prefácio ────────────────── */
.livro-folhao {
  position: absolute; inset: 0; display: grid; align-content: center;
  opacity: 0; pointer-events: none; transition: opacity .55s ease .25s;
}
.folhao {
  background: #FAF4E9; border-radius: 12px; box-shadow: var(--shadow-md);
  padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column;
  min-height: 260px; transform: translateY(14px);
  transition: transform .75s var(--ease) .25s;
}
.folhao .pagina-escrita { font-size: clamp(.86rem, 1.15vw, 1rem); line-height: 1.9; flex: 0 0 auto; }
.folhao .pagina-escrita.centro { padding-top: 12%; }
.folhao .pagina-num { margin-top: auto; padding-top: 22px; font-size: .62rem; }

/* ═══ ESTADOS ═════════════════════════════════════════════════════════ */
.livro-palco[data-estado="capa"] .livro3d-corpo { --gy: -15deg; }
.livro-palco[data-estado="verso"] .livro3d-corpo { --gy: -195deg; }

.livro-palco[data-estado="montra"] .livro3d { opacity: 0; transform: scale(.3) translateY(-26%); }
.livro-palco[data-estado="montra"] .livro-montra { opacity: 1; pointer-events: auto; }
.livro-palco[data-estado="montra"] .montra-caixa { transform: none; }

/* A capa abre e mostra a aba: o livro aproxima-se e o resto sai pela direita. */
.livro-palco[data-estado="badana"] .livro3d { transform: translateX(56%) scale(1.16); }
.livro-palco[data-estado="badana"] .livro3d-corpo { --gy: -38deg; }
.livro-palco[data-estado="badana"] .f-frente {
  transform: translateZ(calc(var(--esp) / 2)) rotateY(-158deg);
  box-shadow: 0 40px 60px -30px rgba(22,18,15,.6), 14px 0 30px -14px rgba(22,18,15,.45);
}

/* Abre e folheia: a folha de rosto vira-se e fica à vista a segunda página. */
.livro-palco[data-estado="pagina2"] .livro3d { transform: translateX(38%) scale(.86); }
.livro-palco[data-estado="pagina2"] .livro3d-corpo { --gy: -26deg; }
.livro-palco[data-estado="pagina2"] .f-frente {
  transform: translateZ(calc(var(--esp) / 2)) rotateY(-152deg);
  box-shadow: 0 40px 60px -30px rgba(22,18,15,.6), 14px 0 30px -14px rgba(22,18,15,.45);
}
.livro-palco[data-estado="pagina2"] .f-folha-virada {
  transform: translateZ(calc(var(--esp) / 2 - 1px)) rotateY(-148deg);
  box-shadow: 0 30px 48px -28px rgba(22,18,15,.5);
}
/* A página manda na altura: textos longos fazem o livro crescer, sem scroll. */
.livro-palco[data-estado="pagina2"] .livro3d { height: auto; min-height: var(--alt); }
.livro-palco[data-estado="pagina2"] .f-pagina { position: relative; height: auto; min-height: var(--alt); }

/* Folha solta: é ela que manda na altura. */
.livro-palco[data-estado="folha"] .livro3d { position: absolute; opacity: .14; transform: scale(.32) translateY(-36%); }
.livro-palco[data-estado="folha"] .livro-folhao { position: relative; inset: auto; width: 100%; opacity: 1; pointer-events: auto; }
.livro-palco[data-estado="folha"] .folhao { transform: none; }

.livro-palco[data-estado="frases"] .livro3d { opacity: .16; transform: scale(.34) translateY(-34%); }
.livro-palco[data-estado="frases"] .livro-frases { opacity: 1; pointer-events: auto; }
.livro-palco[data-estado="frases"] .frase-cartao { transform: none; }

.livro-palco[data-estado="manuscrito"] .livro3d { opacity: .2; transform: scale(.4) translateX(-56%) translateY(-20%); }
.livro-palco[data-estado="manuscrito"] .livro-manuscrito { opacity: 1; pointer-events: auto; transform: none; }

/* ── Barra de formatação (itálico e negrito, só na selecção) ───────────── */
.prep-formato {
  position: absolute; z-index: 60; display: none; gap: 2px; padding: 4px;
  background: var(--ink); border-radius: 8px; box-shadow: var(--shadow-md);
  transform: translate(-50%, -100%);
}
.prep-formato.visivel { display: flex; }
.prep-formato button {
  width: 30px; height: 28px; border-radius: 5px; color: #fff; font-size: .86rem;
  display: grid; place-items: center; transition: background .2s ease;
}
.prep-formato button:hover { background: rgba(255,255,255,.16); }
.prep-formato button i { font-style: normal; }
.prep-formato button[data-cmd="italic"] i { font-style: italic; font-family: var(--font-display); }
.prep-formato button[data-cmd="bold"] i { font-weight: 800; }

/* ── Fim ───────────────────────────────────────────────────────────────── */
.fim-cartao {
  max-width: 560px; margin: 0 auto; background: var(--card); border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
  padding: clamp(26px, 4vw, 40px); display: grid; gap: 16px; justify-items: center; text-align: center;
}
.fim-livro {
  width: 104px; aspect-ratio: 600/943; border-radius: 5px; background: #7E1010;
  position: relative; overflow: hidden; box-shadow: var(--shadow-book);
  animation: fim-pousa 1.2s var(--ease) both;
}
.fim-livro::before { content: ""; position: absolute; inset: 0; background: url("../imgs/preparacao/iBooks_Covers.png") 0 0/100% 100%; opacity: .9; }
.fim-livro span {
  position: absolute; inset: auto 8% 12% 8%; color: rgba(255,255,255,.85);
  font-family: 'Cinzel', serif; font-size: .5rem; letter-spacing: .08em;
  text-transform: uppercase; text-align: center;
}
@keyframes fim-pousa { from { transform: translateY(-18px) rotateY(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.fim-lista { display: grid; gap: 10px; text-align: left; width: 100%; margin: 4px 0 6px; }
.fim-lista div {
  display: flex; gap: 11px; align-items: flex-start; font-size: .9rem; color: var(--ink-soft);
  opacity: 0; animation: fim-entra .6s var(--ease) both;
}
.fim-lista div:nth-child(1) { animation-delay: .45s; }
.fim-lista div:nth-child(2) { animation-delay: .6s; }
.fim-lista div:nth-child(3) { animation-delay: .75s; }
.fim-lista b { color: var(--red); flex: 0 0 auto; }
@keyframes fim-entra { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* ── Mobile ────────────────────────────────────────────────────────────── */
/* ══ TELEMÓVEL ═══════════════════════════════════════════════════════════
   Aqui não há duas colunas. A explicação vem sempre primeiro — lê-se, e só
   depois se escreve — e o livro fica por baixo, grande o suficiente para se
   perceber que é nele que se escreve. Quando não cabe, corta-se em baixo com
   um esbatido para o papel, em vez de encolher até ficar ilegível.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .prep-topo-inner { padding: 13px var(--gutter) 6px; gap: 11px; }
  .prep-marca { height: 22px; }
  .prep-obra { font-size: .92rem; }
  .prep-obra::before { display: none; }
  .prep-estado { font-size: .72rem; }
  .prep-estado span { display: none; }        /* fica só o ponto de cor */
  .prep-estado.a-rever span { display: inline; }
  .prep-lista { padding: 8px 0 12px; gap: 16px; }
  .prep-lista button { font-size: .84rem; }

  .prep-wrap { padding: 18px var(--gutter) 40px; }

  /* Uma coluna, e a fala primeiro. */
  .prep-palco {
    grid-template-columns: 1fr; gap: 16px; min-height: 0;
    grid-template-areas: "fala" "livro";
  }
  .prep-fala { grid-area: fala; }
  .livro-palco { grid-area: livro; min-height: 0; }
  .prep-fala h2 { font-size: clamp(1.6rem, 7vw, 2rem); margin: 8px 0 10px; }
  .prep-fala p { font-size: .95rem; margin-bottom: 14px; }
  .prep-conta { margin: -4px 0 14px; }
  /* Os botões ficam ao fundo do ecrã, sempre à mão. */
  .prep-rodape {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0;
    padding: 11px var(--gutter) calc(11px + env(safe-area-inset-bottom));
    background: rgba(250,247,242,.94); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); gap: 10px;
  }
  .prep-rodape .btn { flex: 1; justify-content: center; }
  .prep-wrap { padding-bottom: 96px; }

  /* ── O livro ───────────────────────────────────────────────────────── */
  /* Sem esbatido: o livro vive por baixo do texto e cabe inteiro. */
  .livro-palco { max-height: none; overflow: visible; }

  /* Nome: grande, para não haver dúvida de que é ali que se escreve. */
  .livro-palco[data-estado="capa"] .livro3d-corpo { --gy: -6deg; }
  .livro-palco[data-estado="capa"] .livro3d { transform: none; }

  /* Sinopse: o livro ocupa o que pode, quase de frente para se ler. */
  .livro-palco[data-estado="verso"] .livro3d-corpo { --gy: -186deg; }
  .livro-palco[data-estado="verso"] .livro3d { transform: none; }
  .livro-palco[data-estado="verso"] .capa-texto { font-size: .8rem; line-height: 1.65; }

  /* A escrever, a contracapa aproxima-se um pouco mais. */
  .livro-palco[data-estado="verso"]:focus-within .livro3d { transform: scale(1.06); }

  /* Montra: cresce para baixo, sem cortar. O livro está invisível neste
     estado mas continuava a ocupar a altura toda — daí o vazio. */
  .livro-palco[data-estado="montra"] { max-height: none; overflow: visible; }
  .livro-palco[data-estado="montra"] .livro3d { display: none; }
  .livro-palco[data-estado="montra"] .livro-montra { position: relative; inset: auto; }
  .livro-palco[data-estado="montra"] .montra-caixa { width: 95%; max-width: none; }
  .livro-palco[data-estado="montra"] .montra-escrita { font-size: .9rem; min-height: 96px; }

  /* Frases, folha e manuscrito: também sem corte — crescem com o texto. */
  .livro-palco[data-estado="frases"],
  .livro-palco[data-estado="folha"],
  .livro-palco[data-estado="manuscrito"] { max-height: none; overflow: visible; }
  .livro-palco[data-estado="frases"] .livro3d,
  .livro-palco[data-estado="folha"] .livro3d,
  .livro-palco[data-estado="manuscrito"] .livro3d { display: none; }
  .livro-palco[data-estado="frases"] .livro-frases,
  .livro-palco[data-estado="manuscrito"] .livro-manuscrito,
  .livro-palco[data-estado="folha"] .livro-folhao { position: relative; inset: auto; }
  .livro-palco[data-estado="manuscrito"] .livro-manuscrito { min-height: 260px; }
  .frase-escrita { font-size: .95rem; }
  .livro-palco[data-estado="frases"] .livro-frases { width: 95%; margin: 0 auto; }
  .frase-cartao { padding: 18px 18px; }

  /* Livro aberto: cabe de frente, sem sair para lado nenhum. */
  .livro-palco[data-estado="badana"] .livro3d-corpo,
  .livro-palco[data-estado="pagina2"] .livro3d-corpo { --gy: -14deg; }
  /* Aberto, o livro ocupa o dobro da largura. Encolhê-lo até caber tornava a
     biografia ilegível — por isso a aba fica em destaque, à largura do ecrã, e
     a página sai pela direita (o body corta, sem barra horizontal). */
  .livro3d { --larg: min(80vw, 300px); }
  .livro-palco[data-estado="badana"] .livro3d { transform: translateX(112%); }
  .livro-palco[data-estado="badana"] .livro3d-corpo { --gy: -22deg; }
  .badana-aba .capa-texto { font-size: .56rem; line-height: 1.5; }

  /* Na dedicatória o que importa é a página, não a aba: fica ela ao centro. */
  .livro-palco[data-estado="pagina2"] .livro3d { transform: translateX(6%) scale(.92); }
  .livro-palco[data-estado="pagina2"] .livro3d-corpo { --gy: -16deg; }
  .livro-palco[data-estado="pagina2"] { max-height: none; overflow: visible; }

  .prep-revisao-linha { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .livro3d, .livro3d-corpo, .f-frente, .livro-montra, .montra-caixa,
  .frase-cartao, .livro-manuscrito, .fim-livro, .fim-lista div { transition: none !important; animation: none !important; }
}

/* ── Boas-vindas ──────────────────────────────────────────────────────────
   O link abre sem contexto nenhum: o autor recebeu um email e caiu aqui. Este
   ecrã explica o que vem a seguir antes de lhe pedir seja o que for. Cobre a
   página inteira e sai quando ele carrega em Começar. */
.prep-inicio {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(250,247,242,.92); backdrop-filter: blur(10px);
  display: grid; place-items: center; padding: 24px var(--gutter);
  overflow-y: auto;
  animation: inicio-entra .5s var(--ease) both;
}
.prep-inicio.sai { animation: inicio-sai .45s var(--ease) forwards; }
@keyframes inicio-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes inicio-sai { to { opacity: 0; transform: scale(1.02); } }

.prep-inicio-caixa {
  max-width: 620px; background: var(--card); border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
  padding: clamp(28px, 4.5vw, 48px); display: grid; gap: 16px;
  margin: auto;
}
.prep-inicio-caixa h1 {
  font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1.1; letter-spacing: -.02em; margin: 4px 0 0;
}
.prep-inicio-caixa p {
  color: var(--ink-soft); line-height: 1.7; margin: 0; font-size: .97rem;
}
.prep-inicio-caixa .btn { justify-self: start; margin-top: 8px; }

/* Enquanto o ecrã de entrada está aberto, o resto não rola por baixo. */
body.a-comecar { overflow: hidden; }

@media (max-width: 900px) {
  .prep-inicio-caixa { padding: 24px 22px; }
  .prep-inicio-caixa .btn { justify-self: stretch; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .prep-inicio, .prep-inicio.sai { animation: none; }
}