@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Share+Tech+Mono&family=Caveat:wght@500&display=swap');

/* ============================================================
   Luz & Kiko — passaporte
   Um livrinho a sério, em 3D, animado por molas (em JS): as
   folhas de papel são feitas de tiras, para se curvarem enquanto
   viram; as capas são rígidas e têm espessura. A luz vem de cima
   à esquerda, por isso cada face escurece conforme o ângulo, e a
   folha que vira projeta sombra na página onde vai cair.
   ============================================================ */
:root {
  --pp-w: min(400px, 42vw, calc((100vh - 300px) / 1.42));
  --pp-h: calc(var(--pp-w) * 1.42);
  --pp-paper: #F1E8D3;
  --pp-paper-2: #E8DCC0;
  --pp-guard: #E4D9BE;
  --pp-ink: #1F2740;
  --pp-ink-2: #5D6072;
  --pp-label: #6E6A5F;
  --pp-gold: #B8952E;
  --pp-red: #B4342C;
  --pp-cover: #5C1E2D;
  --pp-cover-2: #3F1120;
  --pp-cover-3: #7A2C3E;
  --pp-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --pp-ocr: 'Share Tech Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --pp-script: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;

  /* A mesa onde o passaporte está pousado */
  --pp-table-hi: #FCFBF7;
  --pp-table: #F4F2EC;
  --pp-table-lo: #E7E4DA;
  --pp-spot: rgba(184, 149, 46, .10);
}
:root[data-theme="dark"] {
  --pp-table-hi: #1B1C21;
  --pp-table: #111216;
  --pp-table-lo: #08090B;
  --pp-spot: rgba(184, 149, 46, .09);
}
/* Estes valores são só o primeiro desenho: a seguir é o JS que mede
   o que sobra mesmo e escreve o --pp-w certo. */
@media (max-width: 640px) {
  :root { --pp-w: min(calc(100vw - 32px), calc((100vh - 250px) / 1.42)); }
}

/* ---------- Página inteira, sem scroll -------------------- */
.pp-body {
  height: 100vh; height: 100dvh; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background-color: var(--pp-table);
  background-image:
    radial-gradient(70% 55% at 50% 58%, var(--pp-spot), transparent 70%),
    radial-gradient(120% 90% at 50% 30%, var(--pp-table-hi), var(--pp-table) 55%, var(--pp-table-lo) 100%);
}
.pp-body .nav { flex: none; }
.pp-main {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); overflow: hidden;
}

.pp-head { flex: none; text-align: center; margin-bottom: 4px; animation: pp-up .9s cubic-bezier(.16, 1, .3, 1) both; }
.pp-head .eyebrow { margin-bottom: 8px; }
.pp-title { font-size: clamp(26px, 4vw, 40px); letter-spacing: -.02em; line-height: 1.05; }

/* ---------- Cena 3D --------------------------------------- */
.pp-stage {
  flex: none; display: grid; place-items: center; max-width: 100%;
  animation: pp-enter 1.15s cubic-bezier(.16, 1, .3, 1) both;
}
/* Ecrã estreito: vê-se uma página de cada vez, e o palco tem
   exatamente a largura dela. Assim a folha que vira desaparece na
   lombada — antes passava para a esquerda, para fora do livro, e
   ficava ali um pedaço de página cortado a régua no meio do nada.
   Os 14px a mais são a folga da perspetiva: a base da página, que
   está mais perto de quem olha, é uns três por cento mais larga. */
.pp-stage.single { width: calc(var(--pp-w) + 14px); overflow: hidden; }
.pp-scene.single { width: calc(var(--pp-w) + 14px); }
@keyframes pp-enter {
  from { opacity: 0; transform: translateY(-38px) scale(.965); }
  to   { opacity: 1; transform: none; }
}
@keyframes pp-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.pp-scene {
  width: calc(var(--pp-w) * 2 + 140px); max-width: 100%;
  padding: 30px 0 42px;
  perspective: 2200px; perspective-origin: 50% 40%;
  display: grid; place-items: center;
  touch-action: none;
}
/* O fundo dá lugar à sombra de contacto, que o palco corta */
@media (max-width: 640px) { .pp-scene { padding: 14px 0 34px; } }
.pp-tilt, .pp-sway, .pp-book { transform-style: preserve-3d; }
.pp-tilt { transform: rotateX(13deg); }
/* Só vale a pena avisar o browser se isto se mexer mesmo */
body:not(.pp-quieto) .pp-tilt { will-change: transform; }
/* Respiração: o livro balança quase impercetivelmente quando ninguém lhe toca.
   No telemóvel fica parado — é uma animação a mais a competir com o folhear. */
