/* Lumexa — the espelho (flatplan) of one example edition, pinned to the production-room wall */
:root {
  --wall: #F2EEE5; --wall2: #E9E4D8; --pg: #FCFBF7; --hair: #B4AC9E; --gr: #DBD5C9; --hd: #BFB7A9; --im: #E6E1D6;
  --ink: #1C1A17; --ink2: #47423A; --ink3: #645D52; --red: #C8102E; --red2: #A00C25; --blue: #285A9B;
  --fd: 'Newsreader', 'Georgia', serif; --ft: 'Public Sans', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --ex: cubic-bezier(0.16, 1, 0.3, 1); --qo: cubic-bezier(0.25, 1, 0.5, 1);
  --g: 40px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--wall); color: var(--ink); font: 400 15px/1.55 var(--ft); overflow-x: hidden; }
::selection { background: var(--red); color: #FFF8F2; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wall { background-image: radial-gradient(rgba(28,26,23,.035) 1px, transparent 1.2px); background-size: 4px 4px; }

/* ---------- title block ---------- */
.tb { display: grid; grid-template-columns: minmax(420px, 520px) 1fr; gap: 0 56px; padding: 32px var(--g) 18px; align-items: start; }
.tb-block { border: 1.5px solid var(--ink); background: var(--pg); }
.tb-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--ink); }
.tb-brand img { height: 30px; width: auto; display: block; }
.tb-doc { font: 600 10.5px/1.2 var(--ft); letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.tb-h { margin: 0; padding: 7px 16px 6px; font: 600 10.5px/1.2 var(--ft); letter-spacing: .16em; text-transform: uppercase; color: var(--pg); background: var(--ink); }
.tb-grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.tb-grid > div { padding: 7px 16px 8px; border-top: 1px solid var(--hair); min-width: 0; }
.tb-grid > div:nth-child(odd):not(.tb-wide) { border-right: 1px solid var(--hair); }
.tb-grid > div:first-child { border-top: 0; }
.tb-grid > div:nth-child(2) { border-top: 0; }
.tb-wide { grid-column: 1 / -1; }
.tb-wide ~ div:nth-child(even) { border-right: 1px solid var(--hair); }
.tb-wide ~ div:nth-child(odd) { border-right: 0 !important; }
.tb-grid dt { font: 600 9.5px/1.3 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.tb-grid dd { margin: 1px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.tb-grid a { text-decoration-color: var(--hair); text-underline-offset: 3px; }
.tb-grid a:hover { text-decoration-color: var(--red); }

.tb-title { position: relative; padding-top: 4px; min-width: 0; }
.tb-tools { display: flex; justify-content: flex-end; gap: 14px; align-items: center; }
.seg, .langs { display: inline-flex; border: 1.5px solid var(--ink); background: var(--pg); }
.seg button, .langs button { border: 0; background: transparent; padding: 8px 16px 7px; cursor: pointer; font: 600 12px/1 var(--ft); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); transition: background .25s var(--qo), color .25s var(--qo); }
.seg button + button, .langs button + button { border-left: 1.5px solid var(--ink); }
.seg button.on, .langs button.on { background: var(--ink); color: var(--pg); }
.seg button:not(.on):hover, .langs button:not(.on):hover { background: var(--wall2); color: var(--ink); }
.langs button { padding: 8px 11px 7px; }
.big { margin: 26px 0 0; font: 400 clamp(46px, 6.3vw, 104px)/.92 var(--fd); font-variation-settings: 'opsz' 72; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.big em { font-style: italic; color: var(--red); letter-spacing: -.03em; }
.intro { margin: 18px 0 0; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: var(--ink2); }

/* ---------- legend ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px var(--g) 12px; margin: 0 var(--g); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--hair); font: 500 12px/1.2 var(--ft); color: var(--ink2); }
.lg { display: inline-flex; align-items: center; gap: 8px; }
.legend { padding-left: 0; padding-right: 0; }
.sw { display: inline-block; width: 22px; height: 15px; border: 1.2px solid var(--ink); background-color: var(--pg); }
.sw-ed { border-color: var(--hair); background: repeating-linear-gradient(180deg, var(--gr) 0 1.5px, transparent 1.5px 4px), var(--pg); }
.sw-on { background: var(--red); border-color: var(--red); }

/* ---------- hatching by kind (the colour code of the plan, in ink) ---------- */
.k-pi { background-image: repeating-linear-gradient(45deg, var(--ink) 0 1.1px, transparent 1.1px 5.5px); }
.k-meia { background-image: repeating-linear-gradient(-45deg, var(--ink) 0 1.1px, transparent 1.1px 5.5px); }
.k-rod { background-image: repeating-linear-gradient(0deg, var(--ink) 0 1.1px, transparent 1.1px 4.5px); }
.k-selo { background-image: repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 4.5px), repeating-linear-gradient(-45deg, var(--ink) 0 1px, transparent 1px 4.5px); }
.k-inf { background-image: radial-gradient(var(--ink) 1px, transparent 1.3px); background-size: 4.5px 4.5px; }
.k-web { background-image: repeating-linear-gradient(90deg, var(--ink) 0 1.1px, transparent 1.1px 5px); }
.k-x, .k-esp, .k-enc { background-image: repeating-linear-gradient(45deg, rgba(28,26,23,.55) 0 1px, transparent 1px 7px); border-style: dashed !important; }

/* ---------- the plan ---------- */
main { display: block; padding: 0 var(--g); }
.plan { --pw: clamp(60px, calc((100vw - 2 * var(--g) - 132px - 6 * 18px) / 12), 104px); padding: 22px 0 8px; }
.row { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: start; padding: 10px 0 14px; border-bottom: 1px dashed rgba(100,93,82,.35); }
.rl { display: flex; flex-direction: column; gap: 3px; padding-right: 14px; }
.rl b { font: 500 46px/.9 var(--fd); font-variation-settings: 'opsz' 60; letter-spacing: -.02em; color: var(--ink); }
.rl-n { font: 600 10.5px/1.3 var(--ft); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); margin-top: 6px; }
.rl-c { font-size: 12px; line-height: 1.4; color: var(--ink3); }
.sps { display: flex; gap: 18px; align-items: flex-start; min-width: 0; }
.sp { display: flex; }
.pg { position: relative; width: var(--pw); padding: calc(var(--pw) * .07); background: var(--pg); border: 1px solid var(--hair); box-shadow: 0 1px 0 rgba(28,26,23,.06), 0 6px 14px -10px rgba(28,26,23,.35); }
.sp .pg + .pg { border-left-color: rgba(180,172,158,.55); }
.sp .pg-l { box-shadow: inset -6px 0 8px -8px rgba(28,26,23,.35), 0 6px 14px -10px rgba(28,26,23,.35); }
.sp .pg-r { box-shadow: inset 6px 0 8px -8px rgba(28,26,23,.3), 0 6px 14px -10px rgba(28,26,23,.35); }
.pg-1 { border-top: 3px solid var(--ink); }
.ta { position: relative; aspect-ratio: 25.7 / 29.7; }
.gk { position: absolute; left: 0; top: 0; width: 100%; background: repeating-linear-gradient(90deg, transparent 0 calc(16.666% - 1.6px), var(--pg) calc(16.666% - 1.6px) 16.666%), repeating-linear-gradient(180deg, var(--gr) 0 1.4px, transparent 1.4px 3.6px); }
.ms, .hd, .im { position: absolute; display: block; }
.ms { left: 0; width: 100%; background: linear-gradient(var(--ink2), var(--ink2)) center / 62% 52% no-repeat, var(--pg); border-bottom: 1px solid var(--ink2); }
.ms:not(.ms-a) { background: linear-gradient(var(--hd), var(--hd)) left center / 38% 60% no-repeat, var(--pg); border-bottom: 1px solid var(--hd); }
.hd { background: linear-gradient(var(--hd), var(--hd)) left top / 92% 100% no-repeat, var(--pg); box-shadow: 0 0 0 1.5px var(--pg); }
.im { background: var(--im); box-shadow: 0 0 0 1.5px var(--pg); }
.fo { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font: 600 11px/1 var(--ft); color: var(--ink3); font-variant-numeric: tabular-nums; }
.fo b { font-weight: 600; color: var(--ink2); }
.pg-r .fo { justify-content: flex-end; }
.pg-1 .fo b { color: var(--ink); }
.fo-t { font: 600 9px/1 var(--ft); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.pg .fo { position: absolute; left: 0; right: 0; top: 100%; padding: 0 2px; }
.sp, .xs { margin-bottom: 22px; }

/* the positions */
.pos { position: absolute; display: block; padding: 0; margin: 0; cursor: pointer; background-color: var(--pg); border: 1.4px solid var(--ink); border-radius: 0; overflow: visible; transition: border-color .25s var(--qo); }
.pos::after { content: ''; position: absolute; inset: -1.4px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ex); pointer-events: none; }
.pos.on { border-color: var(--red); }
.pos.on::after { transform: scaleX(1); }
.pl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; padding: 2px 5px 1px; background: var(--pg); border: 1px solid var(--ink); font: 700 10px/1.1 var(--ft); letter-spacing: .04em; color: var(--ink); white-space: nowrap; transition: background .25s var(--qo), color .25s var(--qo), border-color .25s var(--qo); }
.pos.on .pl { background: var(--pg); color: var(--red); border-color: var(--pg); }
.k-selo .pl { left: auto; right: 0; top: calc(100% + 4px); transform: none; }
.pos:hover, .pos.sel { outline: 2px solid var(--blue); outline-offset: 2px; z-index: 2; }
.pos:hover .pl { background: var(--ink); color: var(--pg); }
.pos.on:hover .pl { background: var(--pg); color: var(--red); }

