/* Aprove Petgraf: scenes ported from the Codex study (petgraf-carteiras, read-only original, 08/11/2026):
   envelope saco and ofício, folder with pocket, folder with tabs, A5 certificate, A6 pad.
   The Codex poses are kept; --cx-reto (0 to 1) straightens each piece at the end so it faces the reader for approval.
   Faces take the client's art (background-image); without art they keep the Codex colors. */
.ap-cx { position: absolute; inset: 0; margin: 0; transform-style: preserve-3d; pointer-events: none; font-family: inherit; }
.ap-cx .ap-arte { background-size: cover; background-position: center; }

/* ---------- envelopes ---------- */
.cx-env { transform: translateY(var(--envelope-drop, 0%)) rotateZ(calc(var(--envelope-roll, -9deg) * (1 - var(--cx-reto, 0)))) rotateY(var(--envelope-yaw, 0deg)); }
.cx-env::before, .cx-env::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--cx-borda, #755168); transform-origin: left center; transform: rotateY(-90deg); }
.cx-env::after { left: 100%; }
.cx-env-face { position: absolute; inset: 0; border: 1px solid #9c798e; background: #76536b; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cx-env-frente { transform: translateZ(6px); background-image: linear-gradient(145deg, #8a5c76, #54334d); box-shadow: 0 14px 30px #42203942; }
.cx-env-verso { transform: rotateY(180deg); background-image: linear-gradient(145deg, #896579, #6c4b61); box-shadow: 0 14px 30px #42203942; }
.cx-env-face.ap-arte { border-color: rgba(60, 50, 40, .2); }
.cx-env-marca { position: absolute; left: 8%; right: 8%; bottom: 8%; padding-top: .5em; border-top: 1px solid currentColor; color: #fff7f9; font-size: clamp(11px, 1.3vw, 15px); font-weight: 700; }
.cx-env-doc { position: absolute; inset: 6% auto auto 6.25%; width: 87.5%; aspect-ratio: 210 / 297; background: #fbf7f3 center / cover;
  opacity: var(--envelope-sheet-opacity, 0); transform: translate3d(0, var(--envelope-sheet-y, -100%), 3px) rotateY(180deg); }
.cx-env-aba { position: absolute; inset: 0 0 auto; height: 10%; transform-style: preserve-3d; transform-origin: center top;
  transform: translateZ(calc(-1px + 7px * var(--envelope-flap-lift, 1))) rotateX(var(--envelope-flap, -180deg)); }
.cx-env-aba::before, .cx-env-aba::after { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cx-env-aba::before { background: linear-gradient(#eee9e6, #fffdf9); }
.cx-env-aba::after { background: var(--cx-aba, linear-gradient(#cba4b1, #ac7d91)); transform: rotateY(180deg); }
.cx-oficio .cx-env-aba { height: 26%; }
.cx-oficio .cx-env-doc { inset-inline: 4.35% auto; width: 91.3%; aspect-ratio: 210 / 99; background: none; transform-style: preserve-3d;
  transform: translate3d(var(--oficio-x, -46%), var(--envelope-sheet-y, -111%), calc(3px - var(--oficio-lift, 0px))) rotateY(180deg)
    rotateZ(var(--oficio-roll, 24deg)) rotateY(var(--oficio-yaw, -62deg)) scale(var(--oficio-scale, .72)); }
.cx-terco { position: absolute; inset: 0; transform-style: preserve-3d; }
.cx-terco > b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid #d2c0ca; }
.cx-terco-fr { background: linear-gradient(145deg, #fffdf9, #eee5e4); background-size: 100% 300%; }
.cx-terco-vs { background: linear-gradient(145deg, #fbf8f4, #ece6e3); transform: rotateX(180deg); }
.cx-terco-topo { top: -100%; bottom: 100%; transform-origin: center bottom; transform: translateZ(.35px) rotateX(var(--oficio-top, -180deg)); }
.cx-terco-topo .cx-terco-fr { background-position: 0 0; }
.cx-terco-meio .cx-terco-fr { background-position: 0 50%; }
.cx-terco-base { top: 100%; bottom: -100%; transform-origin: center top; transform: translateZ(.7px) rotateX(var(--oficio-bottom, 180deg)); }
.cx-terco-base .cx-terco-fr { background-position: 0 100%; }

/* ---------- folders ---------- */
.cx-pasta { transform-origin: 75% 50%;
  transform: translate(var(--folder-center, -25%), var(--folder-lift, 0%)) rotateX(calc(13deg * (1 - var(--cx-reto, 0))))
    rotateZ(calc(var(--folder-roll, -10deg) * (1 - var(--cx-reto, 0)))) rotateY(var(--folder-yaw, 0deg)) scale(var(--folder-scale, 1)); }
.cx-painel { position: absolute; inset: 0 auto 0 0; width: 50%; transform-style: preserve-3d; }
.cx-painel-dir { left: 50%; background: linear-gradient(115deg, #142934, #385863 55%, #22414e); border: 1px solid #49646c; box-shadow: .7rem 1.35rem 1.85rem #09141955; }
.cx-pasta::before { content: ""; position: absolute; inset: 0 auto 0 50%; width: calc(1px + var(--folder-cover-depth, 6px));
  background: linear-gradient(90deg, #1b3440, #49646c 56%, #23404e); transform-origin: left center; transform: translateZ(-1px) rotateY(-90deg); }
.cx-capa { transform-origin: right center; transform: translateZ(var(--folder-cover-depth, 6px)) rotateY(var(--folder-hinge, 180deg)); }
.cx-forro, .cx-pasta-frente, .cx-pasta-costas { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid #49646c; }
.cx-forro { background: linear-gradient(100deg, #25434f, #385963 72%, #1b3641); }
.cx-pasta-costas { transform: translateZ(-1px) rotateY(180deg); background: linear-gradient(145deg, #345764, #1a3441 70%, #142832); }
.cx-pasta-frente { transform: rotateY(180deg); background: linear-gradient(131deg, #486c78, #23404e 55%, #142c38); box-shadow: 0 1rem 2rem #09141966;
  color: #efd0a8; font-weight: 600; font-size: clamp(12px, 1.6vw, 20px); letter-spacing: .02em; }
.cx-pasta .ap-arte { background-size: cover; }
.cx-doc { position: absolute; inset: 5% 5% auto; aspect-ratio: 210 / 297; background: #fff center / cover; box-shadow: 0 .25rem .5rem #09141944; transform-origin: center bottom;
  opacity: var(--folder-sheet-opacity, 0);
  transform: translate3d(var(--folder-sheet-x, 25%), var(--folder-sheet-y, -46%), var(--folder-sheet-depth, 1px)) rotateZ(var(--folder-sheet-turn, 15deg)) rotateX(var(--folder-sheet-pitch, 0deg)); }
.cx-bolsa { position: absolute; inset: auto 0 0 2.5%; height: 28%; transform: translateZ(2px); }
.cx-bolsa svg { display: block; width: 100%; height: 100%; fill: #f2efeb; filter: drop-shadow(-2px -2px 3px #09141959); }
.cx-rasgo-area { position: absolute; inset: 0 0 10%; overflow: hidden; transform: translateZ(3px); }
.cx-cartao { position: absolute; width: 43%; left: 28.5%; bottom: -5%; aspect-ratio: 88 / 48; background: center / cover; border-radius: 6% / 11%; box-shadow: 0 0 .4rem #09141955;
  opacity: var(--folder-card-opacity, 0); transform: translate(var(--folder-card-x, 48%), var(--folder-card-y, -155%)) rotateZ(var(--folder-card-turn, -22deg)) rotateX(var(--folder-card-pitch, 0deg)); }
.cx-rasgo { position: absolute; bottom: 10%; left: 27%; width: 46%; height: 1px; background: #8b8882; box-shadow: 0 1px #ffffffab; transform: translateZ(4px); }
/* folder with tabs (wine) */
.cx-orelhas { --vinho: linear-gradient(130deg, #794557, #4c2939 68%, #3a1f2b); }
.cx-orelhas::before { display: none; }
.cx-orelhas .cx-painel-dir, .cx-orelhas .cx-forro { background: linear-gradient(102deg, #eee6e3, #faf6f2 32%, #fffaf6); border-color: #c8b7b9; }
.cx-orelhas .cx-pasta-frente, .cx-orelhas .cx-pasta-costas { background: var(--vinho); border-color: #966d7b; color: #f3dfe5; }
.cx-orelhas .cx-doc { inset-inline: 2% 8%; backface-visibility: hidden; }
.cx-orelhas .cx-forro { clip-path: url(#cx-orelhas-dentro); }
.cx-orelhas .cx-pasta-frente { clip-path: url(#cx-orelhas-fora); }
.cx-orelha { position: absolute; left: -1px; width: 9%; height: 12.8%; transform-origin: left center; transform-style: preserve-3d; transform: translateZ(var(--tab-depth, 6px)) rotateY(var(--tab-angle, 0deg)); }
.cx-orelha > span { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cx-orelha-dentro { border-radius: 100% 0 0 100% / 50% 0 0 50%; background: #fbf6f2; box-shadow: inset -1px 0 #b9a7aa; transform: rotateY(180deg); }
.cx-orelha-fora { border-radius: 0 100% 100% 0 / 0 50% 50% 0; background: var(--vinho); box-shadow: 1px 2px 3px #3a1f2b44; }
.cx-orelha-1 { top: 23%; --tab-angle: var(--tab-first-angle); --tab-depth: var(--tab-first-depth); }
.cx-orelha-2 { top: 61%; --tab-angle: var(--tab-second-angle); --tab-depth: var(--tab-second-depth); }
.cx-grampo { position: absolute; top: 32%; left: 43%; width: 2px; height: 36%; border-radius: 1px; background: linear-gradient(90deg, #9ba3a0, #e4e7e4); box-shadow: 1px 0 #31202b; }
.cx-orelha-1 .cx-grampo { opacity: var(--staple-first, 0); }
.cx-orelha-2 .cx-grampo { opacity: var(--staple-second, 0); }

/* ---------- certificate ---------- */
.cx-cert { transform: translateY(var(--certificate-rise, 12%)) rotateZ(var(--certificate-roll, -12deg)) rotateY(var(--certificate-yaw, 0deg)); }
.cx-cert-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fbf8ef center / cover; border: 1px solid #c6c4b3; box-shadow: 0 12px 28px #35472e30; }
.cx-cert-frente { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 20px); color: #365a46; transform: translateZ(.7px); }
.cx-cert-frente:not(.ap-arte)::before { content: ""; position: absolute; inset: 6%; border: 1px solid #b19a6c; pointer-events: none; }
.cx-cert-frente small { font-size: clamp(10px, 1.2vw, 15px); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cx-cert-frente strong { font-size: clamp(26px, 4vw, 56px); font-weight: 500; line-height: 1.1; }
.cx-cert-frente i { display: block; width: 62%; height: 1px; background: #9aa492; }
.cx-cert-frente i + i { width: 23%; margin-top: 4%; }
.cx-cert-verso { transform: rotateY(180deg); }

/* ---------- A6 pad ---------- */
.cx-bloco { transform-style: preserve-3d; }
.cx-pilha { position: absolute; inset: 0; background: center / cover; opacity: var(--pilha, 1);
  box-shadow: 2px 3px #b8ae96, 4px 6px #f5efde, 6px 8px #b8ae96, 8px 10px #e6dac2, 14px 21px 30px #594d383c; }
.cx-bloco::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; z-index: 2; background: #8d8065; transform-origin: right; opacity: var(--pilha, 1);
  transform: translateZ(2px) scaleX(calc(1 - var(--rasgo, 0))); }
.cx-folha-a6 { position: absolute; inset: 0; background: #fff center / cover; transform-origin: 50% 0;
  transform: translate3d(var(--fx, 0%), var(--fy, 0%), var(--fz, 1px)) rotateX(var(--frx, 0deg)) rotateZ(var(--frz, 0deg));
  box-shadow: 0 var(--fsombra, 0px) calc(var(--fsombra, 0px) * 2) rgba(60, 50, 35, .3); }

/* purple folder (Codex pasta-personalizada): side pocket folds in from the right edge; spot varnish on the cover name */
.cx-roxa { --vinho: linear-gradient(130deg, #644052, #3b2435); }
.cx-roxa::before { background: linear-gradient(90deg, #4c2f41, #896579 56%, #4a2d40); }
.cx-roxa .cx-painel-dir, .cx-roxa .cx-forro { background: linear-gradient(120deg, #966e88, #65495f); border-color: #98778e; }
.cx-roxa .cx-pasta-frente, .cx-roxa .cx-pasta-costas { background: linear-gradient(130deg, #644052, #3b2435); border-color: #896579; color: #ecd6df; }
.cx-roxa .ap-arte { background-size: cover; }
.cx-bolsa-lat { position: absolute; left: 100%; bottom: 0; width: 81%; height: 29.5%; transform-origin: left center; transform-style: preserve-3d; transform: translateZ(2px) rotateY(var(--custom-pocket, -180deg)); }
.cx-bolsa-lat > span { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cx-bolsa-lat-dentro { background: #8b647c; border-radius: 0 32% 0 0; }
.cx-bolsa-lat-fora { transform: rotateY(180deg); background: linear-gradient(115deg, #ae889d, #7c536d); border-radius: 32% 0 0 0; display: grid; place-items: center; color: #fff1e7; }
.cx-bolsa-lat-fora.ap-arte { background-size: cover; }
.cx-bolsa-lat-fora strong { font-size: clamp(9px, 1.1vw, 14px); font-weight: 600; }
.cx-bolsa-lat-fora i { position: absolute; top: 63%; left: 20%; width: 60%; height: 1px; background: #49323e; box-shadow: 0 1px #edd9df75; }
.cx-uv .cx-pasta-frente span { position: relative; }
.cx-uv .cx-pasta-frente span::after { content: attr(data-mark); position: absolute; inset: 0; color: transparent; background: linear-gradient(112deg, #bb8da6 25%, #fff3df 45%, #fff 50%, #b489a3 56%, #a87e9a 75%);
  background-size: 280% 100%; background-position: var(--custom-uv-light, 50%) 50%; -webkit-background-clip: text; background-clip: text; }

/* pré-natal accordion (Codex): nested panels, each folds on the left edge of the next */
.cx-pn { transform: translateX(var(--prenatal-offset, 75%)); }
.cx-pn-p { position: absolute; inset: 0 auto 0 100%; width: 100%; transform-style: preserve-3d; transform-origin: left center; }
.cx-pn-1 { left: 0; width: 25%; transform-origin: center; transform: rotateZ(calc(-6deg * var(--pn-tilt, 1))) scale(var(--prenatal-scale, 1)) rotateY(var(--prenatal-yaw, 180deg)); }
.cx-pn-2 { transform: translateZ(3.6px) rotateY(var(--prenatal-fold-first, 0deg)); }
.cx-pn-3 { transform: translateZ(1.6px) rotateY(var(--prenatal-fold-second, 0deg)); }
.cx-pn-4 { transform: translateZ(.8px) rotateY(var(--prenatal-fold-third, 0deg)); }
.cx-pn-face { position: absolute; inset: 0; background: #f3ede4 0 0 / 400% 100% no-repeat; border: 1px solid #2d182b20; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 8px 18px #42203920; }
.cx-pn-costas { transform: rotateY(180deg); }
.cx-pn-plano { position: absolute; inset: 0; opacity: 0; background-size: 100% 100%; box-shadow: 0 0 0 .5px rgba(60,50,40,.2), 0 20px 34px -20px rgba(40,30,15,.5); }

/* plain folder papers: white (Full Face sheet, Offset 240 g) and pearl (perolizado 250 g, fine gold and silver sparkle that moves with the light) */
.cx-papel-branco .cx-painel-dir, .cx-papel-branco .cx-forro { background: linear-gradient(110deg, #f3f1ec, #fffefb 45%, #f1eee8); border-color: #d9d4ca; }
.cx-papel-branco .cx-pasta-frente, .cx-papel-branco .cx-pasta-costas { background: linear-gradient(125deg, #fffefb, #f2efe9 60%, #e9e5dd); border-color: #d9d4ca; color: #5b5349; box-shadow: 0 1rem 2rem #3a302422; }
.cx-papel-branco.cx-pasta::before { background: linear-gradient(90deg, #e2ddd3, #fbfaf7 56%, #ddd7cc); }
.cx-papel-branco .cx-painel-dir { box-shadow: .7rem 1.35rem 1.85rem #3a302430; }
.cx-papel-perola .cx-painel-dir, .cx-papel-perola .cx-forro, .cx-papel-perola .cx-pasta-frente, .cx-papel-perola .cx-pasta-costas {
  border-color: #cfcbc4; color: #6a6157;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .82 0 0 0 0 .52 0 0 0 5 -2.35'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 220px 220px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .72 0 0 0 0 .78 0 0 0 0 .9 0 0 0 5 -2.45'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 220px 220px,
    linear-gradient(115deg, rgba(255, 255, 255, 0) calc(var(--brilho, 50%) - 30%), rgba(255, 246, 222, .75) var(--brilho, 50%), rgba(220, 228, 240, .5) calc(var(--brilho, 50%) + 12%), rgba(255, 255, 255, 0) calc(var(--brilho, 50%) + 32%)),
    linear-gradient(135deg, #d9dade, #ebe8e1 40%, #d3d6dc 70%, #e4dfd4); }
.cx-papel-perola.cx-pasta::before { background: linear-gradient(90deg, #d6d3cd, #f4f1ea 56%, #d2d0cc); }
.cx-papel-perola .cx-pasta-frente { box-shadow: 0 1rem 2rem #3a302430; }
.cx-papel-perola .cx-painel-dir { box-shadow: .7rem 1.35rem 1.85rem #3a302433; }

.cx-uv .cx-pasta-frente span { font-size: clamp(15px, 2.2vw, 28px); }
.cx-uv .cx-pasta-frente span::after { background: linear-gradient(112deg, rgba(255,255,255,0) 22%, #fff3df 42%, #ffffff 50%, #f2dcea 58%, rgba(255,255,255,0) 78%) 0 0 / 280% 100%;
  background-position: var(--custom-uv-light, 50%) 50%; -webkit-background-clip: text; background-clip: text; }
.cx-uv .cx-pasta-frente::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent calc(var(--custom-uv-light, 50%) - 25%), rgba(255,255,255,.55) var(--custom-uv-light, 50%), transparent calc(var(--custom-uv-light, 50%) + 25%)); }

/* spot varnish, tone on tone: the name sits close to the cover colour and turns glossy where the light passes */
.cx-uv.cx-roxa .cx-pasta-frente { color: #9a7489; }
.cx-uv .cx-pasta-frente span { font-weight: 700; letter-spacing: .02em; }
.cx-uv .cx-pasta-frente span::after { background: linear-gradient(112deg, rgba(255,255,255,0) 30%, rgba(255,240,226,.95) 45%, #ffffff 50%, rgba(246,224,236,.95) 55%, rgba(255,255,255,0) 70%) 0 0 / 300% 100%;
  background-position: var(--custom-uv-light, 50%) 50%; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 6px rgba(255,255,255,.35)); }

/* open flat spreads at the end of the plain folders */
.cx-planos { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform-style: flat; }
.cx-plano { position: absolute; inset: 0; box-shadow: 0 22px 36px -22px rgba(40, 30, 15, .5); }
.cx-plano .cx-painel { overflow: hidden; }
.cx-plano .cx-plano-capa { left: 50%; }
.cx-plano .cx-pasta-frente, .cx-plano .cx-pasta-costas, .cx-plano .cx-forro { transform: none; box-shadow: none; }
.cx-plano .cx-painel-dir { box-shadow: none; }
.cx-plano-dentro .cx-painel + .cx-painel { border-left: 1px solid rgba(60, 50, 40, .14); }
.cx-plano-rotulo { position: absolute; left: 0; bottom: 100%; margin-bottom: 6px; padding: 3px 10px; border-radius: 99px; background: #fff; color: var(--vermelho, #bb404d);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 0 0 1px var(--linha, #e6ddd2); z-index: 2; }

.cx-pasta .ap-arte, .cx-planos .ap-arte { background-size: 100% 100%; background-position: 0 0; }

/* the cover name must not show through, mirrored, when the folder turns to its back */
.cx-pasta .cx-pasta-frente { transform-style: preserve-3d; }
.cx-pasta .cx-pasta-frente > span { backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(.1px); }
.cx-plano .cx-pasta-frente > span { transform: none; }

/* same paper shadow on the Codex scenes (09/11) */
.cx-env-frente, .cx-env-verso, .cx-cert-face, .cx-pn-face { box-shadow: var(--borda-papel), var(--sombra-papel); }
.cx-painel-dir, .cx-papel-branco .cx-painel-dir, .cx-papel-perola .cx-painel-dir, .cx-roxa .cx-painel-dir { box-shadow: var(--sombra-papel); }
.cx-pasta-frente, .cx-papel-branco .cx-pasta-frente, .cx-papel-perola .cx-pasta-frente { box-shadow: var(--sombra-papel); }
.cx-doc { box-shadow: var(--borda-papel), 0 6px 14px -8px rgba(40, 30, 15, .3); }
.cx-plano, .cx-pn-plano { box-shadow: var(--borda-papel), var(--sombra-papel); }
.cx-pilha { box-shadow: 1px 2px #ddd6c9, 2px 4px #f6f1e7, 3px 6px #ddd6c9, var(--sombra-papel); }
.cx-plano .cx-painel-dir, .cx-plano .cx-pasta-frente { box-shadow: none; }

/* accordion for 2, 3 or 4 panels: the first panel is 1/N of the sheet, each next one folds on the left edge of the following */
.cx-pn-1 { width: calc(100% / var(--pn-n, 4)); }
.cx-pn-p:not(.cx-pn-1) { transform: translateZ(1.2px) rotateY(var(--dobra, 0deg)); }

/* softer fold: one sheet of card stock, a faint crease instead of a hard line */
.cx-pn-face { border: 0 !important; box-shadow: none !important; }
.cx-pn-p:not(.cx-pn-1) > .cx-pn-face::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; pointer-events: none;
  background: linear-gradient(90deg, rgba(60, 45, 30, .06), rgba(60, 45, 30, 0)); }
.cx-pn { filter: drop-shadow(0 10px 18px rgba(40, 30, 15, .16)); }
.cx-pn-grade { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.cx-pn-grade i { background: #fff center / 100% 100% no-repeat; }
.cx-pn-grade i + i { box-shadow: inset 1px 0 rgba(60, 45, 30, .08); }

/* open flap: a soft shade and edge so it reads apart from the background */
.cx-env-aba { filter: drop-shadow(0 -1px 0 rgba(60, 40, 50, .18)) drop-shadow(0 -6px 10px rgba(60, 40, 50, .14)); }
.cx-env-aba::before { background: linear-gradient(#e6dfdc, #f7f2ec) !important; }

/* ofício sheet folds: card-weight paper with a soft crease, the folded back a touch darker near the fold */
.cx-terco > b { border-color: rgba(60, 45, 50, .12) !important; }
.cx-terco-topo .cx-terco-vs { background: linear-gradient(to top, #e9e3de, #f7f3ee 40%, #fbf8f4) !important; }
.cx-terco-base .cx-terco-vs { background: linear-gradient(to bottom, #e9e3de, #f7f3ee 40%, #fbf8f4) !important; }
.cx-terco-meio .cx-terco-fr::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(60, 45, 30, .08), transparent 6%, transparent 94%, rgba(60, 45, 30, .08)); }

/* folds read as a scored crease on card stock: no seam, a soft valley with a faint highlight */
.cx-pn-p:not(.cx-pn-1) { left: calc(100% - .6px); }
.cx-pn-p:not(.cx-pn-1) > .cx-pn-face::after { width: 14px; translate: -7px 0;
  background: linear-gradient(90deg, rgba(60, 45, 30, 0), rgba(60, 45, 30, .035) 42%, rgba(255, 255, 255, .28) 50%, rgba(60, 45, 30, .03) 58%, rgba(60, 45, 30, 0)) !important; }
.cx-pn-grade i + i { box-shadow: none !important; }
.cx-pn-plano { position: absolute; }
.cx-vinco { position: absolute; top: 0; bottom: 0; width: 14px; translate: -7px 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(60, 45, 30, 0), rgba(60, 45, 30, .07) 44%, rgba(255, 255, 255, .45) 50%, rgba(60, 45, 30, .06) 56%, rgba(60, 45, 30, 0)); }
/* final spreads: a crease you can see on light and dark paper */
.cx-vinco { width: 18px; translate: -9px 0; z-index: 2;
  background: linear-gradient(90deg, rgba(40, 30, 20, 0), rgba(40, 30, 20, .13) 40%, rgba(40, 30, 20, .2) 47%, rgba(255, 255, 255, .55) 52%, rgba(40, 30, 20, .08) 60%, rgba(40, 30, 20, 0)) !important; }

/* fold shading, the balance Diego chose (09/11): a soft grey that grows toward the fold on both sides, a thin light line at the
   crease, scaled to the panel so it shows the same at any zoom; the same on the open spreads at the end */
.cx-pn-p:not(.cx-pn-1) > .cx-pn-face::after { content: none !important; }
.cx-pn-face.vl::before, .cx-pn-face.vr::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none; }
.cx-pn-face.vl::before { left: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, .6) .5%, rgba(40, 30, 20, .10) 1.4%, rgba(40, 30, 20, .045) 35%, rgba(40, 30, 20, 0)); }
.cx-pn-face.vr::after { right: 0; background: linear-gradient(270deg, rgba(40, 30, 20, .13) 0, rgba(40, 30, 20, .05) 35%, rgba(40, 30, 20, 0)); }
.cx-vinco { width: calc(18% / var(--pn-n, 4)) !important; translate: -50% 0 !important;
  background: linear-gradient(90deg, rgba(40, 30, 20, 0), rgba(40, 30, 20, .05) 25%, rgba(40, 30, 20, .13) 49%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, .7) 51%, rgba(40, 30, 20, .10) 52%, rgba(40, 30, 20, .04) 75%, rgba(40, 30, 20, 0)) !important; }