.pp-sway { animation: pp-sway 12s ease-in-out infinite; }
@media (hover: none) { .pp-sway { animation: none; } }
.pp-quieto .pp-sway { animation: none; }
@keyframes pp-sway {
  0%, 100% { transform: rotateY(-1.1deg) rotateX(.35deg); }
  50%      { transform: rotateY(1.1deg) rotateX(-.35deg); }
}
.pp-book {
  position: relative;
  width: calc(var(--pp-w) * 2); height: var(--pp-h);
  cursor: grab; will-change: transform;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.pp-book.single { width: var(--pp-w); }
.pp-book.dragging { cursor: grabbing; }
.pp-book img { -webkit-user-drag: none; pointer-events: none; }

/* Sombra de contacto, uma por cada metade */
.pp-shadow {
  position: absolute; top: 5%; bottom: -6%; width: 52%;
  border-radius: 40% / 30%; background: rgba(20, 8, 10, .36);
  filter: blur(18px); transform: translateZ(-1px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1); pointer-events: none;
}
.pp-shadow.r { left: 49%; }
.pp-shadow.l { left: -1%; }
.pp-book.single .pp-shadow.r { left: -2%; width: 104%; }
.pp-book.single .pp-shadow.l { left: -102%; width: 104%; }
:root[data-theme="dark"] .pp-shadow { background: rgba(0, 0, 0, .6); }

/* Sombra projetada pela folha que está a virar, na página de baixo */
.pp-cast {
  position: absolute; top: 0; height: 100%; width: 0; opacity: 0;
  pointer-events: none; will-change: transform, opacity, width;
}
.pp-cast.r { left: 50%; background: linear-gradient(90deg, rgba(28, 12, 6, .5), rgba(28, 12, 6, .2) 45%, transparent 100%); }
.pp-cast.l { right: 50%; background: linear-gradient(-90deg, rgba(28, 12, 6, .5), rgba(28, 12, 6, .2) 45%, transparent 100%); }
.pp-book.single .pp-cast.r { left: 0; }
.pp-book.single .pp-cast.l { right: 100%; }

/* ---------- Folhas --------------------------------------- */
.pp-lift {
  position: absolute; top: 0; left: 50%; width: var(--pp-w); height: var(--pp-h);
  transform-style: preserve-3d; pointer-events: none;
}
.pp-book.single .pp-lift { left: 0; }
.pp-leaf {
  position: absolute; inset: 0;
  transform-origin: left center; transform-style: preserve-3d;
  will-change: transform;
}
.pp-leaf.oculta { visibility: hidden; }

/* Faces das capas (rígidas, com espessura).
   `isolation` é importante: as páginas por dentro usam
   mix-blend-mode (os carimbos, a película holográfica) e, sem
   isolar, o browser mistura-as com o que está atrás delas em 3D
   — dá manchas e fantasmas a virar a folha. */
.pp-face {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 0 9px 9px 0;
  transform: translateZ(calc(var(--th) / 2));
}
.pp-face.back { transform: rotateY(180deg) translateZ(calc(var(--th) / 2)); border-radius: 9px 0 0 9px; }

/* Tiras das folhas de papel: cada uma leva a página inteira,
   deslocada, e mostra só a sua fatia. O JS dá-lhes a largura,
   a posição e o ângulo. Sem `will-change`: são muitas dezenas e,
   promovidas todas a camadas, o telemóvel fica sem memória de
   vídeo e começam a aparecer quadrados em branco. */
.pp-strip {
  position: absolute; top: 0; left: 0; height: 100%;
  transform-origin: 0 50%; transform-style: preserve-3d;
}
.st-face {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* meio décimo de milímetro entre a frente e o verso: coladas no
     mesmo plano, piscavam uma através da outra */
  transform: translateZ(.06px);
}
.st-face.back { transform: rotateY(180deg) translateZ(.06px); }
.st-in { position: absolute; top: 0; height: 100%; }
.pp-strip.last .st-face.front { border-radius: 0 5px 5px 0; }
.pp-strip.last .st-face.back { border-radius: 5px 0 0 5px; }

/* Sombreado por ângulo: --shf (frente) e --shb (verso) vêm do JS */
.pp-face::after, .st-face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: #1D0D08; opacity: var(--shf, 0);
}
.pp-face.back::after, .st-face.back::after { opacity: var(--shb, 0); }

