/* Sistelco — warning-plaque composer. Concrete wall, signal yellow, black, warning red, white; Anton + Work Sans. */
:root {
  --wall: #BDBAB3; --wall-joint: #A9A69F; --tie: #8F8C85; --tie-ring: #A4A19A;
  --ink: #141414; --ink-2: #3A3834; --white: #F7F6F2; --paper: #F1F0EC;
  --yel: #F6C700; --red: #C8211A; --blue: #1C4A97; --alu: #CDD0D2; --rivet: #8A8D91;
  --asph: #262624; --asph-ink: #EDEBE5; --asph-2: #C9C6BF;
  --fd: 'Anton', Impact, 'Arial Narrow', sans-serif; --ft: 'Work Sans', Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1); --ease2: cubic-bezier(.25, 1, .5, 1); --swing: cubic-bezier(.34, 1.56, .64, 1);
  --hard: 6px 8px 0 rgba(20, 20, 20, .22);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font: 400 16px/1.55 var(--ft); color: var(--ink); background-color: var(--wall);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Ccircle cx='52' cy='24' r='0.6' fill='%23A6A39C'/%3E%3Ccircle cx='131' cy='15' r='1.5' fill='%23A6A39C'/%3E%3Ccircle cx='146' cy='34' r='0.6' fill='%23CDCAC3'/%3E%3Ccircle cx='67' cy='39' r='1.5' fill='%23CDCAC3'/%3E%3Ccircle cx='9' cy='90' r='0.8' fill='%239E9B94'/%3E%3Ccircle cx='152' cy='92' r='1.2' fill='%23A6A39C'/%3E%3Ccircle cx='156' cy='7' r='0.8' fill='%23C9C6BF'/%3E%3Ccircle cx='67' cy='87' r='1.5' fill='%23C9C6BF'/%3E%3Ccircle cx='90' cy='109' r='0.6' fill='%239E9B94'/%3E%3Ccircle cx='91' cy='30' r='0.6' fill='%239E9B94'/%3E%3Ccircle cx='114' cy='90' r='1.5' fill='%23A9A69F'/%3E%3Ccircle cx='79' cy='85' r='1' fill='%23CDCAC3'/%3E%3Ccircle cx='94' cy='73' r='1' fill='%23A9A69F'/%3E%3Ccircle cx='127' cy='112' r='0.8' fill='%23A6A39C'/%3E%3Ccircle cx='92' cy='84' r='1' fill='%23CDCAC3'/%3E%3Ccircle cx='46' cy='157' r='0.6' fill='%239E9B94'/%3E%3Ccircle cx='67' cy='121' r='0.8' fill='%23CDCAC3'/%3E%3Ccircle cx='67' cy='154' r='0.6' fill='%239E9B94'/%3E%3Ccircle cx='92' cy='140' r='1' fill='%23C9C6BF'/%3E%3Ccircle cx='111' cy='95' r='1.5' fill='%23CDCAC3'/%3E%3Ccircle cx='11' cy='15' r='1' fill='%23CDCAC3'/%3E%3Ccircle cx='112' cy='10' r='1' fill='%239E9B94'/%3E%3Ccircle cx='159' cy='132' r='1' fill='%23CDCAC3'/%3E%3Ccircle cx='142' cy='56' r='1.2' fill='%23C9C6BF'/%3E%3Ccircle cx='27' cy='19' r='0.6' fill='%23A9A69F'/%3E%3Ccircle cx='123' cy='21' r='0.8' fill='%23CDCAC3'/%3E%3Ccircle cx='63' cy='139' r='0.6' fill='%23A9A69F'/%3E%3Ccircle cx='72' cy='88' r='0.8' fill='%23CDCAC3'/%3E%3Ccircle cx='138' cy='45' r='1.2' fill='%23C9C6BF'/%3E%3Ccircle cx='109' cy='61' r='0.8' fill='%23A9A69F'/%3E%3Ccircle cx='13' cy='24' r='0.8' fill='%23A6A39C'/%3E%3Ccircle cx='78' cy='94' r='1' fill='%23C9C6BF'/%3E%3Ccircle cx='1' cy='67' r='1' fill='%239E9B94'/%3E%3Ccircle cx='91' cy='152' r='1.5' fill='%239E9B94'/%3E%3Ccircle cx='105' cy='118' r='1.2' fill='%239E9B94'/%3E%3Ccircle cx='63' cy='64' r='0.6' fill='%23CDCAC3'/%3E%3Ccircle cx='101' cy='10' r='0.6' fill='%23A9A69F'/%3E%3Ccircle cx='71' cy='18' r='1.5' fill='%23A6A39C'/%3E%3Ccircle cx='16' cy='91' r='1.5' fill='%23A6A39C'/%3E%3Ccircle cx='152' cy='98' r='0.6' fill='%23A9A69F'/%3E%3Ccircle cx='98' cy='24' r='1' fill='%23C9C6BF'/%3E%3Ccircle cx='96' cy='76' r='0.6' fill='%23CDCAC3'/%3E%3Ccircle cx='159' cy='75' r='1.2' fill='%23C9C6BF'/%3E%3Ccircle cx='14' cy='16' r='1' fill='%23C9C6BF'/%3E%3Ccircle cx='77' cy='111' r='1.5' fill='%23A6A39C'/%3E%3Ccircle cx='33' cy='152' r='1' fill='%23A9A69F'/%3E%3Ccircle cx='110' cy='146' r='1.5' fill='%23C9C6BF'/%3E%3Ccircle cx='157' cy='138' r='1' fill='%239E9B94'/%3E%3Ccircle cx='59' cy='27' r='0.8' fill='%239E9B94'/%3E%3Ccircle cx='87' cy='80' r='0.8' fill='%239E9B94'/%3E%3Ccircle cx='130' cy='158' r='0.8' fill='%23A9A69F'/%3E%3Ccircle cx='131' cy='118' r='0.8' fill='%23A9A69F'/%3E%3Ccircle cx='83' cy='57' r='0.6' fill='%23A6A39C'/%3E%3Ccircle cx='126' cy='76' r='0.8' fill='%239E9B94'/%3E%3Ccircle cx='153' cy='72' r='1' fill='%23C9C6BF'/%3E%3Ccircle cx='13' cy='16' r='1.2' fill='%23A9A69F'/%3E%3Ccircle cx='54' cy='77' r='1.5' fill='%23A6A39C'/%3E%3Ccircle cx='77' cy='104' r='0.6' fill='%23A6A39C'/%3E%3Ccircle cx='146' cy='125' r='0.8' fill='%23CDCAC3'/%3E%3Ccircle cx='142' cy='69' r='1' fill='%23A6A39C'/%3E%3Ccircle cx='128' cy='155' r='1.2' fill='%23CDCAC3'/%3E%3Ccircle cx='64' cy='151' r='0.8' fill='%23A9A69F'/%3E%3Ccircle cx='159' cy='4' r='1.5' fill='%23CDCAC3'/%3E%3Ccircle cx='129' cy='23' r='1.5' fill='%23CDCAC3'/%3E%3Ccircle cx='105' cy='56' r='1.5' fill='%239E9B94'/%3E%3Ccircle cx='21' cy='2' r='0.6' fill='%239E9B94'/%3E%3Ccircle cx='120' cy='22' r='0.8' fill='%23A9A69F'/%3E%3Ccircle cx='4' cy='34' r='1.5' fill='%23A9A69F'/%3E%3Ccircle cx='122' cy='52' r='1.5' fill='%23CDCAC3'/%3E%3Ccircle cx='133' cy='10' r='1' fill='%23CDCAC3'/%3E%3C/svg%3E");
  overflow-x: clip;
}
::selection { background: var(--yel); color: var(--ink); }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

