/* Moventra — o carnê da compra programada. A stapled pad of payment slips on a wooden desk.
   Slip fields, amounts, bar pattern: Courier Prime. Headings and text: Libre Franklin. */
:root {
  --paper: #f6f1e4; --paper-2: #efe8d6; --ink: #1b1a17; --ink-2: #4b463c; --rule: #1b1a17;
  --guil: #b9cfe6; --red: #c1121f; --red-d: #9e0f19;
  --blue: #143d6b; --blue-d: #0e2d50; --blue-dd: #0a2240; --on-blue: #f6f1e4; --on-blue-2: #b8cbe2;
  --card: #e7edf3; --card-ink: #143d6b; --card-ink-2: #3c5677;
  --wood: #7a5236; --wood-d: #5e3e28; --wood-edge: #3a2519; --on-wood: #f3e6cf; --on-wood-2: #dcc8a8;
  --t1: #93b398; --t2: #d6b263; --t3: #cc8f74; --t4: #97a6c8; --t5: #b996b9; --t6: #aab277;
  --t1l: #e2ebe2; --t2l: #f2e7cb; --t3l: #f1e0d6; --t4l: #e3e8f2; --t5l: #eee2ee; --t6l: #ebeddc;
  --mono: 'Courier Prime', 'Courier New', ui-monospace, monospace;
  --sans: 'Libre Franklin', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  --guil-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='64'%3E%3Cg fill='none' stroke='%23b9cfe6' stroke-width='.7'%3E%3Cpath d='M0 32.0 L3 35.6 L6 39.0 L9 42.2 L12 44.9 L15 47.1 L18 48.6 L21 49.5 L24 49.7 L27 49.3 L30 48.3 L33 46.8 L36 44.9 L39 42.7 L42 40.5 L45 38.2 L48 36.2 L51 34.4 L54 33.1 L57 32.3 L60 32.0 L63 32.3 L66 33.1 L69 34.4 L72 36.2 L75 38.2 L78 40.5 L81 42.7 L84 44.9 L87 46.8 L90 48.3 L93 49.3 L96 49.7 L99 49.5 L102 48.6 L105 47.1 L108 44.9 L111 42.2 L114 39.0 L117 35.6 L120 32.0 L123 28.4 L126 25.0 L129 21.8 L132 19.1 L135 16.9 L138 15.4 L141 14.5 L144 14.3 L147 14.7 L150 15.7 L153 17.2 L156 19.1 L159 21.3 L162 23.5 L165 25.8 L168 27.8 L171 29.6 L174 30.9 L177 31.7 L180 32.0 L183 31.7 L186 30.9 L189 29.6 L192 27.8 L195 25.8 L198 23.5 L201 21.3 L204 19.1 L207 17.2 L210 15.7 L213 14.7 L216 14.3 L219 14.5 L222 15.4 L225 16.9 L228 19.1 L231 21.8 L234 25.0 L237 28.4 L240 32.0'/%3E%3Cpath d='M0 48.2 L3 49.3 L6 49.7 L9 49.5 L12 48.6 L15 47.3 L18 45.5 L21 43.4 L24 41.1 L27 38.9 L30 36.7 L33 34.9 L36 33.4 L39 32.5 L42 32.0 L45 32.1 L48 32.8 L51 34.0 L54 35.7 L57 37.6 L60 39.8 L63 42.1 L66 44.3 L69 46.3 L72 47.9 L75 49.1 L78 49.7 L81 49.6 L84 48.9 L87 47.6 L90 45.6 L93 43.0 L96 40.0 L99 36.6 L102 33.0 L105 29.4 L108 25.9 L111 22.7 L114 19.8 L117 17.5 L120 15.8 L123 14.7 L126 14.3 L129 14.5 L132 15.4 L135 16.7 L138 18.5 L141 20.6 L144 22.9 L147 25.1 L150 27.3 L153 29.1 L156 30.6 L159 31.5 L162 32.0 L165 31.9 L168 31.2 L171 30.0 L174 28.3 L177 26.4 L180 24.2 L183 21.9 L186 19.7 L189 17.7 L192 16.1 L195 14.9 L198 14.3 L201 14.4 L204 15.1 L207 16.4 L210 18.4 L213 21.0 L216 24.0 L219 27.4 L222 31.0 L225 34.6 L228 38.1 L231 41.3 L234 44.2 L237 46.5 L240 48.2'/%3E%3Cpath d='M0 46.0 L3 44.0 L6 41.8 L9 39.5 L12 37.3 L15 35.4 L18 33.8 L21 32.7 L24 32.1 L27 32.1 L30 32.6 L33 33.6 L36 35.1 L39 37.0 L42 39.2 L45 41.4 L48 43.7 L51 45.7 L54 47.5 L57 48.8 L60 49.6 L63 49.7 L66 49.2 L69 48.0 L72 46.2 L75 43.8 L78 40.9 L81 37.6 L84 34.1 L87 30.5 L90 26.9 L93 23.6 L96 20.6 L99 18.1 L102 16.2 L105 14.9 L108 14.3 L111 14.4 L114 15.1 L117 16.3 L120 18.0 L123 20.0 L126 22.2 L129 24.5 L132 26.7 L135 28.6 L138 30.2 L141 31.3 L144 31.9 L147 31.9 L150 31.4 L153 30.4 L156 28.9 L159 27.0 L162 24.8 L165 22.6 L168 20.3 L171 18.3 L174 16.5 L177 15.2 L180 14.4 L183 14.3 L186 14.8 L189 16.0 L192 17.8 L195 20.2 L198 23.1 L201 26.4 L204 29.9 L207 33.5 L210 37.1 L213 40.4 L216 43.4 L219 45.9 L222 47.8 L225 49.1 L228 49.7 L231 49.6 L234 48.9 L237 47.7 L240 46.0'/%3E%3Cpath d='M0 34.2 L3 33.0 L6 32.2 L9 32.0 L12 32.4 L15 33.3 L18 34.7 L21 36.5 L24 38.5 L27 40.8 L30 43.0 L33 45.2 L36 47.0 L39 48.5 L42 49.4 L45 49.7 L48 49.4 L51 48.4 L54 46.8 L57 44.5 L60 41.7 L63 38.6 L66 35.1 L69 31.5 L72 27.9 L75 24.5 L78 21.4 L81 18.8 L84 16.7 L87 15.2 L90 14.4 L93 14.3 L96 14.8 L99 15.9 L102 17.5 L105 19.4 L108 21.6 L111 23.9 L114 26.1 L117 28.1 L120 29.8 L123 31.0 L126 31.8 L129 32.0 L132 31.6 L135 30.7 L138 29.3 L141 27.5 L144 25.5 L147 23.2 L150 21.0 L153 18.8 L156 17.0 L159 15.5 L162 14.6 L165 14.3 L168 14.6 L171 15.6 L174 17.2 L177 19.5 L180 22.3 L183 25.4 L186 28.9 L189 32.5 L192 36.1 L195 39.5 L198 42.6 L201 45.2 L204 47.3 L207 48.8 L210 49.6 L213 49.7 L216 49.2 L219 48.1 L222 46.5 L225 44.6 L228 42.4 L231 40.1 L234 37.9 L237 35.9 L240 34.2'/%3E%3Cpath d='M0 34.2 L3 35.9 L6 37.9 L9 40.1 L12 42.4 L15 44.6 L18 46.5 L21 48.1 L24 49.2 L27 49.7 L30 49.6 L33 48.8 L36 47.3 L39 45.2 L42 42.6 L45 39.5 L48 36.1 L51 32.5 L54 28.9 L57 25.4 L60 22.3 L63 19.5 L66 17.2 L69 15.6 L72 14.6 L75 14.3 L78 14.6 L81 15.5 L84 17.0 L87 18.8 L90 21.0 L93 23.2 L96 25.5 L99 27.5 L102 29.3 L105 30.7 L108 31.6 L111 32.0 L114 31.8 L117 31.0 L120 29.8 L123 28.1 L126 26.1 L129 23.9 L132 21.6 L135 19.4 L138 17.5 L141 15.9 L144 14.8 L147 14.3 L150 14.4 L153 15.2 L156 16.7 L159 18.8 L162 21.4 L165 24.5 L168 27.9 L171 31.5 L174 35.1 L177 38.6 L180 41.7 L183 44.5 L186 46.8 L189 48.4 L192 49.4 L195 49.7 L198 49.4 L201 48.5 L204 47.0 L207 45.2 L210 43.0 L213 40.8 L216 38.5 L219 36.5 L222 34.7 L225 33.3 L228 32.4 L231 32.0 L234 32.2 L237 33.0 L240 34.2'/%3E%3Cpath d='M0 46.0 L3 47.7 L6 48.9 L9 49.6 L12 49.7 L15 49.1 L18 47.8 L21 45.9 L24 43.4 L27 40.4 L30 37.1 L33 33.5 L36 29.9 L39 26.4 L42 23.1 L45 20.2 L48 17.8 L51 16.0 L54 14.8 L57 14.3 L60 14.4 L63 15.2 L66 16.5 L69 18.3 L72 20.3 L75 22.6 L78 24.8 L81 27.0 L84 28.9 L87 30.4 L90 31.4 L93 31.9 L96 31.9 L99 31.3 L102 30.2 L105 28.6 L108 26.7 L111 24.5 L114 22.2 L117 20.0 L120 18.0 L123 16.3 L126 15.1 L129 14.4 L132 14.3 L135 14.9 L138 16.2 L141 18.1 L144 20.6 L147 23.6 L150 26.9 L153 30.5 L156 34.1 L159 37.6 L162 40.9 L165 43.8 L168 46.2 L171 48.0 L174 49.2 L177 49.7 L180 49.6 L183 48.8 L186 47.5 L189 45.7 L192 43.7 L195 41.4 L198 39.2 L201 37.0 L204 35.1 L207 33.6 L210 32.6 L213 32.1 L216 32.1 L219 32.7 L222 33.8 L225 35.4 L228 37.3 L231 39.5 L234 41.8 L237 44.0 L240 46.0'/%3E%3Cpath d='M0 48.2 L3 46.5 L6 44.2 L9 41.3 L12 38.1 L15 34.6 L18 31.0 L21 27.4 L24 24.0 L27 21.0 L30 18.4 L33 16.4 L36 15.1 L39 14.4 L42 14.3 L45 14.9 L48 16.1 L51 17.7 L54 19.7 L57 21.9 L60 24.2 L63 26.4 L66 28.3 L69 30.0 L72 31.2 L75 31.9 L78 32.0 L81 31.5 L84 30.6 L87 29.1 L90 27.3 L93 25.1 L96 22.9 L99 20.6 L102 18.5 L105 16.7 L108 15.4 L111 14.5 L114 14.3 L117 14.7 L120 15.8 L123 17.5 L126 19.8 L129 22.7 L132 25.9 L135 29.4 L138 33.0 L141 36.6 L144 40.0 L147 43.0 L150 45.6 L153 47.6 L156 48.9 L159 49.6 L162 49.7 L165 49.1 L168 47.9 L171 46.3 L174 44.3 L177 42.1 L180 39.8 L183 37.6 L186 35.7 L189 34.0 L192 32.8 L195 32.1 L198 32.0 L201 32.5 L204 33.4 L207 34.9 L210 36.7 L213 38.9 L216 41.1 L219 43.4 L222 45.5 L225 47.3 L228 48.6 L231 49.5 L234 49.7 L237 49.3 L240 48.2'/%3E%3Cpath d='M0 32.0 L3 35.6 L6 38.8 L9 41.3 L12 43.0 L15 43.5 L18 43.0 L21 41.3 L24 38.8 L27 35.6 L30 32.0 L33 28.4 L36 25.2 L39 22.7 L42 21.0 L45 20.5 L48 21.0 L51 22.7 L54 25.2 L57 28.4 L60 32.0 L63 35.6 L66 38.8 L69 41.3 L72 43.0 L75 43.5 L78 43.0 L81 41.3 L84 38.8 L87 35.6 L90 32.0 L93 28.4 L96 25.2 L99 22.7 L102 21.0 L105 20.5 L108 21.0 L111 22.7 L114 25.2 L117 28.4 L120 32.0 L123 35.6 L126 38.8 L129 41.3 L132 43.0 L135 43.5 L138 43.0 L141 41.3 L144 38.8 L147 35.6 L150 32.0 L153 28.4 L156 25.2 L159 22.7 L162 21.0 L165 20.5 L168 21.0 L171 22.7 L174 25.2 L177 28.4 L180 32.0 L183 35.6 L186 38.8 L189 41.3 L192 43.0 L195 43.5 L198 43.0 L201 41.3 L204 38.8 L207 35.6 L210 32.0 L213 28.4 L216 25.2 L219 22.7 L222 21.0 L225 20.5 L228 21.0 L231 22.7 L234 25.2 L237 28.4 L240 32.0'/%3E%3Cpath d='M0 43.5 L3 43.0 L6 41.3 L9 38.8 L12 35.6 L15 32.0 L18 28.4 L21 25.2 L24 22.7 L27 21.0 L30 20.5 L33 21.0 L36 22.7 L39 25.2 L42 28.4 L45 32.0 L48 35.6 L51 38.8 L54 41.3 L57 43.0 L60 43.5 L63 43.0 L66 41.3 L69 38.8 L72 35.6 L75 32.0 L78 28.4 L81 25.2 L84 22.7 L87 21.0 L90 20.5 L93 21.0 L96 22.7 L99 25.2 L102 28.4 L105 32.0 L108 35.6 L111 38.8 L114 41.3 L117 43.0 L120 43.5 L123 43.0 L126 41.3 L129 38.8 L132 35.6 L135 32.0 L138 28.4 L141 25.2 L144 22.7 L147 21.0 L150 20.5 L153 21.0 L156 22.7 L159 25.2 L162 28.4 L165 32.0 L168 35.6 L171 38.8 L174 41.3 L177 43.0 L180 43.5 L183 43.0 L186 41.3 L189 38.8 L192 35.6 L195 32.0 L198 28.4 L201 25.2 L204 22.7 L207 21.0 L210 20.5 L213 21.0 L216 22.7 L219 25.2 L222 28.4 L225 32.0 L228 35.6 L231 38.8 L234 41.3 L237 43.0 L240 43.5'/%3E%3Cpath d='M0 32.0 L3 28.4 L6 25.2 L9 22.7 L12 21.0 L15 20.5 L18 21.0 L21 22.7 L24 25.2 L27 28.4 L30 32.0 L33 35.6 L36 38.8 L39 41.3 L42 43.0 L45 43.5 L48 43.0 L51 41.3 L54 38.8 L57 35.6 L60 32.0 L63 28.4 L66 25.2 L69 22.7 L72 21.0 L75 20.5 L78 21.0 L81 22.7 L84 25.2 L87 28.4 L90 32.0 L93 35.6 L96 38.8 L99 41.3 L102 43.0 L105 43.5 L108 43.0 L111 41.3 L114 38.8 L117 35.6 L120 32.0 L123 28.4 L126 25.2 L129 22.7 L132 21.0 L135 20.5 L138 21.0 L141 22.7 L144 25.2 L147 28.4 L150 32.0 L153 35.6 L156 38.8 L159 41.3 L162 43.0 L165 43.5 L168 43.0 L171 41.3 L174 38.8 L177 35.6 L180 32.0 L183 28.4 L186 25.2 L189 22.7 L192 21.0 L195 20.5 L198 21.0 L201 22.7 L204 25.2 L207 28.4 L210 32.0 L213 35.6 L216 38.8 L219 41.3 L222 43.0 L225 43.5 L228 43.0 L231 41.3 L234 38.8 L237 35.6 L240 32.0'/%3E%3Cpath d='M0 20.5 L3 21.0 L6 22.7 L9 25.2 L12 28.4 L15 32.0 L18 35.6 L21 38.8 L24 41.3 L27 43.0 L30 43.5 L33 43.0 L36 41.3 L39 38.8 L42 35.6 L45 32.0 L48 28.4 L51 25.2 L54 22.7 L57 21.0 L60 20.5 L63 21.0 L66 22.7 L69 25.2 L72 28.4 L75 32.0 L78 35.6 L81 38.8 L84 41.3 L87 43.0 L90 43.5 L93 43.0 L96 41.3 L99 38.8 L102 35.6 L105 32.0 L108 28.4 L111 25.2 L114 22.7 L117 21.0 L120 20.5 L123 21.0 L126 22.7 L129 25.2 L132 28.4 L135 32.0 L138 35.6 L141 38.8 L144 41.3 L147 43.0 L150 43.5 L153 43.0 L156 41.3 L159 38.8 L162 35.6 L165 32.0 L168 28.4 L171 25.2 L174 22.7 L177 21.0 L180 20.5 L183 21.0 L186 22.7 L189 25.2 L192 28.4 L195 32.0 L198 35.6 L201 38.8 L204 41.3 L207 43.0 L210 43.5 L213 43.0 L216 41.3 L219 38.8 L222 35.6 L225 32.0 L228 28.4 L231 25.2 L234 22.7 L237 21.0 L240 20.5'/%3E%3C/g%3E%3C/svg%3E");
  --wood-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='240'%3E%3Cg fill='none'%3E%3Cpath d='M0 59 C200 56 400 61 600 59 S1000 56 1200 59' stroke='%236a4630' stroke-width='2' stroke-opacity='.7'/%3E%3Cpath d='M0 40 C200 37 400 42 600 40 S1000 37 1200 40' stroke='%238a5f40' stroke-width='2' stroke-opacity='.7'/%3E%3Cpath d='M0 217 C200 209 400 225 600 217 S1000 209 1200 217' stroke='%235a3a25' stroke-width='0.8' stroke-opacity='.7'/%3E%3Cpath d='M0 125 C200 120 400 129 600 125 S1000 120 1200 125' stroke='%235a3a25' stroke-width='1' stroke-opacity='.7'/%3E%3Cpath d='M0 65 C200 56 400 73 600 65 S1000 56 1200 65' stroke='%238a5f40' stroke-width='0.8' stroke-opacity='.7'/%3E%3Cpath d='M0 191 C200 184 400 199 600 191 S1000 184 1200 191' stroke='%235a3a25' stroke-width='1' stroke-opacity='.7'/%3E%3Cpath d='M0 76 C200 69 400 82 600 76 S1000 69 1200 76' stroke='%235a3a25' stroke-width='1.4' stroke-opacity='.7'/%3E%3Cpath d='M0 200 C200 196 400 204 600 200 S1000 196 1200 200' stroke='%238a5f40' stroke-width='2' stroke-opacity='.7'/%3E%3Cpath d='M0 62 C200 58 400 65 600 62 S1000 58 1200 62' stroke='%235a3a25' stroke-width='1.4' stroke-opacity='.7'/%3E%3Cpath d='M0 223 C200 215 400 231 600 223 S1000 215 1200 223' stroke='%235a3a25' stroke-width='1.4' stroke-opacity='.7'/%3E%3Cpath d='M0 215 C200 209 400 221 600 215 S1000 209 1200 215' stroke='%238a5f40' stroke-width='1.4' stroke-opacity='.7'/%3E%3Cpath d='M0 49 C200 44 400 54 600 49 S1000 44 1200 49' stroke='%236a4630' stroke-width='1.4' stroke-opacity='.7'/%3E%3Cpath d='M0 109 C200 105 400 112 600 109 S1000 105 1200 109' stroke='%235a3a25' stroke-width='1.4' stroke-opacity='.7'/%3E%3Cpath d='M0 23 C200 18 400 28 600 23 S1000 18 1200 23' stroke='%238a5f40' stroke-width='1.4' stroke-opacity='.7'/%3E%3C/g%3E%3C/svg%3E");
  --out: cubic-bezier(.16, 1, .3, 1); --flip: cubic-bezier(.62, 0, .32, 1); --thud: cubic-bezier(.3, 1.6, .5, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wood) var(--wood-img) 0 0 / 1200px 240px repeat; color: var(--ink); font: 400 15px/1.55 var(--sans); overflow-x: hidden; }