/* extras: dashed, outside the page make-up */
.row-x .rl b { color: var(--ink3); }
.xs { position: relative; }
.stack { position: relative; display: flex; }
.stack::before, .stack::after { content: ''; position: absolute; inset: 0; border: 1px dashed var(--hair); background: transparent; }
.stack::before { transform: translate(6px, -6px); } .stack::after { transform: translate(12px, -12px); }
.pg-x { border-style: dashed; border-color: var(--ink3); box-shadow: none !important; background: var(--pg); z-index: 1; }
.xh { position: absolute; left: 0; top: 0; width: 100%; height: 7%; background: radial-gradient(var(--ink) 1px, transparent 1.3px) 0 0 / 4px 4px; border: 1px solid var(--ink); }
.gk-x { top: 11% !important; height: 89%; }
.pos-cover { inset: 0; width: auto; height: auto; z-index: 3; background-color: transparent; border: 1.4px dashed var(--ink); }
.pg-x .pos-cover { inset: -1px; border-color: transparent; }
.pg-x .pos-cover:hover, .pg-x .pos-cover.sel { border-color: var(--ink); }
.stack .pos-cover { background-image: none; }
.stack .pos-cover .pl, .loose .pos-cover .pl { top: 50%; }
.xs .fo { position: static; margin-top: 8px; }
.xs-enc { margin-left: 26px; }
.loose { position: relative; width: calc(var(--pw) * .82); aspect-ratio: 21 / 28; transform: rotate(-5deg); margin-top: 8px; background: var(--pg); box-shadow: 0 8px 16px -10px rgba(28,26,23,.45); }
.loose .pos-cover { background-color: var(--pg); }
.stack.on .pg-x { border-color: var(--red); }