/* Arestas das capas (quatro lados, com a espessura da capa) */
.pp-edge { position: absolute; background: linear-gradient(90deg, var(--pp-cover-2), var(--pp-cover-3), var(--pp-cover-2)); }
.pp-edge.e-r { top: 0; left: 100%; width: var(--th); height: 100%; transform-origin: left center; transform: translateZ(calc(var(--th) / 2)) rotateY(90deg); }
.pp-edge.e-l { top: 0; left: 0; width: var(--th); height: 100%; transform-origin: left center; transform: translateZ(calc(var(--th) / 2)) rotateY(90deg); }
.pp-edge.e-t { top: 0; left: 0; width: 100%; height: var(--th); transform-origin: center top; transform: translateZ(calc(var(--th) / 2)) rotateX(-90deg); background: linear-gradient(0deg, var(--pp-cover-2), var(--pp-cover-3)); }
.pp-edge.e-b { top: 100%; left: 0; width: 100%; height: var(--th); transform-origin: center top; transform: translateZ(calc(var(--th) / 2)) rotateX(-90deg); background: linear-gradient(0deg, var(--pp-cover-2), var(--pp-cover-3)); }

/* Arestas dos blocos de páginas (o "miolo" visto de lado) */
.pp-block { position: absolute; top: 0; height: var(--pp-h); width: var(--pp-w); transform-style: preserve-3d; pointer-events: none; }
.pp-block.right { left: 50%; }
.pp-block.left { left: 0; }
.pp-book.single .pp-block.right { left: 0; }
.pp-book.single .pp-block.left { left: calc(-1 * var(--pp-w)); }
.pp-bl {
  position: absolute;
  background: repeating-linear-gradient(90deg, #EEE4CC 0 1px, #D7CAAA 1px 2px);
  transition: width .55s cubic-bezier(.4, .06, .2, 1), height .55s cubic-bezier(.4, .06, .2, 1), transform .55s cubic-bezier(.4, .06, .2, 1);
}
.pp-block.right .b-side { top: 2px; bottom: 2px; left: 100%; width: var(--th); transform-origin: left center; transform: translateZ(var(--z1)) rotateY(90deg); }
.pp-block.left  .b-side { top: 2px; bottom: 2px; left: 0; width: var(--th); transform-origin: left center; transform: translateZ(var(--z1)) rotateY(90deg); }
.pp-bl.b-top    { top: 0; left: 2px; right: 2px; height: var(--th); transform-origin: center top; transform: translateZ(var(--z1)) rotateX(-90deg); background: repeating-linear-gradient(0deg, #EEE4CC 0 1px, #D7CAAA 1px 2px); }
.pp-bl.b-bottom { top: 100%; left: 2px; right: 2px; height: var(--th); transform-origin: center top; transform: translateZ(var(--z1)) rotateX(-90deg); background: repeating-linear-gradient(0deg, #EEE4CC 0 1px, #D7CAAA 1px 2px); }

/* ---------- Capa: pele bordeaux com dourado -------------- */
.pp-leather {
  position: absolute; inset: 0; color: var(--pp-gold);
  background-color: var(--pp-cover);
  background-image:
    radial-gradient(120% 90% at 22% 10%, rgba(255,255,255,.13), transparent 55%),
    radial-gradient(100% 80% at 90% 100%, rgba(0,0,0,.32), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: auto, auto, 180px 180px, 300px 300px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
/* Brilho que acompanha o rato (--mx/--my vêm do JS) */
.pp-leather::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 45% at var(--mx, 50%) var(--my, 30%), rgba(255, 240, 220, .16), transparent 70%);
}
/* Relevo cego: um filete duplo a acompanhar a borda */
.pp-leather::before {
  content: ""; position: absolute; inset: calc(var(--pp-w) * .045); pointer-events: none;
  border: 1px solid rgba(255, 220, 160, .16);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .12), inset 0 0 0 4px rgba(255, 220, 160, .12);
  border-radius: 2px;
}
.cv-front { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(var(--pp-w) * .11) calc(var(--pp-w) * .08) calc(var(--pp-w) * .09); text-align: center; }
.cv-gold, .cv-top span, .cv-title {
  background: linear-gradient(105deg, #EBD48F 0%, #B8952E 32%, #F3E5AE 50%, #B8952E 68%, #8F701C 100%);
  background-size: 240% 100%; background-position: var(--gx, 50%) 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  position: relative; z-index: 1;
}
.cv-top { display: flex; flex-direction: column; gap: calc(var(--pp-w) * .018); }
.cv-top span { font-family: var(--sans); font-weight: 600; font-size: calc(var(--pp-w) * .034); letter-spacing: .26em; text-transform: uppercase; }
.cv-arms { width: calc(var(--pp-w) * .44); height: calc(var(--pp-w) * .44); filter: drop-shadow(0 1px 0 rgba(255,255,255,.08)) drop-shadow(0 -1px 0 rgba(0,0,0,.35)); position: relative; z-index: 1; }
.cv-title { font-family: var(--sans); font-weight: 600; font-size: calc(var(--pp-w) * .056); letter-spacing: .34em; text-transform: uppercase; padding-left: .34em; }
.cv-chip { width: calc(var(--pp-w) * .1); opacity: .95; position: relative; z-index: 1; }
.cv-back { display: grid; place-items: center; }
.cv-ring { width: calc(var(--pp-w) * .3); opacity: .55; filter: drop-shadow(0 1px 0 rgba(255,255,255,.06)); position: relative; z-index: 1; }

/* Guardas (o interior das capas) */
.pp-guard { background-color: var(--pp-guard); }
.pp-guard::before { opacity: .55; }
.gd-nota {
  position: absolute; left: 50%; bottom: calc(var(--pp-w) * .12); transform: translateX(-50%);
  width: 78%; text-align: center; font-family: var(--sans); font-size: calc(var(--pp-w) * .028);
  letter-spacing: .1em; text-transform: uppercase; color: var(--pp-ink-2); line-height: 1.6;
}
.gd-nota i { display: block; font-style: normal; text-transform: none; letter-spacing: .04em; opacity: .7; }

/* ---------- Papel ---------------------------------------- */
.pp-paper {
  position: absolute; inset: 0; color: var(--pp-ink);
  background-color: var(--pp-paper);
  background-image:
    /* vinheta para a lombada */
    linear-gradient(90deg, rgba(60, 30, 10, .2), rgba(60, 30, 10, .06) 9%, transparent 22%),
    /* guilhoché: círculos entrelaçados muito ténues */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%232b3a7a' stroke-opacity='.11' stroke-width='.6'%3E%3Ccircle cx='60' cy='60' r='52'/%3E%3Ccircle cx='60' cy='60' r='40'/%3E%3Ccircle cx='60' cy='60' r='28'/%3E%3Ccircle cx='0' cy='0' r='52'/%3E%3Ccircle cx='120' cy='0' r='52'/%3E%3Ccircle cx='0' cy='120' r='52'/%3E%3Ccircle cx='120' cy='120' r='52'/%3E%3Ccircle cx='0' cy='60' r='30'/%3E%3Ccircle cx='120' cy='60' r='30'/%3E%3Ccircle cx='60' cy='0' r='30'/%3E%3Ccircle cx='60' cy='120' r='30'/%3E%3C/g%3E%3C/svg%3E"),
    /* grão do papel */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: auto, 120px 120px, 220px 220px;
}
.pp-face.back .pp-paper, .st-face.back .pp-paper {
  background-image:
    linear-gradient(-90deg, rgba(60, 30, 10, .2), rgba(60, 30, 10, .06) 9%, transparent 22%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%232b3a7a' stroke-opacity='.11' stroke-width='.6'%3E%3Ccircle cx='60' cy='60' r='52'/%3E%3Ccircle cx='60' cy='60' r='40'/%3E%3Ccircle cx='60' cy='60' r='28'/%3E%3Ccircle cx='0' cy='0' r='52'/%3E%3Ccircle cx='120' cy='0' r='52'/%3E%3Ccircle cx='0' cy='120' r='52'/%3E%3Ccircle cx='120' cy='120' r='52'/%3E%3Ccircle cx='0' cy='60' r='30'/%3E%3Ccircle cx='120' cy='60' r='30'/%3E%3Ccircle cx='60' cy='0' r='30'/%3E%3Ccircle cx='60' cy='120' r='30'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Marca de água ao centro de todas as folhas */
.pp-paper::before {
  content: "REPÚBLICA PORTUGUESA"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center;
  font-family: var(--sans); font-weight: 600; letter-spacing: .32em; white-space: nowrap;
  font-size: calc(var(--pp-w) * .05); color: rgba(43, 58, 122, .07); pointer-events: none;
}
.pp-num {
  position: absolute; bottom: calc(var(--pp-w) * .035); right: calc(var(--pp-w) * .05);
  font-family: var(--pp-mono); font-size: calc(var(--pp-w) * .028); color: var(--pp-ink-2); opacity: .8;
}
.st-face.back .pp-num { right: auto; left: calc(var(--pp-w) * .05); }
/* Cabeçalho das páginas de vistos */
.pg-cab {
  position: absolute; top: calc(var(--pp-w) * .05); left: calc(var(--pp-w) * .1); right: calc(var(--pp-w) * .07);
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: calc(var(--pp-w) * .012); border-bottom: 1px solid rgba(31, 39, 64, .16);
  font-family: var(--sans); font-weight: 600; font-size: calc(var(--pp-w) * .022); letter-spacing: .28em; text-transform: uppercase;
  color: var(--pp-ink-2); opacity: .85;
}
.pg-cab i { font-style: normal; font-weight: 400; letter-spacing: .18em; opacity: .7; }
.st-face.back .pg-cab { left: calc(var(--pp-w) * .07); right: calc(var(--pp-w) * .1); }

/* ---------- Página de dados ------------------------------ */
.pg-dados { position: absolute; inset: 0; padding: calc(var(--pp-w) * .07) calc(var(--pp-w) * .07) calc(var(--pp-w) * .06) calc(var(--pp-w) * .1); display: flex; flex-direction: column; }
/* Película holográfica: um arco-íris ténue que se desloca com a inclinação */
.pg-dados::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    linear-gradient(112deg, transparent 32%, rgba(255, 130, 200, .13) 42%, rgba(130, 255, 235, .13) 50%, rgba(255, 235, 130, .13) 58%, transparent 68%);
  background-size: 260% 100%; background-position: var(--gx, 50%) 0;
  mix-blend-mode: screen;
}
/* Laminado: brilho diagonal por cima da página de dados */
.pg-dados::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(112deg, transparent 36%, rgba(255,255,255,.3) 47%, rgba(255,255,255,.06) 53%, transparent 64%);
  background-size: 220% 100%; background-position: var(--gx, 50%) 0;
  mix-blend-mode: soft-light;
}
.pd-top { display: flex; align-items: center; gap: calc(var(--pp-w) * .03); padding-bottom: calc(var(--pp-w) * .035); border-bottom: 1px solid rgba(31, 39, 64, .25); }
.pd-emblema { width: calc(var(--pp-w) * .12); height: calc(var(--pp-w) * .12); flex: none; }
.pd-rep { display: block; font-family: var(--sans); font-weight: 600; font-size: calc(var(--pp-w) * .028); letter-spacing: .22em; color: var(--pp-ink); text-transform: uppercase; }
.pd-pass { display: block; font-family: var(--sans); font-weight: 600; font-size: calc(var(--pp-w) * .044); letter-spacing: .12em; color: var(--pp-ink); margin-top: 2px; text-transform: uppercase; }
.pd-pass i { font-style: normal; font-weight: 400; color: var(--pp-ink-2); letter-spacing: .1em; font-size: .72em; }
.pd-tipo { margin-left: auto; text-align: right; font-family: var(--sans); font-size: calc(var(--pp-w) * .02); letter-spacing: .12em; text-transform: uppercase; color: var(--pp-label); line-height: 1.5; }
.pd-tipo b { display: block; font-family: var(--pp-mono); font-weight: 500; font-size: calc(var(--pp-w) * .03); color: var(--pp-ink); letter-spacing: .06em; }

.pd-corpo { position: relative; display: grid; grid-template-columns: calc(var(--pp-w) * .3) 1fr; gap: calc(var(--pp-w) * .05); padding-top: calc(var(--pp-w) * .05); flex: 1; }
.pd-foto {
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; background: #D9CDB0;
  box-shadow: 0 0 0 1px rgba(31,39,64,.3), inset 0 0 14px rgba(0,0,0,.25);
  filter: saturate(.85) contrast(1.02);
}
.pd-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 34%; display: block; }
.pd-assin { margin-top: calc(var(--pp-w) * .035); }
.pd-assin span { display: block; font-family: var(--sans); font-size: calc(var(--pp-w) * .019); letter-spacing: .08em; text-transform: uppercase; color: var(--pp-label); }
.pd-assin b {
  display: block; font-family: var(--pp-script); font-weight: 500; font-size: calc(var(--pp-w) * .07); line-height: 1;
  color: #2B3560; transform: rotate(-4deg); transform-origin: left center; margin-top: calc(var(--pp-w) * .012);
  border-bottom: 1px solid rgba(31, 39, 64, .3); padding-bottom: 2px; white-space: nowrap;
}
.pd-campos { margin: 0; display: flex; flex-direction: column; gap: calc(var(--pp-w) * .028); }
.pd-campos dt { font-family: var(--sans); font-size: calc(var(--pp-w) * .022); letter-spacing: .08em; text-transform: uppercase; color: var(--pp-label); }
.pd-campos dt i { font-style: normal; text-transform: none; letter-spacing: .02em; opacity: .7; }
.pd-campos dd { margin: 2px 0 0; font-family: var(--pp-mono); font-weight: 500; font-size: calc(var(--pp-w) * .034); letter-spacing: .04em; color: var(--pp-ink); line-height: 1.25; min-height: 1.25em; }
.pd-campos .vazio dd { border-bottom: 1px dotted rgba(31,39,64,.35); width: 62%; }
/* Imagem fantasma: a mesma fotografia, pequena e a cinzento */
.pd-fantasma {
  position: absolute; right: 0; bottom: calc(var(--pp-w) * .01); width: calc(var(--pp-w) * .13); aspect-ratio: 3 / 4;
  overflow: hidden; opacity: .28; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; pointer-events: none;
}
.pd-fantasma img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 34%; }

.pd-mrz {
  margin-top: auto; padding-top: calc(var(--pp-w) * .04); border-top: 1px solid rgba(31,39,64,.18);
  font-family: var(--pp-ocr); font-size: calc(var(--pp-w) * .0355); letter-spacing: .06em; line-height: 1.35;
  color: var(--pp-ink); white-space: nowrap; overflow: hidden;
}
.pd-mrz span { display: block; }

/* ---------- Páginas de carimbo --------------------------- */
.pg-carimbo { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(var(--pp-w) * .1); }
.pg-titulo {
  position: absolute; top: calc(var(--pp-w) * .1); left: calc(var(--pp-w) * .1); right: calc(var(--pp-w) * .07);
  font-family: var(--sans); font-weight: 600; font-size: calc(var(--pp-w) * .024); letter-spacing: .24em; text-transform: uppercase;
  color: var(--pp-ink-2);
}
.pg-titulo small { display: block; font-weight: 400; letter-spacing: .12em; font-size: .9em; margin-top: 3px; opacity: .8; }

/* O carimbo cai na página quando ela fica quieta */
.pp-mark {
  opacity: 0;
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)) scale(1.35);
  will-change: transform, opacity;
}
.pp-leaf.stamped .pp-mark { animation: pp-carimbar 560ms cubic-bezier(.22, .9, .3, 1.08) forwards; }
.pp-leaf.stamped.static .pp-mark { animation: none; opacity: .96; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)) scale(1); }
@keyframes pp-carimbar {
  0%   { opacity: 0;   transform: translate(calc(var(--dx, 0px) - 3%), calc(var(--dy, 0px) - 5%)) rotate(calc(var(--rot, 0deg) - 2deg)) scale(1.35); }
  55%  { opacity: 1;   transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)) scale(.965); }
  75%  { opacity: .98; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)) scale(1.012); }
  100% { opacity: .96; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)) scale(1); }
}
.pp-stamp {
  width: 84%; max-width: none; height: auto;
  mix-blend-mode: multiply;
  filter: contrast(1.06) saturate(1.05);
  /* tinta irregular, como um carimbo a sério */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.3 .05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.3 .05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size: 200px 200px; mask-size: 200px 200px;
}

