/* Base comum das versões do guia de serviços (fontes, cores, página A4, modos de prévia) */
@font-face { font-family: "Playfair"; src: url("fontes/PlayfairDisplay.ttf"); font-weight: 400 900; font-style: normal; }
@font-face { font-family: "Playfair"; src: url("fontes/PlayfairDisplayItalic.ttf"); font-weight: 400 900; font-style: italic; }
@font-face { font-family: "Josefin"; src: url("fontes/JosefinSans.ttf"); font-weight: 100 700; font-style: normal; }
@font-face { font-family: "Fraunces"; src: url("fontes/Fraunces.ttf"); font-weight: 100 900; font-style: normal; }
@font-face { font-family: "Fraunces"; src: url("fontes/FrauncesItalic.ttf"); font-weight: 100 900; font-style: italic; }
@font-face { font-family: "Mono"; src: url("fontes/JetBrainsMonoItalic.ttf"); font-weight: 100 800; font-style: italic; }

:root {
  --vinho: #3B1620; --burg: #652535; --petroleo: #365D63; --salvia: #5A725F;
  --rose: #C7BCBF; --pedra: #DCE0DE; --claro: #EEEFEC; --manteiga: #EEE0A5;
}
@page { size: A4; margin: 0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #8f8f8f; }
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
em { font-variation-settings: "WONK" 0; }

.pagina { width: 210mm; height: 297mm; position: relative; overflow: hidden; color: var(--vinho);
  background: var(--pedra) url("texturas/pedra.jpg") center / cover; break-after: page; }
.pagina.escura { background: var(--burg) url("texturas/burgundy.jpg") center / cover; color: var(--claro); }
.pagina.rosada { background: var(--rose) url("texturas/rose.jpg") center / cover; }
.pagina > * { position: absolute; }

/* camada contínua: o mesmo desenho largo (todas as páginas) aparece recortado em cada página */
.continuo { position: absolute; top: 0; height: 297mm; width: calc(var(--n, 3) * 210mm); left: calc(var(--i) * -210mm); pointer-events: none; }

.cabecalho { top: 11mm; left: 16mm; right: 16mm; display: flex; justify-content: space-between;
  font: 700 7.4pt "Josefin"; letter-spacing: .32em; text-transform: uppercase; }
.rodape { bottom: 9mm; left: 16mm; right: 16mm; display: flex; justify-content: space-between;
  font: 600 6.6pt "Josefin"; letter-spacing: .26em; text-transform: uppercase; opacity: .75; }
.rot { font: 700 5.8pt "Josefin"; letter-spacing: .22em; text-transform: uppercase; opacity: .72; }
.ast { display: inline-block; width: .95em; height: .95em; vertical-align: -0.1em; }

/* tira de papel com fita (bilhete) */
.tira { background: var(--claro) url("texturas/claro.jpg") center / 210mm 297mm; color: var(--burg);
  clip-path: polygon(0 3%, 2% 0, 99% 4%, 100% 95%, 98% 100%, 1% 97%);
  filter: drop-shadow(0 .5mm .6mm rgba(40,12,20,.25)); }
.fita { background: rgba(238,239,236,.6); z-index: 3; box-shadow: 0 0 .4mm rgba(0,0,0,.08);
  clip-path: polygon(0 10%, 6% 0, 12% 12%, 20% 0, 100% 6%, 94% 100%, 86% 88%, 78% 100%, 0 92%); }
.marca { background: linear-gradient(transparent 12%, var(--manteiga) 12% 88%, transparent 88%); padding: 0 .12em; }

/* ---------- prévia lado a lado (?tira=1) e versão web (?web=1) ---------- */
body.modo-tira { display: flex; width: max-content; }
body.modo-tira .pagina { box-shadow: inset -0.25mm 0 0 rgba(0,0,0,.18); }
@media screen { body:not(.modo-tira):not(.modo-web) .pagina { margin: 0 auto 10mm; } }

body.modo-web { height: 100vh; overflow: hidden; background: #2b2b2b; }
.trilho { display: flex; align-items: center; height: 100vh; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.trilho::-webkit-scrollbar { display: none; }
.trilho .pagina { flex: none; scroll-snap-align: center; transform-origin: center; }
.web-dica { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); font: 600 11px "Josefin"; letter-spacing: .3em;
  text-transform: uppercase; color: #ddd; opacity: .7; white-space: nowrap; }
.entra { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
body.modo-web .entra:not(.visto) { opacity: 0; transform: translateY(6mm); }