/* load choreography: spreads arrive in reading order, positions are drawn after */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
html.js:not(.static) .sp, html.js:not(.static) .xs, html.js:not(.static) .pf { animation: rise .7s var(--ex) both; animation-delay: calc(var(--d) * 45ms + 120ms); }
html.js:not(.static) .sp .pos { animation: draw .6s var(--ex) both; animation-delay: calc(var(--d) * 45ms + 520ms); }
html.js:not(.static) .big { animation: rise .9s var(--ex) both .05s; }

/* ---------- portal templates ---------- */
.portal { padding: 26px 0 12px; }
.pfs { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: start; }
.pf { margin: 0; border: 1.5px solid var(--ink); background: var(--pg); box-shadow: 0 14px 30px -22px rgba(28,26,23,.5); }
.pf-bar { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-bottom: 1px solid var(--ink); background: var(--wall2); }
.pf-bar b { font: 600 10.5px/1 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.pf-bar i { flex: 1; height: 9px; background: var(--pg); border: 1px solid var(--hair); }
.pf-b { display: grid; grid-template-columns: minmax(0, 1fr) 30%; gap: 14px 18px; padding: 16px 18px 22px; }
.wm { grid-column: 1 / -1; height: 18px; background: linear-gradient(var(--ink2), var(--ink2)) left center / 26% 70% no-repeat, linear-gradient(var(--hd), var(--hd)) right center / 40% 30% no-repeat; border-bottom: 1px solid var(--ink2); padding-bottom: 6px; display: block; }
.wad { position: relative; padding-top: 14px; }
.wad-t { position: absolute; top: 0; left: 0; font: 600 8.5px/1 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.wad .pos { position: relative; width: 100%; }
.w-topo { grid-column: 1 / -1; }
.w-topo .pos { height: 56px; }
.w-lat .pos { aspect-ratio: 300 / 250; height: auto; }
.w-tall .pos { aspect-ratio: 300 / 600; }
.w-main, .w-side { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.wimg { display: block; height: 120px; background: var(--im); }
.wimg.s { height: 54px; }
.whd { display: block; height: 11px; width: 90%; background: var(--hd); }
.whd.s { width: 62%; } .whd.t { height: 8px; width: 80%; margin-top: 4px; }
.wl { display: block; height: 4px; background: var(--gr); }
.w-tz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gr); }
.w-tz > div { display: flex; flex-direction: column; gap: 6px; }
.pf-mat .w-main .wimg { height: 150px; margin: 6px 0; }
.pf-mat .whd { height: 14px; } .pf-mat .whd + .whd { width: 72%; }
.pf-cap { margin: 18px 0 0; max-width: 78ch; font-size: 13px; color: var(--ink2); }
.ex { font: 500 11px/1.3 var(--ft); letter-spacing: .03em; color: var(--ink3); }

/* ---------- hover note (production annotation, in blue) ---------- */
.tip { position: fixed; z-index: 60; min-width: 180px; max-width: 260px; padding: 9px 12px 10px; background: var(--pg); border: 1.5px solid var(--blue); color: var(--ink); font: 400 12.5px/1.4 var(--ft); pointer-events: none; box-shadow: 0 10px 24px -14px rgba(28,26,23,.5); }
.tip b { display: block; font: 600 13px/1.25 var(--ft); color: var(--blue); }
.tip span { display: block; }
.tip .tp { font: 500 22px/1.15 var(--fd); color: var(--ink); margin-top: 4px; letter-spacing: -.01em; }
.tip em { display: block; font-style: normal; font-size: 11px; color: var(--ink3); margin-top: 2px; }

/* ---------- count strip ---------- */
.strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 18px 36px; align-items: center; margin-top: 18px; padding: 16px 0 18px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--hair); }
.strip-n { display: flex; align-items: center; gap: 14px; }
.strip-n b { font: 400 92px/.8 var(--fd); font-variation-settings: 'opsz' 72; letter-spacing: -.04em; color: var(--ink3); font-variant-numeric: tabular-nums; transition: color .3s var(--qo); }
.strip.has .strip-n b { color: var(--red); }
.strip-n span { font: 600 11px/1.3 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); max-width: 9em; }
.strip-codes { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cd { border: 1px solid var(--red); background: var(--pg); color: var(--ink); padding: 5px 9px 4px; font: 500 12px/1.2 var(--ft); cursor: pointer; border-radius: 0; }
.cd b { color: var(--red); font-weight: 700; }
.cd:hover { background: var(--red); color: #FFF8F2; } .cd:hover b { color: #FFF8F2; }
.strip-sum { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.strip-k { font: 600 10px/1.2 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.strip-sum b { font: 500 30px/1.05 var(--fd); letter-spacing: -.02em; }
.strip-go { font: 600 13px/1.2 var(--ft); color: var(--ink); text-decoration: none; padding: 12px 16px; border: 1.5px solid var(--ink); background: var(--pg); white-space: nowrap; transition: background .25s var(--qo), color .25s var(--qo); }
.strip-go::after { content: ' ↓'; }
.strip-go:hover { background: var(--ink); color: var(--pg); }

/* ---------- insertion order ---------- */
.io { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; padding: 64px 0 40px; scroll-margin-top: 16px; }
.io-doc { position: relative; background: var(--pg); border: 1.5px solid var(--ink); padding: 26px 30px 26px 34px; }
.io-doc::before { content: ''; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: var(--red); }
.io-k { margin: 0; font: 600 10.5px/1.3 var(--ft); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.io-h { margin: 8px 0 18px; font: 400 clamp(44px, 5vw, 74px)/.95 var(--fd); font-variation-settings: 'opsz' 72; letter-spacing: -.035em; }
.io-h em { font-style: italic; color: var(--red); }
.io-meta { display: grid; grid-template-columns: auto auto 1fr; margin: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.io-meta > div { padding: 8px 14px 8px 0; min-width: 0; }
.io-meta > div + div { padding-left: 14px; border-left: 1px solid var(--hair); }
.io-meta dt { font: 600 9.5px/1.3 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.io-meta dd { margin: 2px 0 0; font-size: 13.5px; }
.io-lines { list-style: none; margin: 0; padding: 0; }
.io-lines li { display: grid; grid-template-columns: 28px 76px minmax(0, 1fr) auto 28px; gap: 10px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--gr); }

.ln-i { font: 500 11px/1 var(--ft); color: var(--ink3); font-variant-numeric: tabular-nums; }
.ln-c { font: 700 12px/1 var(--ft); color: var(--red); letter-spacing: .04em; }
.ln-n { font: 500 18px/1.25 var(--fd); }
.ln-n small { display: block; font: 400 12px/1.45 var(--ft); color: var(--ink3); margin-top: 3px; }
.ln-p { font: 600 13.5px/1.2 var(--ft); text-align: right; white-space: nowrap; }
.ln-x { border: 1px solid var(--hair); background: transparent; width: 26px; height: 26px; line-height: 1; cursor: pointer; color: var(--ink2); font-size: 15px; padding: 0; }
.ln-x:hover { border-color: var(--red); color: var(--red); }
.io-lines li.empty { display: block; color: var(--ink2); font-size: 14px; padding: 18px 0; border-bottom: 1px solid var(--gr); }
.io-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0 0; border-top: 2px solid var(--ink); margin-top: -1px; font: 600 11px/1.3 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.io-total b { font: 500 30px/1.05 var(--fd); letter-spacing: -.02em; text-transform: none; color: var(--ink); text-align: right; }
.io-small { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink2); max-width: 64ch; }
.io-law { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--gr); font: italic 400 15px/1.5 var(--fd); color: var(--ink); max-width: 64ch; }

.io-form { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; color: var(--ink); min-width: 0; }
.io-fk { margin: 0 0 4px; font: 600 10.5px/1.3 var(--ft); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); }
.fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fld > span { font: 600 10.5px/1.3 var(--ft); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.fld input, .fld textarea { width: 100%; font: 400 16px/1.4 var(--ft); color: var(--ink); background: var(--pg); border: 1px solid var(--hair); border-bottom: 1.5px solid var(--ink); border-radius: 0; padding: 10px 12px; transition: border-color .2s var(--qo), box-shadow .2s var(--qo); }
.fld textarea { resize: vertical; min-height: 104px; }
.fld input::placeholder, .fld textarea::placeholder { color: #8A8377; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(40,90,155,.25); }
.fld-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f-err { margin: 0; color: var(--red2); font-size: 13.5px; font-weight: 600; }
.f-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; }
.send { border: 0; background: var(--red); color: #FFF8F2; padding: 15px 22px 14px; font: 700 14px/1 var(--ft); letter-spacing: .04em; cursor: pointer; border-radius: 0; box-shadow: 0 2px 0 var(--red2); transition: background .2s var(--qo), transform .2s var(--qo); }
.send:hover { background: var(--red2); }
.send:active { transform: translateY(1px); box-shadow: none; }
.call { font: 600 14px/1.3 var(--ft); color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.f-done { margin: 0; padding: 10px 12px; border-left: 2px solid var(--blue); background: var(--pg); font-size: 13.5px; color: var(--ink); }
.io-form .lead-note { color: var(--ink2); }

.colo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin: 0; padding: 18px 0 26px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--ink2); }
.colo a { color: var(--ink); text-underline-offset: 3px; }
footer.seller { background: var(--wall2); color: var(--ink2); font-family: var(--ft); border-top: 1.5px solid var(--ink); }
footer.seller strong, footer.seller a { color: var(--ink); }
footer.seller b { color: var(--ink3); opacity: 1; }

/* ---------- the ficha (sheet of one position) ---------- */
.ficha { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--pg); border-left: 1.5px solid var(--ink); box-shadow: -30px 0 60px -40px rgba(28,26,23,.55); overflow-y: auto; overscroll-behavior: contain; display: none; }
.ficha.open { display: block; animation: fiIn .55s var(--ex) both; }
@keyframes fiIn { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fiUp { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.ficha:focus { outline: none; }
.fi-in { padding: 22px 28px 30px; }
.fi-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.fi-k { margin: 0; font: 600 10.5px/1.4 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.fi-x { border: 1px solid var(--ink); background: transparent; padding: 6px 10px; cursor: pointer; font: 600 11px/1 var(--ft); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.fi-x:hover { background: var(--ink); color: var(--pg); }
.fi-t { margin: 18px 0 18px; font: 400 46px/.95 var(--fd); font-variation-settings: 'opsz' 72; letter-spacing: -.03em; }
.fi-grid { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 22px; align-items: end; padding-bottom: 6px; }
.fi-draw { padding: 22px 26px 6px 0; }
.fd { width: 140px; padding: 8px; background: var(--wall); border: 1px solid var(--hair); }
.fd .ta { overflow: visible; }
.fd .gk { height: 100%; }
.fd .pos { cursor: default; }
.dim { position: absolute; border-color: var(--blue); pointer-events: none; }
.dim em { position: absolute; font: 600 10px/1 var(--ft); font-style: normal; color: var(--blue); white-space: nowrap; background: var(--pg); padding: 1px 3px; }
.dim-h { top: -14px; height: 8px; border-top: 1px solid var(--blue); border-left: 1px solid var(--blue); border-right: 1px solid var(--blue); }
.dim-h em { left: 50%; top: -14px; transform: translateX(-50%); background: transparent; }
.dim-v { right: -24px; width: 8px; border-right: 1px solid var(--blue); border-top: 1px solid var(--blue); border-bottom: 1px solid var(--blue); }
.dim-v em { left: 12px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: 0 50%; background: transparent; }
.fd-web { width: 150px; padding: 8px; border: 1px solid var(--ink); background: var(--pg); display: flex; flex-direction: column; gap: 5px; }
.fd-web .wm { height: 10px; }
.fd-w1 { display: block; height: 18px; border: 1.2px solid var(--red); background: var(--red); }
.fd-w2 { display: block; align-self: flex-end; width: 34%; height: 40px; border: 1.2px solid var(--red); background: var(--red); }
.fd-esp { position: relative; width: 120px; height: 140px; }
.fd-esp i { position: absolute; width: 100px; height: 120px; border: 1.2px dashed var(--ink); background: var(--pg); }
.fd-esp i:nth-child(1) { left: 18px; top: 0; } .fd-esp i:nth-child(2) { left: 12px; top: 6px; } .fd-esp i:nth-child(3) { left: 6px; top: 12px; }
.fd-esp i:nth-child(4) { left: 0; top: 18px; background: repeating-linear-gradient(45deg, rgba(200,16,46,.9) 0 1.2px, transparent 1.2px 6px), var(--pg); border-color: var(--red); }
.fd-enc i { display: block; width: 100px; height: 130px; border: 1.2px dashed var(--red); transform: rotate(-5deg); background: repeating-linear-gradient(45deg, rgba(200,16,46,.9) 0 1.2px, transparent 1.2px 6px), var(--pg); margin: 4px 0 0 10px; }
.fi-price { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; min-width: 0; }
.fi-pp { font: 500 13px/1.2 var(--ft); color: var(--ink2); }
.fi-price .fi-sm { font-size: 28px; }
.fi-pk { font: 600 10px/1.2 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.fi-price b { font: 400 36px/1 var(--fd); font-variation-settings: 'opsz' 60; letter-spacing: -.025em; color: var(--ink); overflow-wrap: anywhere; }
.fi-dl { margin: 0; }
.fi-dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--gr); }
.fi-dl dt { font: 600 10px/1.5 var(--ft); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); padding-top: 2px; }
.fi-dl dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.fi-dl small, .fi-steps small { font-size: 11.5px; color: var(--ink3); white-space: nowrap; }
.fi-sk { margin: 18px 0 6px; font: 600 10px/1.5 var(--ft); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.fi-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.fi-steps li { counter-increment: s; position: relative; padding: 7px 0 7px 34px; font-size: 13.5px; line-height: 1.45; color: var(--ink2); }
.fi-steps li::before { content: counter(s); position: absolute; left: 0; top: 6px; width: 21px; height: 21px; border: 1px solid var(--ink); font: 600 11px/19px var(--ft); text-align: center; color: var(--ink); background: var(--pg); }
.fi-steps li + li::after { content: ''; position: absolute; left: 10.5px; top: -6px; height: 12px; border-left: 1px dashed var(--hair); }
.fi-steps li.dl { color: var(--ink); }
.fi-steps li.dl::before { background: var(--blue); border-color: var(--blue); color: var(--pg); }
.fi-steps li.dl b { font-weight: 600; }
.fi-mark { width: 100%; margin-top: 12px; padding: 14px 14px 13px; border: 1.5px solid var(--red); background: var(--red); color: #FFF8F2; font: 700 14px/1 var(--ft); letter-spacing: .04em; cursor: pointer; border-radius: 0; transition: background .2s var(--qo), color .2s var(--qo); }
.fi-mark:hover { background: var(--red2); border-color: var(--red2); }
.fi-mark.on { background: var(--pg); color: var(--red); }
.fi-mark.on:hover { background: #F8E7E9; }
.fi-n { margin: 0; padding: 10px 0 12px; border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--ink2); }
.fi-n b { color: var(--red); }
.fi-n a { color: var(--ink); text-underline-offset: 3px; }
.fi-ex { margin: 14px 0 0; font-size: 11.5px; color: var(--ink3); }

html.static *, html.static *::before, html.static *::after { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; } html { scroll-behavior: auto; } }

/* ---------- narrower screens ---------- */
@media (max-width: 1180px) {
  .tb { grid-template-columns: 1fr; gap: 24px; }
  .tb-title { order: -1; }
  .tb-block { max-width: 620px; }
  .plan { --pw: 74px; overflow-x: auto; padding-bottom: 14px; }
  .plan .row { width: max-content; min-width: 100%; }
  .rl { position: sticky; left: 0; z-index: 4; background: var(--wall); }
  .io { grid-template-columns: 1fr; }
  .strip { grid-template-columns: auto minmax(0, 1fr); }
  .strip-sum { align-items: flex-start; }
}
@media (max-width: 760px) {
  :root { --g: 16px; }
  .tb { padding-top: 18px; }
  .tb-tools { justify-content: space-between; }
  .big { margin-top: 22px; font-size: clamp(42px, 12.4vw, 64px); }
  .intro { font-size: 15px; }
  .tb-grid > div { padding: 6px 12px 7px; }
  .tb-grid dd { font-size: 12.5px; }
  .tb-row { padding: 10px 12px; } .tb-h { padding-left: 12px; }
  .row-x .rl-c { display: none; }
  .legend { margin: 0 var(--g); gap: 8px 14px; font-size: 11.5px; }
  .plan { --pw: 62px; }
  .row { grid-template-columns: 74px minmax(0, 1fr); }
  .rl b { font-size: 36px; }
  .rl-n { font-size: 9.5px; letter-spacing: .08em; }
  .rl-c { font-size: 11px; }
  .sps { gap: 12px; }
  .pfs { grid-template-columns: 1fr; gap: 26px; }
  .strip { grid-template-columns: 1fr; gap: 12px; }
  .strip-n b { font-size: 72px; }
  .strip-go { justify-self: start; }
  .io { padding-top: 44px; gap: 36px; }
  .io-doc { padding: 22px 18px 22px 26px; }
  .io-doc::before { left: 10px; }
  .io-meta { grid-template-columns: 1fr; }
  .io-meta > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); }
  .io-lines li { grid-template-columns: minmax(0, 1fr) 28px; grid-template-areas: 'c x' 'n x' 'p x'; gap: 6px 10px; }
  .io-total { flex-direction: column; align-items: flex-start; gap: 4px; } .io-total b { font-size: 26px; text-align: left; }
  .ln-i { display: none; } .ln-c { grid-area: c; } .ln-n { grid-area: n; } .ln-p { grid-area: p; text-align: left; } .ln-x { grid-area: x; }
  .fld-2 { grid-template-columns: 1fr; }
  .ficha { top: auto; left: 0; width: 100%; max-height: 86vh; border-left: 0; border-top: 1.5px solid var(--ink); box-shadow: 0 -30px 60px -30px rgba(28,26,23,.55); }
  .ficha.open { animation-name: fiUp; }
  .fi-in { padding: 18px 18px 26px; }
  .fi-t { font-size: 38px; }
  .fi-grid { grid-template-columns: 150px minmax(0, 1fr); gap: 14px; }
  .fd { width: 124px; }
  .fi-dl > div { grid-template-columns: 1fr; gap: 3px; }
  .fi-dl small, .fi-steps small { white-space: normal; }
}

/* == 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: lumexa */
.ck { left: 24px; bottom: 24px; width: 344px; max-width: calc(100vw - 32px); padding: 12px 14px 14px; background: #FCFBF7; color: #1C1A17; border: 1px solid #B4AC9E; border-top: 3px solid #1C1A17; box-shadow: 0 1px 0 rgba(28,26,23,.06), 0 26px 50px -26px rgba(28,26,23,.6); font-family: 'Public Sans', 'Segoe UI', sans-serif; font-size: 13px; line-height: 1.5; }
.ck::before { content: ''; position: absolute; left: 14px; right: 14px; top: 40px; height: 52px;
  background: linear-gradient(#BFB7A9, #BFB7A9) left top / 72% 9px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(33.333% - 5px), #FCFBF7 calc(33.333% - 5px) 33.333%) left 16px / 100% 36px no-repeat,
    repeating-linear-gradient(180deg, #DBD5C9 0 2px, transparent 2px 5px) left 16px / 100% 36px no-repeat; }
.ck::after { content: ''; position: absolute; left: 14px; right: 14px; top: 102px; bottom: 14px; z-index: 0; border: 1.4px solid #1C1A17;
  background: repeating-linear-gradient(45deg, #1C1A17 0 1.1px, transparent 1.1px 5.5px), #FCFBF7; }
.ck .ck-k { position: relative; height: 22px; padding-bottom: 7px; border-bottom: 1px solid #B4AC9E; font: 600 10.5px/14px 'Public Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #47423A; font-variant-numeric: tabular-nums; }
.ck .ck-t { position: relative; z-index: 1; margin: 82px 10px 0; padding: 12px 14px 4px; background: #FCFBF7; border: 1px solid #1C1A17; border-bottom: 0; }
.ck .ck-t b { display: block; font: 500 21px/1.1 'Newsreader', Georgia, serif; letter-spacing: -.015em; color: #1C1A17; }
.ck .ck-p { position: relative; z-index: 1; margin: 0 10px; padding: 6px 14px 12px; background: #FCFBF7; border-left: 1px solid #1C1A17; border-right: 1px solid #1C1A17; font-size: 12.5px; color: #47423A; }
.ck .b { position: relative; z-index: 1; margin: 0 10px 10px; padding: 9px 10px; gap: 8px 10px; background: #FCFBF7; border: 1px solid #1C1A17; border-top: 1px dashed #B4AC9E; }
.ck button { border-radius: 0; padding: 8px 12px 7px; font: 700 12px/1 'Public Sans', sans-serif; letter-spacing: .04em; }
.ck button.ok { background: #C8102E; color: #FFF8F2; border: 1.4px solid #C8102E; }
.ck button.ok:hover { background: #A00C25; border-color: #A00C25; }
.ck button.no { background: #FCFBF7; color: #1C1A17; border: 1.4px solid #1C1A17; }
.ck button.no:hover { background: #1C1A17; color: #FCFBF7; }
.ck a.more { font: 600 12px/1.2 'Public Sans', sans-serif; color: #1C1A17; text-decoration: underline; text-decoration-color: #C8102E; text-underline-offset: 3px; padding: 4px 2px; }
.ck button:focus-visible, .ck a.more:focus-visible { outline: 2px solid #285A9B; outline-offset: 2px; }

@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; } }