/* Pendente: "VISTO POR EMITIR", a vermelho, em ângulo */
.pp-pendente {
  padding: calc(var(--pp-w) * .03) calc(var(--pp-w) * .05);
  border: 2px solid var(--pp-red); border-radius: 3px;
  font-family: var(--sans); font-weight: 600; font-size: calc(var(--pp-w) * .05); letter-spacing: .2em; text-transform: uppercase;
  color: var(--pp-red); white-space: nowrap; mix-blend-mode: multiply;
  box-shadow: inset 0 0 0 3px var(--pp-paper), inset 0 0 0 4px rgba(180, 52, 44, .55);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size: 160px 160px; mask-size: 160px 160px;
}
.pp-pendente small { display: block; font-weight: 400; letter-spacing: .12em; font-size: .5em; margin-top: 4px; text-align: center; }
.pp-leaf.stamped.static .pp-pendente { opacity: .82; }

/* ---------- Comandos: uma barra de vidro -----------------
   Botões grandes, para se acertar neles com o dedo. Os
   pontinhos ficam numa linha só deles, por baixo do resto,
   com 24px de área a tocar em cada um. */
.pp-dock {
  flex: none; display: flex; flex-direction: column; align-items: center;
  gap: 2px; max-width: 100%;
  padding: 7px 8px; border-radius: 32px; margin-top: 4px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
  animation: pp-up .9s .3s cubic-bezier(.16, 1, .3, 1) both;
}
.pp-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 5px; max-width: 100%;
}
.pp-dbtn {
  height: 46px; padding: 0 18px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  transition: background .18s, color .18s, opacity .18s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.pp-dbtn:hover { background: var(--bg-2); color: var(--ink); }
.pp-dbtn:active { transform: scale(.96); }
.pp-dbtn:disabled { opacity: .32; pointer-events: none; }
.pp-arrow {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink); background: var(--bg-2);
  transition: background .18s, opacity .18s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.pp-arrow:hover { background: var(--line); }
.pp-arrow:active { transform: scale(.93); }
.pp-arrow:disabled { opacity: .28; pointer-events: none; }
.pp-arrow svg { width: 25px; height: 25px; }
.ind-txt {
  min-width: 5.4em; height: 22px; line-height: 22px; overflow: hidden; text-align: center;
  font-size: 15px; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ind-in { display: block; animation: pp-ind .34s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pp-ind { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.pp-dots { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 0; }
.pp-dots button {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.pp-dots button::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .25s;
}
.pp-dots button.gold::before { background: var(--pp-gold); }
.pp-dots button:hover::before { transform: scale(1.4); }
.pp-dots button.on::before { background: var(--ink); transform: scale(1.65); }
.pp-hint { flex: none; margin-top: 8px; font-size: 12px; color: var(--ink-3); text-align: center; transition: opacity .8s; animation: pp-up .9s .5s cubic-bezier(.16, 1, .3, 1) both; }
.pp-main.used .pp-hint { opacity: 0; }

@media (max-width: 640px) {
  .pp-head .eyebrow { display: none; }
  .pp-title { font-size: 25px; }
  .pp-dock { padding: 6px; }
  .pp-row { gap: 3px 4px; }
  .pp-dbtn { height: 44px; padding: 0 11px; font-size: 13.5px; }
  .pp-arrow { width: 50px; height: 50px; }
  .pp-arrow svg { width: 24px; height: 24px; }
  .ind-txt { min-width: 4.4em; font-size: 14.5px; }
  .pp-hint { margin-top: 6px; font-size: 11.5px; }
}
/* Ecrã baixo (telemóvel de lado): o livro fica com tudo o que há.
   Sai o título, a dica e os pontinhos; ficam as setas e o Capa/Verso. */
@media (max-height: 540px) {
  .pp-main { padding-top: 4px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .pp-head, .pp-hint { display: none; }
  .pp-dots { display: none; }
  .pp-scene { padding: 10px 0 16px; }
  .pp-dock { margin-top: 0; }
  .pp-arrow { width: 46px; height: 46px; }
  .pp-dbtn { height: 42px; }
}
@media (max-width: 380px) {
  .pp-dbtn { padding: 0 8px; }
  .pp-arrow { width: 46px; height: 46px; }
  .ind-txt { min-width: 3.8em; }
  .pp-dots button { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-stage, .pp-head, .pp-dock, .pp-hint, .pp-sway, .ind-in { animation: none !important; }
  .pp-leaf.stamped .pp-mark { animation: none; opacity: .96; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)) scale(1); }
  .pp-bl, .pp-shadow, .pp-hint { transition-duration: 1ms !important; }
}