/* ---------- strip ---------- */
.strip { display: flex; align-items: center; gap: 24px; padding: 14px 48px; border-bottom: 3px solid var(--ink); position: relative; z-index: 3; }
.brand { display: block; flex: none; }
.brand img { height: 34px; width: auto; display: block; }
.strip-t { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--ink-2); flex: 1; min-width: 0; }
.strip-r { display: flex; align-items: center; gap: 18px; flex: none; }
.strip-tel { font: 400 22px/1 var(--fd); letter-spacing: .02em; text-decoration: none; }
.strip-tel:hover { text-decoration: underline; text-decoration-color: var(--yel); text-decoration-thickness: 3px; }
.lang { display: inline-flex; border: 2px solid var(--ink); }
.lang button { border: 0; background: transparent; padding: 6px 10px; font: 600 12px/1 var(--ft); letter-spacing: .1em; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--yel); }

/* ---------- wall ---------- */
.wall {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px;
  padding: 48px 48px 56px; min-height: clamp(0px, calc(100vh - 66px), 940px);
  background-image:
    radial-gradient(circle, var(--tie) 0 4px, var(--tie-ring) 4px 6.5px, transparent 7px),
    linear-gradient(90deg, transparent calc(100% - 1px), var(--wall-joint) 0),
    linear-gradient(transparent calc(100% - 1px), var(--wall-joint) 0);
  background-size: 240px 180px, 480px 180px, 480px 180px; background-position: 0 0, -120px -90px, -120px -90px;
}
.wall-copy { align-self: center; padding-bottom: 24px; }
.wall-k { margin: 0 0 22px; font: 600 12.5px/1.3 var(--ft); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.wall h1 { font: 400 clamp(54px, 7.4vw, 112px)/.94 var(--fd); text-transform: uppercase; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
.wall h1 span { display: inline-block; margin-top: .1em; background: var(--yel); padding: .04em .1em 0; }
.wall-p { margin: 26px 0 0; max-width: 40ch; font-size: 18px; line-height: 1.55; color: var(--ink); }
.wall-go { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; padding: 14px 18px; background: var(--ink); color: var(--yel); font: 400 19px/1 var(--fd); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; box-shadow: 5px 5px 0 var(--yel); transition: transform .3s var(--ease2), box-shadow .3s var(--ease2); }
.wall-go:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--yel); }
.wall-go b { font-weight: 400; }