::selection { background: var(--red); color: var(--paper); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
img { display: block; }

.desk { padding: 44px 56px 96px; max-width: 1480px; margin: 0 auto; }

/* ============ stage: the pad + the pile of torn stubs ============ */
.stage { display: grid; grid-template-columns: minmax(0, 960px) minmax(180px, 1fr); column-gap: 168px; align-items: start; }
.pad { position: relative; min-width: 0; }

/* the cover's band at the binding */
.spine { position: relative; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 14px 20px 16px; background: var(--blue); color: var(--on-blue); border-radius: 5px 5px 0 0; box-shadow: 0 -1px 0 rgba(255,255,255,.08) inset; }
.spine::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(0,0,0,.35); }
.brand img { height: 30px; width: auto; }
.seg { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; border: 0; min-width: 0; }
.seg legend, .rng .lg { float: left; margin-right: 10px; font: 700 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--on-blue-2); }
.seg label { position: relative; display: block; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 7px 10px 6px; border: 1px solid rgba(246,241,228,.45); margin-left: -1px; font: 700 13px/1.1 var(--mono); color: var(--on-blue); white-space: nowrap; transition: background .25s var(--out), color .25s var(--out); }
.seg label:first-of-type span { margin-left: 0; border-radius: 2px 0 0 2px; }
.seg label:last-of-type span { border-radius: 0 2px 2px 0; }
.seg input:checked + span { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.seg input:hover + span { background: rgba(246,241,228,.12); }
.seg input:checked:hover + span { background: var(--paper); }
.seg input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: 2px; }
.rng { display: flex; align-items: center; gap: 8px; }
.rng .lg { float: none; margin-right: 2px; }
.rng input[type=range] { width: 128px; accent-color: var(--paper); margin: 0; cursor: pointer; }
.rng output { min-width: 34px; font: 700 15px/1 var(--mono); }
.rng small { font: 400 11px/1 var(--mono); color: var(--on-blue-2); }
.lang { order: 1; display: flex; }
.seg, .rng { order: 2; }
.lang button { background: none; border: 1px solid rgba(246,241,228,.45); color: var(--on-blue-2); font: 700 11px/1 var(--mono); letter-spacing: .1em; padding: 6px 8px; margin-left: -1px; }
.lang button[aria-pressed=true] { color: var(--ink); background: var(--paper); border-color: var(--paper); }

/* the sheets: every page sits in the same grid cell */
.sheets { position: relative; display: grid; perspective: 2400px; container: sheets / inline-size; }
.sheets > .slips, .sheets > .dividers, .sheets > .cover, .sheets > .endsheet { grid-area: 1 / 1; min-width: 0; }
.slips { display: grid; position: relative; z-index: 2; touch-action: pan-y; }
.slip { grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 214px; min-height: 440px; background: var(--paper); transform-origin: 50% 0; backface-visibility: hidden; transition: transform .8s var(--flip), opacity .8s var(--flip), visibility 0s .8s; box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.slip.gone { transform: rotateX(172deg); opacity: 0; visibility: hidden; pointer-events: none; }
.slip.back-in { transition: transform .7s var(--flip), opacity .5s var(--flip); }
.sheets::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 0 0 3px 3px; background: var(--paper-2); box-shadow: var(--edges, none); }
.pad { filter: drop-shadow(0 28px 26px rgba(30, 16, 8, .45)) drop-shadow(0 2px 2px rgba(30, 16, 8, .35)); }

/* staples through the band */
.staple { position: absolute; top: -9px; z-index: 9; width: 40px; height: 5px; border-radius: 2px; background: #c9cdd2; box-shadow: 0 1px 0 rgba(0,0,0,.45), inset 0 -1px 0 #8e949b; }
.staple.s1 { left: 18%; } .staple.s2 { right: 30%; }

/* ---------- the ficha de compensação ---------- */
.ficha { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 14px 16px 12px 18px; background: var(--paper) var(--guil-img) 0 0 / 240px 64px repeat; }
.s-hd { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: stretch; border-bottom: 2px solid var(--rule); }
.s-bank { display: flex; align-items: center; gap: 8px; padding: 0 12px 6px 0; border-right: 2px solid var(--rule); font: 800 15px/1 var(--sans); letter-spacing: -.01em; }
.s-bank img { height: 24px; width: auto; }
.s-code { display: flex; align-items: center; padding: 0 12px 6px; border-right: 2px solid var(--rule); font: 700 17px/1 var(--mono); }
.s-line { display: flex; align-items: center; justify-content: flex-end; padding: 0 0 6px 12px; font: 700 13.5px/1.2 var(--mono); letter-spacing: .04em; text-align: right; }
.fx { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, .6fr) minmax(0, 1fr) minmax(0, 1fr) 178px; border-left: 1px solid var(--rule); }
.f { position: relative; min-width: 0; padding: 3px 7px 4px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.f > b { display: block; font: 600 8.5px/1.25 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f > span { display: block; min-height: 17px; font: 400 13.5px/1.3 var(--mono); overflow-wrap: anywhere; }
.f.lo > span { font-size: 12px; white-space: nowrap; overflow: hidden; }
.f > i { display: block; font: italic 400 10.5px/1.2 var(--mono); color: var(--red-d); }
.f.c6 { grid-column: span 6; } .f.c3 { grid-column: span 3; } .f.c2 { grid-column: span 2; } .f.c7 { grid-column: 1 / -1; }
.f.rt { grid-column: 7; background: rgba(185, 207, 230, .28); }
.f.rt > span { text-align: right; }
.f.ins { grid-row: span 3; }
.f.ins p { margin: 2px 0 0; font: 400 13px/1.45 var(--mono); max-width: 62ch; }
.f.ins p + p { margin-top: 4px; }
.f.val > span { font-weight: 700; font-size: 17px; }
.f.pag > span { font-weight: 700; }
.venc { overflow: visible; }
.vstamp { display: inline-block !important; float: right; margin-top: 1px; padding: 1px 6px 0; border: 2px solid var(--red); color: var(--red); font: 700 14px/1.15 var(--mono) !important; letter-spacing: .06em; transform: rotate(-2.5deg); min-height: 0 !important; }
.venc > i { clear: both; text-align: right; }
.s-ft { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 18px; padding-top: 8px; margin-top: auto; }
.bars { height: 46px; width: 360px; max-width: 100%; display: block; }
.s-ft .aut { font: 600 9px/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); text-align: right; }
.s-ft small { grid-column: 1; font: 400 10px/1.2 var(--mono); color: var(--ink-2); margin-top: 2px; }

/* ---------- the tear-off stub ---------- */
.stub { position: relative; display: flex; flex-direction: column; gap: 0; padding: 14px 16px 12px 18px; background: var(--paper) var(--guil-img) 120px 0 / 240px 64px repeat; border-left: 2px dotted rgba(27, 26, 23, .55); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .45s var(--out); z-index: 2; }
.stub::before, .stub::after { content: ''; position: absolute; left: -8px; width: 14px; height: 14px; border-radius: 50%; background: var(--wood-d); }
.stub::before { top: -7px; } .stub::after { bottom: -7px; }
.stub.drag { transition: none; cursor: grabbing; box-shadow: -6px 10px 18px -8px rgba(30, 16, 8, .45); }
.stub:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }
.st-h { font: 800 11px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 2px solid var(--rule); }
.sf { padding: 4px 0 4px; border-bottom: 1px solid var(--rule); }
.sf b { display: block; font: 600 8.5px/1.25 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.sf span { display: block; font: 400 13.5px/1.3 var(--mono); }
.sf.v span { font-weight: 700; font-size: 16px; }
.sf i { display: block; font: italic 400 10.5px/1.2 var(--mono); color: var(--red-d); }
.st-aut { margin-top: 8px; height: 38px; border: 1px solid var(--rule); padding: 3px 6px; font: 600 8.5px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.st-pull { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 8px; font: 700 12px/1.2 var(--mono); color: var(--red-d); }
.st-pull::after { content: ''; flex: 1; height: 2px; background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); position: relative; }
.st-pull em { font-style: normal; }
.slip.torn .stub { visibility: hidden; }
.slip.torn { background: transparent; }
.slip.torn::after { content: ''; position: absolute; top: 0; bottom: 0; right: 202px; width: 13px; background: var(--paper); clip-path: polygon(0 0, 45% 1.7%, 40% 3.8%, 59% 5.7%, 68% 7.0%, 63% 8.2%, 41% 9.5%, 89% 11.3%, 50% 12.7%, 97% 14.8%, 61% 16.8%, 38% 19.4%, 54% 21.8%, 43% 23.2%, 88% 24.8%, 73% 26.3%, 59% 28.4%, 39% 30.3%, 48% 31.6%, 63% 33.8%, 73% 35.4%, 54% 37.2%, 80% 39.5%, 72% 41.1%, 92% 43.0%, 54% 45.2%, 43% 47.8%, 84% 49.6%, 67% 51.0%, 78% 52.3%, 72% 54.5%, 55% 57.0%, 74% 59.1%, 65% 61.1%, 96% 63.5%, 78% 65.4%, 81% 66.7%, 100% 68.8%, 53% 71.1%, 78% 72.9%, 65% 74.1%, 43% 75.5%, 85% 76.8%, 51% 78.2%, 92% 79.9%, 64% 81.3%, 92% 83.2%, 91% 85.6%, 62% 87.2%, 92% 88.9%, 45% 91.4%, 50% 92.9%, 67% 94.4%, 52% 96.4%, 62% 97.6%, 72% 99.3%, 80% 100.0%, 0 100%); }

/* QUITADO */
.q-stamp { position: absolute; z-index: 3; left: 30%; top: 34%; display: grid; justify-items: center; padding: 10px 22px 8px; border: 4px double var(--red); color: var(--red); transform: rotate(-11deg) scale(1.8); opacity: 0; pointer-events: none; mix-blend-mode: multiply; }
.q-stamp b { font: 700 46px/1 var(--mono); letter-spacing: .12em; }
.q-stamp span { font: 700 13px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.slip.paid .q-stamp { opacity: .9; transform: rotate(-11deg) scale(1); transition: transform .32s var(--thud), opacity .12s linear; }

/* ---------- the dividers ---------- */
.dividers { position: relative; z-index: 5; display: grid; pointer-events: none; }
.dv { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 0 34px; min-height: 440px; padding: 30px 34px 28px 38px; background: var(--tint); color: var(--ink); border-left: 10px solid var(--tc); opacity: 0; visibility: hidden; transform: translateX(26px); transition: opacity .35s var(--out), transform .5s var(--out), visibility 0s .5s; }
.dv.on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .35s var(--out), transform .5s var(--out); }
.dv-k { margin: 0 0 6px; font: 700 12px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.dv h2 { margin: 0 0 18px; font: 800 40px/1 var(--sans); letter-spacing: -.03em; max-width: 16ch; text-wrap: balance; }
.dv dl { margin: 0; display: grid; gap: 12px; }
.dv dt { font: 700 9.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.dv dd { margin: 2px 0 0; font-size: 15px; line-height: 1.5; max-width: 60ch; }
.dv-side { display: flex; flex-direction: column; gap: 10px; padding-left: 24px; border-left: 1px solid rgba(27,26,23,.35); }
.dv-price { border: 1px solid var(--rule); background: var(--paper); padding: 6px 10px 10px; }
.dv-price b { display: block; font: 600 8.5px/1.25 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.dv-price span { display: block; margin-top: 4px; font: 700 24px/1.15 var(--mono); }
.dv-price i { display: inline-block; margin-top: 6px; padding: 1px 6px; border: 1.5px solid var(--red); color: var(--red-d); font: 700 11px/1.3 var(--mono); font-style: normal; letter-spacing: .04em; transform: rotate(-1.5deg); }
.dv-price small { display: block; margin-top: 6px; font: 400 11.5px/1.35 var(--mono); color: var(--ink-2); }
.pk { display: grid; border: 1px solid var(--rule); background: var(--paper); }
.pk div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--rule); }
.pk div:last-child { border-bottom: 0; }
.pk p { margin: 0; padding: 4px 8px; border-bottom: 1px solid var(--rule); font: 600 8.5px/1.25 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.pk b { font: 700 13px/1.2 var(--sans); }
.pk span { font: 700 18px/1.1 var(--mono); }
.ink-btn, .ghost-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: 2px; font: 700 13.5px/1.15 var(--sans); text-decoration: none; text-align: center; transition: transform .3s var(--out), background .25s var(--out), box-shadow .25s var(--out); }
.ink-btn { background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); }
.ink-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--red); }
.ghost-btn { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.ghost-btn:hover { background: rgba(27,26,23,.07); }
.dv-side .ink-btn, .dv-side .ghost-btn { width: 100%; }

/* ---------- the tabs on the pad's right edge ---------- */
.tabs { position: absolute; top: 8px; bottom: 8px; left: calc(100% - 18px); width: 150px; z-index: 1; display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tab { position: relative; display: flex; align-items: center; padding: 6px 12px 6px 30px; border: 0; border-radius: 0 9px 9px 0; background: var(--tc); color: var(--ink); font: 700 12.5px/1.15 var(--sans); text-align: left; box-shadow: 2px 3px 0 rgba(30,16,8,.3); transition: transform .4s var(--out), box-shadow .3s var(--out); }
.tab small { position: absolute; left: 22px; top: 6px; font: 700 9.5px/1 var(--mono); opacity: .75; display: none; }
.tab:hover { transform: translateX(8px); }
.tab[aria-expanded=true] { z-index: 8; transform: translateX(10px); box-shadow: 3px 4px 0 rgba(30,16,8,.4); }
.tab:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.tabs.lift { z-index: 7; }

/* ---------- the front cover ---------- */
.cover { position: relative; z-index: 6; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto auto auto auto 1fr; column-gap: 40px; min-height: 440px; padding: 30px 40px 26px 40px; background: var(--blue); color: var(--on-blue); transform-origin: 50% 0; backface-visibility: hidden; transition: transform .9s var(--flip), opacity .9s var(--flip), visibility 0s .9s; }
.cover.up { transform: rotateX(172deg); opacity: 0; visibility: hidden; pointer-events: none; }
.rosette { position: absolute; right: -110px; top: -70px; width: 520px; height: 520px; pointer-events: none; opacity: .55; }
.cv-k { grid-column: 1; margin: 0 0 6px; font: 700 12.5px/1.2 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--on-blue-2); position: relative; }
.cover h1 { grid-column: 1; margin: 0; font: 900 clamp(54px, 8.9cqi, 86px)/.86 var(--sans); letter-spacing: -.045em; position: relative; }
.cover h1 span { display: block; }
.cover h1 .l2 { padding-left: .32em; color: var(--paper); }
.cv-s { grid-column: 1; margin: 14px 0 0; font: 700 18px/1.2 var(--mono); position: relative; }
.cv-box { grid-column: 2; grid-row: 1 / 4; align-self: start; position: relative; display: grid; border: 1px solid rgba(246,241,228,.6); background: var(--blue-d); }
.cv-f { padding: 5px 10px 6px; border-bottom: 1px solid rgba(246,241,228,.35); }
.cv-f:last-child { border-bottom: 0; }
.cv-f b { display: block; font: 600 8.5px/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--on-blue-2); }
.cv-f span { display: block; font: 400 14.5px/1.3 var(--mono); }
.cv-tot span { font: 700 22px/1.15 var(--mono); }
.cv-tot sup { font-size: .55em; }
.cv-tot i { display: block; font: italic 400 11px/1.3 var(--mono); color: var(--on-blue-2); }
.cv-p { grid-column: 1; grid-row: 4; align-self: start; margin: 18px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.5; color: #dfe7f1; position: relative; }
.cv-act { grid-column: 2; grid-row: 4 / 6; align-self: end; position: relative; }
.cv-strip { grid-column: 1; grid-row: 5; align-self: end; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(246,241,228,.5); }
.cv-strip li { padding: 7px 12px 0 0; }
.cv-strip li + li { padding-left: 12px; border-left: 1px solid rgba(246,241,228,.3); }
.cv-strip b { display: block; font: 600 8.5px/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--on-blue-2); }
.cv-strip span { display: block; font: 700 14px/1.3 var(--mono); }
.open-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: var(--paper); color: var(--ink); border: 0; border-radius: 2px; font: 800 15px/1 var(--sans); box-shadow: 0 3px 0 var(--blue-dd); transition: transform .35s var(--out), box-shadow .35s var(--out); }
.open-btn::after { content: ''; width: 22px; height: 12px; background: var(--ink); clip-path: polygon(0 40%, 70% 40%, 70% 0, 100% 50%, 70% 100%, 70% 60%, 0 60%); }
.open-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--red); }
.open-btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.cv-sim { margin: 10px 0 0; font: 400 12px/1.4 var(--mono); color: var(--on-blue-2); }