.plaques { position: relative; aspect-ratio: 820 / 700; align-self: center; }
.nameplate { position: absolute; left: 79%; top: 3%; margin: 0; transform: rotate(1.2deg); }
.nameplate img { display: block; width: 110px; height: auto; background: #fff; padding: 5px; box-shadow: var(--hard); }
.nameplate figcaption { margin-top: 8px; font: 600 10.5px/1.2 var(--ft); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.stencil { position: absolute; left: 74%; top: 79%; margin: 0; font: 400 21px/1 var(--fd); letter-spacing: .14em; text-transform: uppercase; color: rgba(20, 20, 20, .5); transform: rotate(-4deg); }
.stencil::before { content: ''; display: block; width: 46px; height: 46px; margin: 0 0 8px -6px; border-left: 4px solid rgba(20, 20, 20, .5); border-top: 4px solid rgba(20, 20, 20, .5); transform: rotate(0deg); }

/* a plaque: a button that turns over */
.plq {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); aspect-ratio: var(--ar);
  transform: rotate(var(--r)); transform-origin: 50% 0; container-type: inline-size; perspective: 1400px;
  padding: 0; border: 0; background: none; cursor: pointer; text-align: center; z-index: 1;
  transition: transform .7s var(--swing);
}
.plq:hover { transform: rotate(calc(var(--r) * -1.4)) translateY(-3px); z-index: 2; }
.plq:focus-visible { outline: 3px solid var(--ink); outline-offset: 8px; }
.plq.hang { animation: hang 1.1s var(--swing) both; animation-delay: calc(140ms + var(--i) * 95ms); }
@keyframes hang { from { opacity: 0; transform: translateY(-30px) rotate(calc(var(--r) * -4)); } }
.plq-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s var(--ease); }
.plq.is-flip .plq-in { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 1.4cqi; overflow: hidden; box-shadow: 1.4cqi 1.9cqi 0 rgba(20, 20, 20, .24); }
.face.back { transform: rotateY(180deg); background: var(--alu); }
.pf { position: absolute; inset: 0; display: flex; flex-direction: column; }
.pf-in { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pf-row { flex: 1; display: flex; align-items: center; text-align: left; }
.pf .ico { display: block; flex: none; }
.w1, .w2, .w3 { display: block; font-family: var(--fd); text-transform: uppercase; line-height: .98; }
.sc { position: absolute; width: 3.6cqi; height: 3.6cqi; border-radius: 50%; background: #DAD8D2; box-shadow: inset 0 0 0 .4cqi #6E6B66; }
.sc::after { content: ''; position: absolute; left: 18%; right: 18%; top: 44%; height: 12%; background: #6E6B66; transform: rotate(35deg); }
.sc.s1 { left: 2.2cqi; top: 2.2cqi; } .sc.s2 { right: 2.2cqi; top: 2.2cqi; } .sc.s3 { left: 2.2cqi; bottom: 2.2cqi; } .sc.s4 { right: 2.2cqi; bottom: 2.2cqi; }

.plq--yel .pf { background: repeating-linear-gradient(-45deg, var(--ink) 0 4.4cqi, var(--yel) 4.4cqi 8.8cqi); padding: 7cqi; }
.plq--yel .pf-in { background: var(--yel); color: var(--ink); gap: 1.2cqi; padding: 4cqi; }
.plq--yel .ico { width: 40cqi; margin-bottom: 4cqi; }
.plq--yel .w1 { font-size: 17cqi; } .plq--yel .w2 { font-size: 10.6cqi; } .plq--yel .w3 { font-size: 10.6cqi; }

.plq--rw .pf { background: var(--white); border: 3.4cqi solid var(--red); }
.plq--rw .band { display: block; background: var(--red); color: var(--white); font: 400 8.6cqi/1 var(--fd); letter-spacing: .1em; text-transform: uppercase; padding: 2.2cqi 0 2.6cqi; }
.plq--rw .pf-row { gap: 4cqi; padding: 0 5cqi; color: var(--ink); }
.plq--rw .ico { width: 34cqi; }
.plq--rw .w1 { font-size: 10.6cqi; } .plq--rw .w2 { font-size: 7.6cqi; color: var(--red); margin-top: 2cqi; }

.plq--red .pf { background: var(--red); padding: 3.2cqi; }
.plq--red .pf-in { border: 1cqi solid var(--white); color: var(--white); gap: .6cqi; }
.plq--red .ico { width: 30cqi; margin-bottom: 3cqi; }
.plq--red .w1 { font-size: 10cqi; } .plq--red .w2 { font-size: 15cqi; } .plq--red .w3 { font-size: 11.4cqi; }

.plq--blue .pf { background: var(--blue); padding: 3.2cqi; }
.plq--blue .pf-in { border: 1cqi solid var(--white); color: var(--white); flex-direction: row; gap: 5cqi; padding: 0 6cqi; text-align: left; }
.plq--blue .ico { width: 34cqi; }
.plq--blue .w1 { font-size: 12.4cqi; } .plq--blue .w2 { font: 700 6.2cqi/1.2 var(--ft); letter-spacing: .06em; margin-top: 2.4cqi; }

.plq--wb .pf { background: var(--white); border: 2.2cqi solid var(--ink); }
.plq--wb .pf-row { gap: 4cqi; padding: 0 6cqi; color: var(--ink); }
.plq--wb .ico { width: 17cqi; }
.plq--wb .w1 { font-size: 6.4cqi; } .plq--wb .w2 { font-size: 9.6cqi; }
.plq--wb .band { display: block; background: var(--ink); color: var(--yel); font: 400 5.4cqi/1 var(--fd); letter-spacing: .1em; text-transform: uppercase; padding: 2.2cqi 0 2.4cqi; }

.plq--blk .pf { background: var(--ink); padding: 3.6cqi; }
.plq--blk .pf-in { border: 1.1cqi solid var(--yel); color: var(--yel); gap: 2cqi; padding: 4cqi; }
.plq--blk .ico { width: 46cqi; margin-bottom: 3cqi; }
.plq--blk .w1 { font-size: 21cqi; } .plq--blk .w2 { font: 700 7.6cqi/1.15 var(--ft); letter-spacing: .06em; color: var(--white); }

/* the back: plain aluminium, riveted */
.pb { position: absolute; inset: 0; padding: 9cqi 9cqi 8cqi; display: flex; flex-direction: column; align-items: flex-start; gap: 2.6cqi; text-align: left; color: var(--ink); }
.pb-k { font: 600 max(10px, 4cqi)/1.2 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.pb-n { font: 400 max(15px, 8.6cqi)/1.02 var(--fd); text-transform: uppercase; }
.pb-s { font: 400 max(11.5px, 4.4cqi)/1.4 var(--ft); color: var(--ink-2); }
.pb-p { font: 500 max(11.5px, 4.4cqi)/1.3 var(--ft); }
.pb-p b { font: 400 max(16px, 7.4cqi)/1 var(--fd); display: inline-block; }
.pb-p em { font-style: normal; font-size: .82em; letter-spacing: .08em; text-transform: uppercase; color: var(--red); font-weight: 600; }
.pb-go { margin-top: auto; background: var(--ink); color: var(--yel); font: 600 max(11px, 4.2cqi)/1 var(--ft); letter-spacing: .08em; text-transform: uppercase; padding: 2.4cqi 3cqi; }
@container (max-width: 300px) { .pb-s { display: none; } }
.rv { position: absolute; width: 3cqi; height: 3cqi; border-radius: 50%; background: var(--rivet); box-shadow: inset .5cqi .5cqi 0 #B9BCBF; }
.rv.r1 { left: 3cqi; top: 3cqi; } .rv.r2 { right: 3cqi; top: 3cqi; } .rv.r3 { left: 3cqi; bottom: 3cqi; } .rv.r4 { right: 3cqi; bottom: 3cqi; }

/* ---------- curb + road ---------- */
.curb { height: 26px; background: repeating-linear-gradient(-45deg, var(--ink) 0 18px, var(--yel) 18px 36px); border-top: 3px solid var(--ink); }
.road { background: var(--asph); color: var(--asph-ink); padding: 40px 48px 46px; }
.road-h { font: 600 12.5px/1.3 var(--ft); letter-spacing: .18em; text-transform: uppercase; color: var(--asph-2); }
.road-list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; }
.road-list li { position: relative; padding: 4px 26px 6px; min-width: 0; }
.road-list li:first-child { padding-left: 0; }
.road-list li + li::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 6px; width: 5px; background: repeating-linear-gradient(var(--yel) 0 14px, transparent 14px 26px); }
.rd { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: var(--asph-ink); }
.rd-t { font-size: 12.5px; font-weight: 500; color: var(--asph-2); }
.rd-n { font: 400 clamp(36px, 3.4vw, 54px)/1 var(--fd); letter-spacing: .01em; transition: color .3s var(--ease2), transform .4s var(--ease); }
.rd-x { font: 600 10.5px/1.2 var(--ft); letter-spacing: .1em; text-transform: uppercase; color: var(--yel); }
.rd:hover .rd-n { color: var(--yel); transform: translateY(-2px); }
.road-list li:last-child .rd-n { color: var(--yel); }
.road-note { margin: 28px 0 0; max-width: 78ch; font-size: 14.5px; line-height: 1.6; color: var(--asph-2); }

/* ---------- composer ---------- */
.comp { padding: 76px 48px 88px; }
.comp-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; margin-bottom: 40px; }
.comp-head h2 { font: 400 clamp(46px, 6.2vw, 96px)/.92 var(--fd); text-transform: uppercase; }
.comp-head h2 span { display: block; color: var(--red); }
.comp-head p { margin: 0; font-size: 17.5px; line-height: 1.55; max-width: 44ch; }
.comp b.n, legend b, .formats h3 b, .ask h3 b, .name-f label b { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; background: var(--ink); color: var(--yel); font: 400 18px/1 var(--fd); vertical-align: middle; }
legend, .formats h3, .ask h3, .name-f label { font: 600 13px/1.3 var(--ft); letter-spacing: .12em; text-transform: uppercase; }

.board { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); background: var(--paper); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.prot { margin: 0; border: 0; padding: 26px 28px 18px; min-width: 0; }
.prot legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; }
.prot-key { clear: both; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; color: var(--ink-2); }
.row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid #D3D0C9; }
.row:last-child { border-bottom: 0; }
.row-i { width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--white); transition: background .3s var(--ease2); }
.row-i .ico { width: 28px; height: 28px; }
.row.is-on .row-i { background: var(--yel); }
.row.lit { animation: lit 1.4s var(--ease2); }
@keyframes lit { 0%, 40% { background: var(--yel); } 100% { background: transparent; } }
.row-n { font-weight: 600; font-size: 15.5px; line-height: 1.3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.segs { display: inline-flex; border: 2px solid var(--ink); background: var(--white); }
.seg { position: relative; cursor: pointer; }
.seg + .seg { border-left: 2px solid var(--ink); }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; min-width: 46px; padding: 8px 11px; text-align: center; font: 600 12px/1.1 var(--ft); letter-spacing: .06em; text-transform: uppercase; transition: background .25s var(--ease2), color .25s var(--ease2); }
.seg.on span { background: var(--ink); color: var(--yel); }
.seg.on:first-child span { background: #D9D6CF; color: var(--ink); }
.seg:not(.on):not(.dis):hover span { background: #E6E3DC; }
.seg.dis { cursor: default; } .seg.dis span { color: #9A978F; }
.seg input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; position: relative; z-index: 1; }
.cams { display: inline-flex; align-items: center; gap: 4px; }
.cam { width: 30px; height: 28px; border: 2px solid var(--ink); background: var(--white); font: 600 12.5px/1 var(--ft); cursor: pointer; padding: 0; }
.cam.on { background: var(--yel); }
.cams-l { font: 500 12.5px/1 var(--ft); color: var(--ink-2); margin-left: 4px; }

.name-f { border-left: 3px solid var(--ink); padding: 26px 28px; min-width: 0; display: flex; flex-direction: column; }
.name-f label { display: block; margin-bottom: 18px; }
.name-in { position: relative; }
.name-in input { width: 100%; border: 3px solid var(--ink); background: var(--yel); color: var(--ink); font: 400 34px/1.1 var(--fd); text-transform: uppercase; letter-spacing: .02em; padding: 14px 76px 14px 16px; border-radius: 0; }
.name-in input::placeholder { color: rgba(20, 20, 20, .38); }
.name-in input:focus { outline: 3px solid var(--blue); outline-offset: 3px; }
.name-in output { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 600 13px/1 var(--ft); font-variant-numeric: tabular-nums; color: var(--ink); background: var(--white); padding: 5px 6px; border: 2px solid var(--ink); }
.name-in output.near { background: var(--red); color: var(--white); border-color: var(--red); }
.kind { margin: 28px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid #D3D0C9; min-width: 0; }
.kind legend { padding: 0; font: 600 12px/1.3 var(--ft); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; float: left; width: 100%; }
.kinds { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.kd { border: 2px solid var(--ink); background: var(--white); padding: 9px 14px; font: 400 18px/1 var(--fd); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .2s var(--ease2); }
.kd:hover { background: #E6E3DC; }
.kd.on { background: var(--ink); color: var(--yel); }
.hint { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

/* the four formats, drawn at one scale */
.formats { margin-top: 64px; }
.formats-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 32px; }
.formats-h .hint { margin: 0; max-width: 60ch; }
.fmt-strip { --cm: clamp(6px, calc((100vw - 96px - 120px) / 150), 8.6px); display: flex; align-items: flex-end; gap: 40px; padding: 34px 0 10px; overflow-x: auto; scrollbar-width: thin; }
.fmt-c { flex: none; width: calc(var(--fw) * var(--cm)); }
.fmt { position: relative; display: block; width: 100%; aspect-ratio: var(--fw) / var(--fh); container-type: inline-size; border: 0; padding: 0; background: none; cursor: pointer; color: var(--ink); transition: transform .5s var(--swing); }
.fmt:hover { transform: translateY(-4px) rotate(-.6deg); }
.fmt-c.on .fmt { outline: 3px dashed var(--ink); outline-offset: 10px; }
.fmt::before { content: ''; position: absolute; inset: 0; box-shadow: 1.4cqi 1.9cqi 0 rgba(20, 20, 20, .24); }
.fmt .ico { display: block; flex: none; }
.fmt .ico.ghost { opacity: .22; }
.ph { font-family: var(--ft); font-weight: 600; letter-spacing: .1em; opacity: .5; text-transform: uppercase; font-size: .55em; }
.fmt-cap { margin: 18px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.fmt-cap b { display: block; color: var(--ink); font-weight: 600; }
.fmt-on { display: inline-block; margin-left: 8px; background: var(--ink); color: var(--yel); font: 600 10.5px/1 var(--ft); letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px; vertical-align: 1px; }
.fmt-c.pop .fmt { animation: stamp .45s var(--ease2); }
@keyframes stamp { 0% { transform: scale(.985); } 100% { transform: none; } }

.fmt--muro::before { background: repeating-linear-gradient(-45deg, var(--ink) 0 3.3cqi, var(--yel) 3.3cqi 6.6cqi); border-radius: 1cqi; }
.m-in { position: absolute; inset: 4.6cqi 4.6cqi 20.6cqi; background: var(--yel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2cqi; padding: 2.6cqi 4cqi; text-align: center; }
.m-ic { display: flex; gap: 2.2cqi; justify-content: center; }
.m-ic .ico { width: 10.6cqi; height: 10.6cqi; }
.m-h { text-wrap: balance; font: 700 4.1cqi/1.1 var(--ft); letter-spacing: .06em; text-transform: uppercase; }
.m-w, .g-w { font-family: var(--fd); text-transform: uppercase; line-height: 1.02; text-wrap: balance; }
.m-w span, .g-w span { display: inline; } .m-w.n3 span, .m-w.n4 span, .m-w.n5 span, .g-w.n3 span, .g-w.n4 span, .g-w.n5 span { white-space: nowrap; }
.m-w i, .g-w i { font-style: normal; color: var(--red); margin-left: .22em; }
.m-w.n0 { font-size: 12cqi; } .m-w.n1 { font-size: 13cqi; } .m-w.n2 { font-size: 10.4cqi; } .m-w.n3 { font-size: 8.4cqi; } .m-w.n4 { font-size: 7cqi; } .m-w.n5 { font-size: 6.1cqi; }
.m-name { position: absolute; left: 4.6cqi; right: 4.6cqi; bottom: 4.6cqi; height: 14cqi; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--yel); font: 400 var(--fs)/1 var(--fd); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.m-name.none, .g-name.none { color: #8C8A84; } .c-name.none { color: rgba(247, 246, 242, .55); }
.fmt--muro .sc { width: 2.6cqi; height: 2.6cqi; }
.fmt--muro .sc.s1, .fmt--muro .sc.s3 { left: 1cqi; } .fmt--muro .sc.s2, .fmt--muro .sc.s4 { right: 1cqi; }
.fmt--muro .sc.s1, .fmt--muro .sc.s2 { top: 1cqi; } .fmt--muro .sc.s3, .fmt--muro .sc.s4 { bottom: 1cqi; }

.fmt--portao::before { background: var(--white); border: 1.6cqi solid var(--red); border-radius: .8cqi; }
.g-l { position: absolute; left: 1.6cqi; top: 1.6cqi; bottom: 1.6cqi; width: 25cqi; background: var(--red); color: var(--white); display: flex; align-items: center; justify-content: center; gap: 1.6cqi; }
.g-l .ico { width: 10cqi; height: 10cqi; }
.g-r { position: absolute; left: 30cqi; right: 3cqi; top: 3.6cqi; bottom: 10.5cqi; display: flex; flex-direction: column; justify-content: center; text-align: left; gap: 1cqi; }
.g-h { font: 700 2.5cqi/1.1 var(--ft); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.g-w.n0 { font-size: 6cqi; } .g-w.n1 { font-size: 8cqi; } .g-w.n2 { font-size: 6.4cqi; } .g-w.n3 { font-size: 5cqi; } .g-w.n4 { font-size: 4.2cqi; } .g-w.n5 { font-size: 3.7cqi; }
.g-name { position: absolute; right: 3.2cqi; bottom: 3.2cqi; max-width: 62cqi; background: var(--ink); color: var(--yel); font: 400 var(--fs)/1 var(--fd); letter-spacing: .03em; text-transform: uppercase; padding: .9cqi 1.8cqi 1.1cqi; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fmt--condominio::before { background: var(--blue); border-radius: 1.4cqi; }
.c-in { position: absolute; inset: 4.4cqi; border: 1cqi solid var(--white); color: var(--white); display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 6cqi 6cqi 7cqi; gap: 2.6cqi; }
.c-k { font: 700 5.4cqi/1 var(--ft); letter-spacing: .22em; text-transform: uppercase; }
.c-name { font: 400 var(--fs)/1 var(--fd); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; max-width: 100%; overflow: hidden; }
.c-h { width: 100%; margin-top: 2cqi; padding-top: 4cqi; border-top: .8cqi solid var(--white); font: 600 4.5cqi/1.25 var(--ft); letter-spacing: .05em; text-transform: uppercase; }
.c-g { display: flex; flex-direction: column; gap: 3.4cqi; width: 100%; margin-top: 2cqi; }
.c-it { display: flex; align-items: center; gap: 3.4cqi; font: 400 6.4cqi/1.02 var(--fd); text-transform: uppercase; }
.c-it .ico { width: 14cqi; height: 14cqi; padding: 2.2cqi; background: var(--white); color: var(--blue); border-radius: 1cqi; }
.c-ph { font-size: 9cqi; }
.c-g.n1, .c-g.n2 { gap: 6cqi; margin-top: 6cqi; } .c-g.n1 .c-it, .c-g.n2 .c-it { font-size: 10cqi; } .c-g.n1 .ico, .c-g.n2 .ico { width: 24cqi; height: 24cqi; padding: 3.6cqi; }
.c-g.n3 { gap: 5cqi; margin-top: 4cqi; } .c-g.n3 .c-it { font-size: 8.2cqi; } .c-g.n3 .ico { width: 19cqi; height: 19cqi; padding: 2.8cqi; }
.c-g.n4 .c-it { font-size: 7cqi; } .c-g.n4 .ico { width: 16cqi; height: 16cqi; }

.fmt--vidro::before { border-radius: 50%; }
.v-svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.v-ring { font-family: var(--fd); fill: var(--white); letter-spacing: .02em; }
.v-name { font-family: var(--fd); fill: var(--ink); }
.v-name.none { fill: #8C8A84; }

.honest { margin: 30px 0 0; padding: 14px 18px; max-width: 80ch; background: var(--paper); border-left: 8px solid var(--red); font-size: 15px; line-height: 1.55; }

/* the request */
.ask { margin-top: 72px; }
.ask h3 { margin-bottom: 22px; }
.ask-f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-areas: "fields msg" "btns msg" "note msg" "sent msg"; gap: 18px 40px; align-items: start; }
.ask-fields { grid-area: fields; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.ask-fields label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ask-fields label > span { font: 600 12px/1.2 var(--ft); letter-spacing: .12em; text-transform: uppercase; }
.ask-fields .wide { grid-column: 1 / -1; }
.ask-fields input, .ask-fields textarea { width: 100%; font: 400 16px/1.4 var(--ft); color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-radius: 0; padding: 11px 12px; resize: vertical; }
.ask-fields input::placeholder, .ask-fields textarea::placeholder { color: #75726B; }
.ask-fields input:focus, .ask-fields textarea:focus { outline: 3px solid var(--blue); outline-offset: 2px; }
.msg-wrap { grid-area: msg; background: var(--ink); color: var(--asph-ink); border-left: 10px solid var(--yel); padding: 22px 26px 26px; box-shadow: 10px 10px 0 rgba(20, 20, 20, .25); min-width: 0; }
.msg-k { margin: 0 0 12px; font: 600 11.5px/1.2 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--yel); }
.msg { margin: 0; font: 500 15.5px/1.65 var(--ft); white-space: pre-wrap; overflow-wrap: anywhere; min-height: 200px; }
.ask-b { grid-area: btns; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.btn-call { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; border: 3px solid var(--ink); background: var(--yel); color: var(--ink); padding: 12px 18px 13px; font: 400 22px/1 var(--fd); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; box-shadow: 5px 5px 0 var(--ink); transition: transform .2s var(--ease2), box-shadow .2s var(--ease2); }
.btn-call span { font: 600 13px/1 var(--ft); letter-spacing: .04em; }
.btn-call:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn-call:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn-wa { border: 3px solid var(--ink); background: var(--white); padding: 14px 16px; font: 600 14.5px/1.1 var(--ft); cursor: pointer; transition: background .2s var(--ease2); }
.btn-wa:hover { background: var(--paper); }
.btn-copy { border: 0; background: none; padding: 8px 2px; font: 600 14px/1 var(--ft); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.lead-note { grid-area: note; }
.sent { grid-area: sent; margin: 0; padding: 12px 14px; background: var(--white); border-left: 8px solid var(--ink); font-size: 14.5px; line-height: 1.5; }
.sent.pop { animation: stamp .5s var(--ease2); }

/* ---------- the shop ---------- */
.loja { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 26px 64px; padding: 80px 48px 72px; border-top: 3px solid var(--ink); align-items: start; }
.streetplate { grid-column: 1; grid-row: 1; display: grid; justify-items: center; gap: 4px; padding: 20px 34px 18px; background: var(--blue); color: var(--white); border-radius: 12px; box-shadow: inset 0 0 0 6px var(--blue), inset 0 0 0 9px var(--white), var(--hard); transform: rotate(-1.4deg); }
.sp-b { font: 600 13px/1 var(--ft); letter-spacing: .24em; text-transform: uppercase; }
.sp-n { margin-top: 6px; font: 400 54px/1.04 var(--fd); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.sp-c { font: 500 12.5px/1 var(--ft); letter-spacing: .1em; }
.numplate { grid-column: 1; grid-row: 2; justify-self: start; display: flex; align-items: baseline; gap: 10px; padding: 10px 20px 12px; background: var(--ink); color: var(--yel); box-shadow: var(--hard); transform: rotate(1deg); margin-left: 24px; }
.numplate b { font: 400 64px/1 var(--fd); font-weight: 400; }
.numplate span { font: 600 13px/1 var(--ft); letter-spacing: .2em; text-transform: uppercase; color: var(--white); }
.loja-t { grid-column: 2; grid-row: 1 / span 2; max-width: 680px; }
.loja-t h2 { font: 400 clamp(44px, 5vw, 72px)/.95 var(--fd); text-transform: uppercase; }
.loja-p { margin: 16px 0 0; font-size: 17px; line-height: 1.6; }
.loja-a { margin: 20px 0 0; font-style: normal; font-weight: 600; font-size: 16px; line-height: 1.5; }
.loja-c { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; font-size: 15.5px; }
.loja-c span { display: block; font: 600 11.5px/1.3 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.loja-c a, .loja-l a { text-decoration-color: var(--yel); text-decoration-thickness: 3px; text-underline-offset: 3px; font-weight: 600; }
.loja-s { margin: 22px 0 0; font-size: 12.5px; color: var(--ink-2); }
.loja-l { margin: 8px 0 0; font-size: 13.5px; }

/* ---------- the sheet behind a plaque ---------- */
.scrim { position: fixed; inset: 0; z-index: 8990; background: rgba(20, 20, 20, .46); }
.verso { position: fixed; top: 16px; left: 16px; bottom: 16px; z-index: 9000; width: min(580px, calc(100vw - 32px)); overflow: auto; overscroll-behavior: contain; background: var(--alu); color: var(--ink); border-radius: 6px; box-shadow: 14px 18px 0 rgba(20, 20, 20, .35); }
.verso.in { animation: turn .75s var(--ease) both; transform-origin: 0 50%; }
@keyframes turn { from { opacity: 0; transform: perspective(1600px) rotateY(70deg); } }
.vs-in { position: relative; padding: 46px 42px 40px; container-type: inline-size; }
.vs-in .rv { width: 14px; height: 14px; box-shadow: inset 3px 3px 0 #B9BCBF; }
.vs-in .rv.r1, .vs-in .rv.r3 { left: 14px; } .vs-in .rv.r2, .vs-in .rv.r4 { right: 14px; }
.vs-in .rv.r1, .vs-in .rv.r2 { top: 14px; } .vs-in .rv.r3, .vs-in .rv.r4 { bottom: 14px; }
.vs-x { position: absolute; top: 16px; right: 40px; width: 42px; height: 42px; border: 0; background: var(--ink); color: var(--yel); font: 400 30px/1 var(--ft); cursor: pointer; }
.verso .vs-k { margin: 0 56px 14px 0; font: 600 12px/1.35 var(--ft); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.vs-h { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.vs-ico { flex: none; width: 66px; height: 66px; padding: 9px; background: var(--yel); border: 3px solid var(--ink); }
.vs-h h3 { font: 400 clamp(28px, 7.4cqi, 40px)/1 var(--fd); text-transform: uppercase; }
.verso .vs-who { margin: 22px 0 0; font-size: 17px; line-height: 1.55; }
.verso h4 { margin: 26px 0 8px; padding-top: 10px; border-top: 2px solid var(--ink); font: 700 12px/1.2 var(--ft); letter-spacing: .14em; text-transform: uppercase; }
.vs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.vs-l { list-style: none; margin: 0; padding: 0; }
.vs-l li { padding: 7px 0; border-bottom: 1px solid #A9ACAE; font-size: 15px; line-height: 1.35; }
.vs-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 10px; }
.vs-steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 10px; font-size: 15px; line-height: 1.45; }
.vs-steps li::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; background: var(--ink); color: var(--yel); font: 400 17px/1 var(--fd); }
.verso p { font-size: 15.5px; line-height: 1.55; margin: 0; }
.vs-brands { font: 400 22px/1.2 var(--fd) !important; letter-spacing: .03em; text-transform: uppercase; }
.vs-small { margin-top: 10px !important; font-size: 14px !important; color: var(--ink-2); }
.vs-price { margin-top: 28px; padding: 18px 20px; background: var(--ink); color: var(--asph-ink); display: grid; gap: 6px; }
.vs-price span { font-size: 14px; }
.vs-price b { font: 400 46px/1 var(--fd); font-weight: 400; color: var(--yel); }
.vs-price em { font-style: normal; font: 600 11px/1.3 var(--ft); letter-spacing: .12em; text-transform: uppercase; color: var(--asph-2); }
.vs-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.vs-a { border: 3px solid var(--ink); background: var(--yel); color: var(--ink); padding: 12px 16px; font: 400 18px/1.05 var(--fd); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: transform .2s var(--ease2), box-shadow .2s var(--ease2); text-align: left; }
.vs-a:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.vs-a2 { background: var(--white); }
html.sheet-open { overflow: hidden; }

/* ---------- phone ---------- */
@media (max-width: 980px) {
  .wall { grid-template-columns: 1fr; min-height: 0; padding: 36px 32px 48px; }
  .plaques { max-width: 760px; width: 100%; justify-self: center; }
}
@media (max-width: 760px) {
  .strip { padding: 12px 16px; gap: 12px; }
  .strip-t { display: none; }
  .brand { margin-right: auto; }
  .brand img { height: 28px; }
  .strip-r { gap: 10px; }
  .strip-tel { font-size: 18px; }
  .wall { padding: 28px 16px 40px; gap: 28px; background-size: 160px 120px, 320px 120px, 320px 120px; }
  .wall h1 { font-size: clamp(44px, 13vw, 64px); }
  .wall-p { font-size: 16.5px; }
  .plaques { aspect-ratio: auto; display: flex; flex-direction: column; gap: 30px; padding-top: 4px; }
  .plq { position: relative; left: auto; top: auto; width: min(80%, 330px); align-self: flex-start; transform-origin: 50% 50%; }
  .plq:nth-of-type(even) { align-self: flex-end; }
  .plq[data-k="fechadura"] { width: min(92%, 380px); }
  .plq[data-k="interfone"], .plq[data-k="balcao"] { width: min(68%, 280px); }
  .nameplate { position: static; order: 9; align-self: center; transform: rotate(1.2deg); }
  .stencil { display: none; }
  .road { padding: 32px 16px 36px; }
  .road-list { flex-direction: column; gap: 0; }
  .road-list li { padding: 14px 0 16px; }
  .road-list li + li::before { left: 0; right: auto; top: 0; bottom: auto; width: 60%; height: 4px; background: repeating-linear-gradient(90deg, var(--yel) 0 18px, transparent 18px 32px); }
  .comp { padding: 52px 16px 64px; }
  .comp-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
  .comp-head p { font-size: 16px; }
  .board { grid-template-columns: 1fr; box-shadow: 6px 6px 0 var(--ink); }
  .prot { padding: 20px 16px 10px; }
  .row { grid-template-columns: 40px minmax(0, 1fr); gap: 8px 12px; }
  .row-i { width: 40px; height: 40px; }
  .segs { grid-column: 2; justify-self: start; }
  .name-f { border-left: 0; border-top: 3px solid var(--ink); padding: 20px 16px; }
  .name-in input { font-size: 28px; }
  .formats { margin-top: 48px; }
  .fmt-strip { --cm: 6.4px; gap: 30px; margin: 0 -16px; padding: 30px 16px 12px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; }
  .fmt-c { scroll-snap-align: start; }
  .ask { margin-top: 52px; }
  .ask-f { grid-template-columns: 1fr; grid-template-areas: "fields" "msg" "btns" "note" "sent"; }
  .ask-fields { grid-template-columns: 1fr; }
  .msg-wrap { padding: 18px 18px 20px; border-left-width: 8px; box-shadow: 6px 6px 0 rgba(20, 20, 20, .25); }
  .loja { grid-template-columns: 1fr; grid-template-rows: none; padding: 56px 16px 52px; gap: 22px; }
  .streetplate, .numplate, .loja-t { grid-column: 1; grid-row: auto; }
  .streetplate { justify-self: start; padding: 16px 24px 14px; }
  .sp-n { font-size: clamp(30px, 9vw, 44px); }
  .numplate { margin-left: 16px; }
  .verso { top: 0; left: 0; right: 0; bottom: 0; width: 100%; border-radius: 0; box-shadow: none; }
  .vs-in { padding: 40px 20px 32px; }
  .vs-x { right: 18px; top: 12px; }
  .vs-cols { grid-template-columns: 1fr; }
}

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

/* == 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: sistelco-sistemas-de-seguranca */
.ck { --ck-bottom: 12px; left: 20px; bottom: 20px; width: 344px; max-width: calc(100vw - 32px); padding: 26px 28px 22px; background: repeating-linear-gradient(-45deg, #141414 0 10px, #F6C700 10px 20px); color: #141414; border-radius: 6px; box-shadow: 8px 10px 0 rgba(20,20,20,.28); font-family: 'Work Sans', Arial, sans-serif; transform: rotate(-.8deg); }
.ck::before { content: ''; position: absolute; inset: 12px; background: #F6C700; z-index: -1; }
.ck::after { content: ''; position: absolute; left: 3px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: #DAD8D2; box-shadow: inset 0 0 0 1.5px #6E6B66, 324px 0 0 0 #DAD8D2; }
.ck .ck-k { display: inline-block; margin: 0 0 10px; padding: 5px 10px 6px; background: #141414; color: #F6C700; font: 400 15px/1 'Anton', Impact, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.ck .ck-t b { display: block; font: 400 28px/1 'Anton', Impact, sans-serif; letter-spacing: .01em; text-transform: uppercase; color: #141414; margin-bottom: 8px; }
.ck .ck-p { font-size: 13px; line-height: 1.45; color: #141414; }
.ck .b { gap: 8px 12px; margin-top: 12px; padding-top: 10px; border-top: 2px solid #141414; }
.ck button { border-radius: 0; padding: 8px 10px; min-height: 34px; font: 600 11.5px/1 'Work Sans', Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.ck button.ok { background: #141414; color: #F6C700; border: 2px solid #141414; }
.ck button.no { background: transparent; color: #141414; border: 2px solid #141414; }
.ck button.no:hover { background: #141414; color: #F6C700; }
.ck a.more { color: #141414; font: 600 11.5px/1 'Work Sans', Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ck button:focus-visible, .ck a.more:focus-visible { outline: 3px solid #1C4A97; outline-offset: 2px; }
@media (max-width: 600px) { .ck { transform: none; padding: 22px 22px 18px; } .ck::after { display: none; } }

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