/* ---------- the last page ---------- */
.endsheet { position: relative; z-index: 1; min-height: 440px; padding: 44px 48px; background: var(--paper); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.endsheet h2 { margin: 0 0 12px; font: 900 64px/.95 var(--sans); letter-spacing: -.04em; }
.endsheet p { margin: 0 0 22px; max-width: 54ch; font-size: 16px; }
.end-act { display: flex; flex-wrap: wrap; gap: 10px; }
.end-stamp { position: absolute; right: 60px; top: 50px; display: grid; justify-items: center; padding: 12px 26px 10px; border: 5px double var(--red); color: var(--red); transform: rotate(9deg); mix-blend-mode: multiply; }
.end-stamp span { font: 700 54px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.end-stamp small { font: 700 14px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; }

/* ---------- pager under the pad ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 18px; padding-right: 8px; font: 400 14px/1.2 var(--mono); color: var(--on-wood); }
.pager button { background: none; border: 0; padding: 6px 0; color: var(--on-wood); font: 700 14px/1.2 var(--mono); text-decoration: underline; text-decoration-color: rgba(243,230,207,.4); text-underline-offset: 4px; }
.pager button:hover { text-decoration-color: var(--on-wood); }
.pager button:disabled { opacity: .4; cursor: default; text-decoration: none; }
.pg-now { padding: 4px 10px; border: 1px solid rgba(243,230,207,.45); }
.pg-cover { margin-left: auto; }
.pager button:focus-visible { outline-color: var(--on-wood); }

/* ---------- the pile of torn stubs ---------- */
.pile { position: relative; color: var(--on-wood); padding-top: 4px; min-width: 0; }
.pile h2 { margin: 0; font: 700 15px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.pile-n { margin: 4px 0 14px; font: 400 14px/1.3 var(--mono); color: var(--on-wood-2); }
.tray { position: relative; height: 380px; border: 1.5px dashed rgba(243,230,207,.38); border-radius: 3px; }
.tray-hint { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; font: 400 13px/1.45 var(--mono); color: var(--on-wood); transition: opacity .3s var(--out); }
.tray.has .tray-hint { opacity: 0; }
.pst { position: absolute; left: 50%; top: 18px; width: 132px; padding: 9px 10px 10px 12px; margin-left: -66px; background: var(--paper) var(--guil-img) 0 0 / 240px 64px repeat; color: var(--ink); border-left: 2px dotted rgba(27,26,23,.5); box-shadow: 0 6px 12px -4px rgba(30,16,8,.55); font: 400 11px/1.3 var(--mono); }
.pst b { display: block; font: 800 8.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding-bottom: 4px; border-bottom: 1.5px solid var(--rule); margin-bottom: 4px; }
.pst .m { font-weight: 700; font-size: 14px; }
.pst .q { display: inline-block; margin-top: 6px; padding: 1px 5px; border: 2px solid var(--red); color: var(--red); font: 700 12px/1.2 var(--mono); letter-spacing: .08em; transform: rotate(-6deg); }
.pst i { display: block; font-style: italic; color: var(--red-d); font-size: 10px; }
.pile-undo { margin-top: 12px; color: var(--on-wood); border-color: rgba(243,230,207,.5); padding: 8px 12px; font-size: 12.5px; }
.pile-undo:hover { background: rgba(243,230,207,.1); }
.pile-undo:disabled { opacity: .35; cursor: default; }
.fly { position: fixed; z-index: 60; pointer-events: none; transform-origin: 0 0; }

/* ============ the cover turned over ============ */
.turned { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: 56px; margin-top: 96px; align-items: start; }
.inside { position: relative; background: var(--card); color: var(--card-ink); padding: 40px 44px 26px; box-shadow: 0 2px 2px rgba(30,16,8,.3), 0 26px 30px -18px rgba(30,16,8,.55); }
.in-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 3px solid var(--card-ink); }
.in-hd h2 { margin: 0; font: 900 46px/.95 var(--sans); letter-spacing: -.04em; }
.in-hd p { margin: 0; font: 700 12px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--card-ink-2); }
.plate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-left: 1px solid var(--card-ink); }
.plate > div { min-width: 0; padding: 7px 10px 9px; border-right: 1px solid var(--card-ink); border-bottom: 1px solid var(--card-ink); }
.plate > div.wide { grid-column: span 2; }
.plate dt { font: 700 9px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--card-ink-2); }
.plate dd { margin: 3px 0 0; font: 700 14.5px/1.35 var(--mono); overflow-wrap: anywhere; }
.plate a { text-decoration-color: rgba(20,61,107,.4); text-underline-offset: 3px; }
.instr { margin-top: 28px; }
.instr h3, .back h3 { margin: 0 0 10px; font: 800 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.instr ol { margin: 0; padding: 0; list-style: none; counter-reset: i; display: grid; gap: 10px; }
.instr li { counter-increment: i; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; font-size: 15px; line-height: 1.55; color: #1d2f47; max-width: 70ch; }
.instr li::before { content: counter(i, decimal-leading-zero); font: 700 13px/1.9 var(--mono); color: var(--card-ink); border-top: 2px solid var(--card-ink); }
.fine { margin-top: 26px; padding-top: 14px; border-top: 1px solid rgba(20,61,107,.45); display: grid; gap: 8px; }
.fine p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #1d2f47; max-width: 78ch; }
.fine .price-src b { font-family: var(--mono); font-size: 15px; color: var(--card-ink); }
.fine em { font-style: normal; font-family: var(--mono); color: var(--red-d); }
.imprint { margin: 22px 0 0; padding-top: 10px; border-top: 3px solid var(--card-ink); font: 400 12.5px/1.4 var(--mono); color: var(--card-ink-2); }
.imprint a { color: var(--card-ink); }

.back { position: relative; margin-top: 72px; background: var(--blue); color: var(--on-blue); padding: 34px 36px 30px; box-shadow: 0 2px 2px rgba(30,16,8,.3), 0 26px 30px -18px rgba(30,16,8,.55); }
.back::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(246,241,228,.2); pointer-events: none; }
.back-x { display: none; }
.bk-hd { position: relative; margin-bottom: 18px; }
.bk-k { margin: 0 0 4px; font: 700 12px/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--on-blue-2); }
.bk-hd h2 { margin: 0; font: 900 68px/.9 var(--sans); letter-spacing: -.045em; }
.ask { position: relative; display: grid; gap: 10px; }
.row3 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr) minmax(0, .9fr); gap: 10px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fld { display: block; min-width: 0; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 5px 10px 6px; }
.fld > span { display: block; font: 600 8.5px/1.25 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.fld input, .fld select, .fld textarea { display: block; width: 100%; margin: 2px 0 0; padding: 2px 0; border: 0; background: transparent; color: var(--ink); font: 400 15px/1.35 var(--mono); outline: none; border-radius: 0; }
.fld select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 16px; background: linear-gradient(45deg, transparent 50%, var(--ink) 50%) right 6px center / 6px 6px no-repeat; }
.fld textarea { resize: vertical; min-height: 58px; }
.fld:focus-within { box-shadow: 0 0 0 3px #f2c75c; }
.fld ::placeholder { color: #7a7366; opacity: 1; }
.preview { border: 1px dashed rgba(246,241,228,.55); padding: 8px 12px 10px; background: var(--blue-d); }
.preview b { display: block; font: 600 8.5px/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--on-blue-2); }
.preview pre { margin: 4px 0 0; max-height: 200px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 12.5px/1.45 var(--mono); color: var(--on-blue); }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.wa-btn { padding: 13px 18px; background: var(--paper); color: var(--ink); border: 0; border-radius: 2px; font: 800 14.5px/1.1 var(--sans); box-shadow: 0 3px 0 var(--blue-dd); transition: transform .3s var(--out), box-shadow .3s var(--out); }
.wa-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--red); }
.alt-btn { display: inline-flex; align-items: center; gap: 5px; padding: 12px 14px; border: 1.5px solid rgba(246,241,228,.7); border-radius: 2px; font: 700 13.5px/1.1 var(--sans); text-decoration: none; color: var(--on-blue); transition: background .25s var(--out); }
.alt-btn:hover { background: rgba(246,241,228,.1); }
.back :focus-visible { outline-color: #f2c75c; }
.sent { margin: 2px 0 0; padding: 8px 10px; border-left: 3px solid #f2c75c; background: rgba(0,0,0,.18); font: 400 13px/1.45 var(--mono); }
.back .lead-note { color: var(--on-blue); }
.sheet-bar { display: none; }

/* ============ load choreography (live page only) ============ */
@keyframes rise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes tabout { from { transform: translateX(-120px); } to { transform: none; } }
@keyframes word { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }
html.js:not(.static) .pad { animation: rise .9s var(--out) both; }
html.js:not(.static) .tab { animation: tabout .8s var(--out) both; }
html.js:not(.static) .tab:nth-child(1) { animation-delay: .45s; } html.js:not(.static) .tab:nth-child(2) { animation-delay: .52s; } html.js:not(.static) .tab:nth-child(3) { animation-delay: .59s; }
html.js:not(.static) .tab:nth-child(4) { animation-delay: .66s; } html.js:not(.static) .tab:nth-child(5) { animation-delay: .73s; } html.js:not(.static) .tab:nth-child(6) { animation-delay: .8s; }
html.js:not(.static) .cover h1 span { animation: word .9s var(--out) both; }
html.js:not(.static) .cover h1 .l1 { animation-delay: .25s; } html.js:not(.static) .cover h1 .l2 { animation-delay: .38s; }
html.js:not(.static) .pile { animation: rise .9s var(--out) .3s both; }
html.static *, html.static *::before, html.static *::after { transition: none !important; animation: none !important; }

/* ============ narrower desks ============ */
@media (max-width: 1279px) {
  .desk { padding: 36px 32px 80px; }
  .stage { grid-template-columns: minmax(0, 1fr); padding-right: 150px; }
  .pile { margin-top: 30px; }
  .tray { height: 200px; }
  .pst { top: 14px; }
  .turned { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 70px; }
  .back { margin-top: 0; }
}
/* the slip itself follows the width of the pad */
@container sheets (max-width: 760px) {
  .slip { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ficha { padding: 12px 12px 10px; }
  .s-hd { grid-template-columns: auto minmax(0, 1fr); }
  .s-code { display: none; }
  .s-line { font-size: 11.5px; }
  .fx { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
  .f.c6, .f.c3, .f.c7 { grid-column: 1 / -1; } .f.c2 { grid-column: span 1; }
  .f.rt { grid-column: auto; }
  .f.ins { grid-row: auto; grid-column: 1 / -1; }
  .f.lo { display: none; }
  .bars { width: 100%; height: 40px; }
  .s-ft { grid-template-columns: minmax(0, 1fr); }
  .s-ft .aut { text-align: left; }
  .stub { border-left: 0; border-top: 2px dotted rgba(27,26,23,.55); padding: 12px 12px 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; }
  .stub::before, .stub::after { top: -8px; bottom: auto; left: -7px; }
  .stub::after { left: auto; right: -7px; }
  .st-h { grid-column: 1 / -1; }
  .sf.bn, .sf.pg { display: none; }
  .st-aut { display: none; }
  .st-pull { grid-column: 1 / -1; }
  .slip.torn::after { display: none; }
  .q-stamp { left: 14%; top: 26%; }
  .q-stamp b { font-size: 36px; }
  .cover { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; padding: 24px 22px 22px; }
  .cover h1 { font-size: clamp(46px, 15cqi, 84px); }
  .cv-box, .cv-p, .cv-act, .cv-strip { grid-column: 1; grid-row: auto; }
  .cv-box { margin-top: 18px; }
  .cv-p { margin-top: 14px; }
  .cv-act { margin-top: 14px; }
  .rosette { width: 330px; height: 330px; right: -8px; top: -110px; opacity: .4; }
  .dv { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 22px 20px 22px 22px; gap: 18px; }
  .dv h2 { font-size: 30px; }
  .dv-side { padding-left: 0; border-left: 0; }
  .endsheet { min-height: 0; padding: 30px 22px; }
  .endsheet h2 { font-size: 44px; }
  .end-stamp { right: 14px; top: 16px; padding: 6px 12px; } .end-stamp span { font-size: 26px; }
}

/* ============ phone ============ */
@media (max-width: 720px) {
  body { font-size: 15px; }
  .desk { padding: 14px 12px 96px; }
  .stage { padding-right: 0; }
  .tabs { position: static; width: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 6px 5px; margin: 0 4px 0; }
  .tab { min-height: 46px; padding: 7px 8px 7px; border-radius: 8px 8px 0 0; font-size: 12px; box-shadow: 0 -1px 0 rgba(0,0,0,.08) inset; }
  .tab:hover { transform: none; }
  .tab[aria-expanded=true] { transform: translateY(-4px); box-shadow: 0 3px 0 var(--ink) inset; }
  .spine { padding: 12px 12px 14px; gap: 10px 12px; }
  .brand img { height: 26px; }
  .lang { order: 1; margin-left: auto; }
  .seg { order: 2; width: 100%; }
  .seg legend { float: none; display: block; margin: 0 0 5px; width: 100%; }
  .seg { flex-wrap: wrap; align-items: stretch; }
  .seg label { flex: 1 1 0; min-width: 0; display: flex; }
  .seg label span { flex: 1; display: flex; align-items: center; justify-content: center; }
  .seg span { text-align: center; font-size: 12px; padding: 8px 4px 7px; white-space: normal; }
  .rng { order: 3; width: 100%; }
  .rng input[type=range] { flex: 1; width: auto; }
  .staple { top: -8px; width: 30px; }
  .pager { gap: 4px 14px; font-size: 13px; }
  .pager button { font-size: 13px; }
  .pg-cover { margin-left: 0; }
  .pile { margin-top: 24px; }
  .tray { height: 170px; }
  .pst { width: 116px; margin-left: -58px; }
  .turned { margin-top: 44px; }
  .inside { padding: 26px 18px 20px; }
  .in-hd { flex-direction: column; gap: 4px; }
  .in-hd h2 { font-size: 36px; }
  .plate { grid-template-columns: minmax(0, 1fr); }
  .plate > div.wide { grid-column: auto; }
  /* the back cover becomes a bottom sheet */
  .back { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; margin: 0; max-height: 90dvh; overflow: auto; padding: 22px 16px 22px; transform: translateY(104%); visibility: hidden; transition: transform .5s var(--out), visibility 0s .5s; box-shadow: 0 -20px 40px -10px rgba(10,6,4,.55); border-radius: 12px 12px 0 0; }
  .back.on { transform: none; visibility: visible; transition: transform .5s var(--out); }
  .back::before { display: none; }
  .back-x { display: block; position: absolute; right: 12px; top: 12px; z-index: 2; background: none; border: 1px solid rgba(246,241,228,.6); color: var(--on-blue); padding: 6px 10px; font: 700 12px/1 var(--mono); border-radius: 2px; }
  .bk-hd h2 { font-size: 48px; }
  .bk-hd { padding-right: 64px; }
  .row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .row3 .fld:nth-child(2) { grid-column: 1 / -1; order: -1; }
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .sheet-bar { display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 70; align-items: baseline; justify-content: space-between; gap: 10px; padding: 13px 16px; background: var(--blue); color: var(--on-blue); border: 0; border-radius: 4px; box-shadow: 0 10px 24px -6px rgba(10,6,4,.6); font: 800 16px/1 var(--sans); }
  .sheet-bar small { font: 400 12.5px/1 var(--mono); color: var(--on-blue-2); }
  .sheet-bar::after { content: ''; width: 12px; height: 12px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(4px) rotate(45deg); }
  body.sheet-open .sheet-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* ============ legal pages: a sheet of the inside cover on the desk ============ */
body.legal { padding: 0 0 64px; }
.lg-band { max-width: 900px; margin: 32px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 16px 28px; background: var(--blue); color: var(--on-blue); border-radius: 5px 5px 0 0; }
.lg-band .brand img { height: 30px; }
.lg-band p { margin: 0; font: 400 13px/1.3 var(--mono); color: var(--on-blue-2); }
body.legal main { max-width: 900px; margin: 0 auto; padding: 34px 40px 40px; background: var(--card); color: #1d2f47; box-shadow: 0 26px 30px -18px rgba(30,16,8,.55); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
body.legal main h1 { margin: 10px 0 14px; font: 900 40px/1 var(--sans); letter-spacing: -.035em; color: var(--card-ink); }
body.legal main h2 { margin: 28px 0 8px; font: 800 19px/1.25 var(--sans); color: var(--card-ink); }
body.legal main a { color: var(--card-ink); }
@media (max-width: 720px) { .lg-band { margin: 12px 10px 0; padding: 12px 16px; } body.legal main { margin: 0 10px; padding: 22px 18px 28px; } body.legal main h1 { font-size: 30px; } footer.seller { padding-bottom: 84px; } }

/* == legal == cookie banner + seller block (generated by sites/_legal/gen.py; the banner look comes from _legal/cookie-styles.css) */
.ck { position: fixed; left: 16px; bottom: 16px; z-index: 9999; max-width: 400px; font-family: inherit; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; }
.ck, .ck * { box-sizing: border-box; } .ck .ck-k { display: block; } .ck .ck-t, .ck .ck-p { margin: 0; } .ck .b { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ck button, .ck a.more { cursor: pointer; text-decoration: none; line-height: 1.2; margin: 0; }
/* banner: moventra */
.ck { left: auto; right: 24px; bottom: 24px; width: 300px; max-width: calc(100vw - 20px); display: flex; flex-direction: column; padding: 14px 16px 12px 20px; background: #f6f1e4 var(--guil-img, none) 0 0 / 240px 64px repeat; color: #1b1a17; border-left: 2px dotted rgba(27, 26, 23, .6); box-shadow: 0 2px 2px rgba(30, 16, 8, .35), 0 22px 30px -14px rgba(30, 16, 8, .6); font-family: 'Libre Franklin', Arial, sans-serif; animation: ck-tear .7s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes ck-tear { from { opacity: 0; transform: translate(40px, 10px) rotate(4deg); } to { opacity: 1; transform: none; } }
.ck::before, .ck::after { content: ''; position: absolute; left: -8px; width: 14px; height: 14px; border-radius: 50%; background: #5e3e28; }
.ck::before { top: -7px; } .ck::after { bottom: -7px; }
.ck .ck-t { order: 0; padding-bottom: 7px; border-bottom: 2px solid #1b1a17; }
.ck .ck-t b { display: block; font: 800 11px/1.3 'Libre Franklin', Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.ck .ck-k { order: 1; padding: 4px 0 5px; border-bottom: 1px solid #1b1a17; font: 700 15px/1.3 'Courier Prime', 'Courier New', monospace; }
.ck .ck-k::before { content: 'Beneficiário'; display: block; font: 600 8.5px/1.25 'Libre Franklin', Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #4b463c; }
.ck .ck-p { order: 2; padding: 4px 0 7px; border-bottom: 1px solid #1b1a17; font: 400 12.5px/1.45 'Courier Prime', 'Courier New', monospace; color: #1b1a17; }
.ck .ck-p::before { content: 'Instruções'; display: block; margin-bottom: 1px; font: 600 8.5px/1.25 'Libre Franklin', Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #4b463c; }
html[lang=en] .ck .ck-k::before { content: 'Beneficiary'; } html[lang=en] .ck .ck-p::before { content: 'Instructions'; }
.ck .b { order: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }
.ck .b button { position: relative; min-height: 50px; padding: 15px 6px 6px; border: 1px solid #1b1a17; border-radius: 0; background: transparent; color: #1b1a17; font: 700 14px/1.1 'Courier Prime', 'Courier New', monospace; letter-spacing: .04em; text-transform: uppercase; text-align: center; transition: background .25s cubic-bezier(.16, 1, .3, 1), color .25s cubic-bezier(.16, 1, .3, 1); }
.ck .b button::before { content: 'Autent. mecânica'; position: absolute; left: 5px; right: 5px; top: 4px; font: 600 7.5px/1 'Libre Franklin', Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-align: left; color: #4b463c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[lang=en] .ck .b button::before { content: 'Mech. authent.'; }
.ck .b button.ok { border: 2px solid #c1121f; color: #9e0f19; }
.ck .b button.ok:hover { background: #c1121f; color: #f6f1e4; } .ck .b button.ok:hover::before { color: #f6f1e4; }
.ck .b button.no:hover { background: rgba(27, 26, 23, .08); }
.ck .b a.more { grid-column: 1 / -1; padding: 4px 0 0; font: 700 12px/1.3 'Courier Prime', 'Courier New', monospace; color: #1b1a17; text-decoration: underline; text-decoration-color: #c1121f; text-underline-offset: 3px; }
.ck button:focus-visible, .ck a.more:focus-visible { outline: 2px solid #c1121f; outline-offset: 2px; }
@media (max-width: 720px) { .ck { --ck-bottom: 74px; left: 10px; right: 10px; bottom: 74px; width: auto; max-width: none; } }
html.static .ck { animation: none; }
/* the seller block is the desk's front edge: dark wood with cream print */
footer.seller { background: #3a2519; color: #f3e6cf; border-top: 6px solid #5e3e28; box-shadow: inset 0 1px 0 rgba(243, 230, 207, .12); }
footer.seller b { color: #dcc8a8; opacity: 1; }
footer.seller a { color: #f3e6cf; text-underline-offset: 3px; }

@media (max-width: 600px) { .ck { left: 10px; right: 10px; bottom: var(--ck-bottom, 10px); width: auto; max-width: none; transform: none; } }
.seller { font-size: 12.5px; line-height: 1.6; color: inherit; padding: 22px 24px 26px; border-top: 1px solid rgba(128,128,128,.35); letter-spacing: 0; text-transform: none; font-family: inherit; }
.seller-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.seller b { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; font-weight: 700; }
.seller a { color: inherit; } .seller address { font-style: normal; } .seller strong { font-weight: 700; }
.seller.panel { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9998; background: #fff; color: #111; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); max-width: 940px; margin: 0 auto; border-top: 0; padding: 24px 26px 22px; }
.seller.panel:target { display: block; }
.seller .x { position: absolute; top: 6px; right: 12px; text-decoration: none; font-size: 22px; line-height: 1; padding: 6px 8px; }
.ck-page .st { padding: 10px 14px; border: 1px solid rgba(128,128,128,.4); border-radius: 8px; margin: 10px 0 14px; font-weight: 700; } .ck-page .b { display: flex; gap: 8px; flex-wrap: wrap; } .ck-page button { font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
@media (max-width: 760px) { table.lgl-t, table.lgl-t tbody, table.lgl-t tr, table.lgl-t td { display: block; width: auto; } table.lgl-t thead { display: none; } table.lgl-t tr { padding: 10px 0; border-bottom: 1px solid rgba(128,128,128,.35); } table.lgl-t td { border: 0 !important; padding: 2px 0 !important; overflow-wrap: anywhere; } table.lgl-t td::before { content: attr(data-l) ": "; font-weight: 700; } }
table.lgl-t code { overflow-wrap: anywhere; }
.lead-note.lead-note { font-size: 12px; line-height: 1.5; margin: 0; letter-spacing: 0; text-transform: none; font-weight: 400; font-style: normal; text-align: left; max-width: 62ch; } .lead-note.lead-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) { .seller-in { grid-template-columns: 1fr; } .seller.panel { left: 8px; right: 8px; bottom: 8px; max-height: 80dvh; overflow: auto; } }