/* Vorzena — grade comercial. A broadcast EPG: vehicles as rows, hours 06:00–24:00 as columns, the products as blocks where they air. */
:root {
  --ground: #161B22; --ground-2: #1B212A; --row-a: #1A2028; --row-b: #171D24; --lift: #212833;
  --rule: rgba(196, 210, 228, .11); --rule-2: rgba(196, 210, 228, .24); --rule-3: rgba(196, 210, 228, .42);
  --ink: #E8EDF3; --ink-2: #A9B4C2; --ink-3: #8994A3;
  --red: #FF3D4A; --red-deep: #D61F2B; --red-text: #FF6B74;
  --panel: #E4E9EF; --panel-2: #D5DCE4; --p-ink: #141920; --p-ink-2: #46505D;
  --c-camp: #F2B53B; --c-pat: #86D19B; --c-prod: #A6B5FF; --c-acv: #D9A6E3; --c-ev: #F39A74; --c-ag: #6CCCD6;
  --blk-ink: #10151B;
  --disp: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --text: 'Archivo', 'Segoe UI', Arial, sans-serif;
  --colw: 168px; --hw: 132px; --rowh: 92px; --rulerh: 54px; --gut: 32px;
  --ex: cubic-bezier(.16, 1, .3, 1); --qo: cubic-bezier(.25, 1, .5, 1); --io: cubic-bezier(.87, 0, .13, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.static { scroll-behavior: auto; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--text); font-size: 16px; line-height: 1.55; font-variation-settings: 'wdth' 100; overflow-x: hidden; }
::selection { background: var(--c-camp); color: var(--blk-ink); }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--c-camp); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 800; }
.f-camp { --c: var(--c-camp); } .f-pat { --c: var(--c-pat); } .f-prod { --c: var(--c-prod); }
.f-acv { --c: var(--c-acv); } .f-ev { --c: var(--c-ev); } .f-ag { --c: var(--c-ag); }

/* ---------- top bar: brand, day tabs, my grid, language ---------- */
.bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px; height: 56px; padding: 0 var(--gut); background: rgba(22, 27, 34, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule-2); }
.brand { display: flex; align-items: center; }
.brand img { height: 24px; width: auto; display: block; }
.bar-place { font: 600 12px/1 var(--text); font-variation-settings: 'wdth' 78; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding-left: 20px; border-left: 1px solid var(--rule-2); white-space: nowrap; }
.days { display: flex; gap: 2px; margin-left: auto; }
.day { position: relative; border: 0; background: none; cursor: pointer; padding: 18px 10px 16px; font: 700 17px/1 var(--disp); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); transition: color .3s var(--qo); }
.day:hover { color: var(--ink); }
.day[aria-selected="true"] { color: var(--ink); }
.day[aria-selected="true"]::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; background: var(--ink); }
.day.today::before { content: ''; position: absolute; top: 9px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.bar-r { display: flex; align-items: center; gap: 14px; margin-left: 12px; }
.mine-link { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 6px 0 12px; border: 1px solid var(--rule-3); border-radius: 4px; text-decoration: none; font: 700 15px/1 var(--disp); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: background .3s var(--qo), border-color .3s var(--qo); }
.mine-link:hover { background: var(--lift); border-color: var(--ink-2); }
.mine-link b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 3px; background: var(--lift); font: 800 15px/1 var(--disp); color: var(--ink); transition: background .3s var(--qo), color .3s var(--qo); }
.mine-link b.has { background: var(--ink); color: var(--ground); }
.mine-link b.bump { animation: bump .6s var(--ex); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 100% { transform: scale(1); } }
.lang { display: flex; border: 1px solid var(--rule-2); border-radius: 4px; overflow: hidden; }
.lang button { border: 0; background: none; cursor: pointer; padding: 0 10px; height: 32px; font: 700 14px/1 var(--disp); letter-spacing: .08em; color: var(--ink-3); }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }

/* ---------- head: guide title + on-air readout ---------- */
.head { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); border-bottom: 1px solid var(--rule-2); }
.head-l { padding: 24px 36px 22px var(--gut); display: grid; grid-template-columns: min-content minmax(240px, 1fr); grid-template-rows: auto auto; column-gap: 36px; row-gap: 12px; align-content: center; }
.head-l h1 { grid-row: 1 / span 2; align-self: end; }
.head-l .lede { grid-column: 2; align-self: end; } .head-l .example { grid-column: 2; align-self: start; }
h1 { font: 900 clamp(64px, 7.4vw, 112px)/.84 var(--disp); letter-spacing: -.012em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
.lede { margin: 0; max-width: 46ch; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.example { margin: 10px 0 0; font: 500 13px/1.45 var(--text); font-variation-settings: 'wdth' 88; color: var(--ink-2); padding-left: 12px; border-left: 2px solid var(--rule-3); max-width: 64ch; }
.onair { position: relative; padding: 22px var(--gut) 18px 32px; background: var(--ground-2); border-left: 1px solid var(--rule-2); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.oa-k { margin: 0; display: flex; align-items: center; gap: 10px; font: 650 12px/1 var(--text); font-variation-settings: 'wdth' 80; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.oa-k .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(255, 61, 74, .18); animation: pulse 2.4s var(--io) infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 61, 74, 0); } }
.oa-tz { color: var(--ink-2); letter-spacing: .1em; }
.oa-tz::before { content: '·'; margin-right: 10px; color: var(--ink-3); }
.oa-row { display: flex; align-items: center; gap: 28px; margin-top: 10px; min-width: 0; }
.oa-clock { flex: none; border: 0; background: none; padding: 0; cursor: pointer; font: 800 clamp(84px, 8.2vw, 124px)/.8 var(--disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); transition: color .3s var(--qo); }
.oa-clock:hover { color: var(--red-text); }
.oa-clock.off { color: var(--ink-3); }
.oa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; min-width: 0; flex: 1; }
.oa-list button { display: grid; grid-template-columns: 10px 64px minmax(0, 1fr); align-items: baseline; gap: 10px; width: 100%; border: 0; background: none; padding: 3px 6px 3px 0; text-align: left; cursor: pointer; border-radius: 3px; font-size: 13.5px; line-height: 1.3; color: var(--ink); transition: background .25s var(--qo); }
.oa-list button:hover { background: var(--lift); }
.oa-list i { width: 10px; height: 10px; border-radius: 2px; background: var(--c, transparent); box-shadow: inset 0 0 0 1px var(--rule-3); align-self: center; }
.oa-list .v { font: 700 14px/1.2 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.oa-list .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-list .t span { display: contents; color: var(--ink-2); }
.oa-list .idle { color: var(--ink-3); cursor: default; } .oa-list .idle:hover { background: none; }
.oa-hint { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }

/* ---------- the grid ---------- */
.guide { position: relative; border-bottom: 1px solid var(--rule-2); }
.g-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--rule-3) transparent; outline: none; }
.g-scroll::-webkit-scrollbar { height: 10px; } .g-scroll::-webkit-scrollbar-thumb { background: var(--rule-3); border-radius: 5px; border: 2px solid var(--ground); }
.g-inner { position: relative; width: calc(var(--colw) + var(--hw) * 18 + var(--extra, 0px)); }
.g-inner.roomy { --extra: min(500px, 40vw); }
.g-row { width: calc(var(--colw) + var(--hw) * 18); display: grid; grid-template-columns: var(--colw) minmax(0, 1fr); height: var(--rowh); border-bottom: 1px solid var(--rule); }
.g-row:nth-child(odd) .g-track { background-color: var(--row-a); } .g-row:nth-child(even) .g-track { background-color: var(--row-b); }
.g-ch { position: sticky; left: 0; z-index: 6; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 16px 0 var(--gut); background: var(--ground); border-right: 1px solid var(--rule-2); }
.g-ch .n { font: 600 13px/1 var(--disp); letter-spacing: .12em; color: var(--ink-3); }
.g-ch b { font: 800 30px/.9 var(--disp); letter-spacing: .02em; text-transform: uppercase; }
.g-ch small { font-size: 12px; line-height: 1.2; color: var(--ink-2); }
.g-track { position: relative; overflow: visible; background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px), linear-gradient(to right, rgba(196, 210, 228, .045) 1px, transparent 1px); background-size: var(--hw) 100%, calc(var(--hw) / 2) 100%; }

/* ruler: dayparts + hours */
.g-ruler { height: var(--rulerh); border-bottom: 1px solid var(--rule-2); }
.g-row.g-ruler .g-track { background: var(--ground); background-image: linear-gradient(to right, var(--rule-2) 1px, transparent 1px); background-size: var(--hw) 100%; background-position: 0 22px; background-repeat: repeat-x; }
.g-corner { flex-direction: row; align-items: center; gap: 6px; padding-right: 10px; }
.g-corner button { height: 30px; min-width: 30px; padding: 0 8px; border: 1px solid var(--rule-2); background: var(--ground-2); border-radius: 4px; cursor: pointer; font: 700 14px/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); transition: background .25s var(--qo), border-color .25s var(--qo); }
.g-corner button:hover { background: var(--lift); border-color: var(--ink-2); }
.g-corner .now-btn { color: var(--red-text); border-color: rgba(255, 61, 74, .45); }
.part { position: absolute; top: 0; height: 22px; left: calc(var(--hw) * var(--s)); width: calc(var(--hw) * var(--d)); padding: 5px 10px 0; font: 650 10.5px/1 var(--text); font-variation-settings: 'wdth' 76; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); border-left: 1px solid var(--rule-3); background: rgba(196, 210, 228, .035); }
.part.p2 { background: rgba(196, 210, 228, .06); }
.hr { position: absolute; top: 22px; bottom: 0; left: calc(var(--hw) * var(--h)); padding: 9px 0 0 8px; font: 700 18px/1 var(--disp); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.hr::after { content: ''; position: absolute; left: calc(var(--hw) / 2); bottom: 0; width: 1px; height: 8px; background: var(--rule-3); }
.hr.past { color: var(--ink-3); }

/* blocks */
.blk { position: absolute; top: 7px; bottom: 7px; left: calc(var(--hw) * var(--s) + 2px); width: calc(var(--hw) * var(--d) - 4px); display: block; border-radius: 6px; background: var(--c); color: var(--blk-ink); text-decoration: none; box-shadow: inset 0 -3px 0 rgba(16, 21, 27, .16); overflow: clip; cursor: pointer;
  transition: transform .35s var(--ex), box-shadow .35s var(--ex), opacity .45s var(--qo), filter .45s var(--qo); }
.blk:hover { transform: translateY(-2px); box-shadow: inset 0 -3px 0 rgba(16, 21, 27, .16), 0 0 0 2px var(--ink), 0 14px 24px -12px rgba(0, 0, 0, .7); z-index: 2; }
.blk.cur { box-shadow: inset 0 -3px 0 rgba(16, 21, 27, .16), 0 0 0 3px var(--ink); z-index: 2; }
.g-scroll.grabbing, .g-scroll.grabbing .blk { cursor: grabbing; user-select: none; }
.blk:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; z-index: 2; }
.blk-in { display: flex; flex-direction: column; gap: 3px; margin-left: var(--shift, 0px); max-width: calc(100% - var(--shift, 0px)); padding: 9px 12px 0; }
.blk .tm { font: 650 11px/1 var(--text); font-variation-settings: 'wdth' 78; letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; opacity: .78; }
.blk b { font: 800 19px/.98 var(--disp); letter-spacing: .01em; text-transform: uppercase; }
.blk .sl { font: 500 12px/1.2 var(--text); font-variation-settings: 'wdth' 86; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk.short b { font-size: 17px; }
.blk.tiny .blk-in { visibility: hidden; }
.blk.short .sl { display: none; }
.blk.ag { background-image: repeating-linear-gradient(to right, rgba(16, 21, 27, .13) 0 2px, transparent 2px calc(var(--hw) / 4)); background-position: 0 100%; background-size: 100% 12px; background-repeat: repeat-x; }
.blk.on::after { content: attr(data-on); position: absolute; right: 6px; bottom: 7px; padding: 3px 6px; border-radius: 3px; background: var(--blk-ink); color: var(--c); font: 700 11px/1 var(--disp); letter-spacing: .1em; text-transform: uppercase; }
.blk.on { background-image: repeating-linear-gradient(135deg, rgba(16, 21, 27, .14) 0 3px, transparent 3px 9px); }
.blk.ag.on { background-image: repeating-linear-gradient(135deg, rgba(16, 21, 27, .14) 0 3px, transparent 3px 9px); }
.fill { position: absolute; top: 7px; bottom: 7px; left: calc(var(--hw) * var(--s) + 2px); width: calc(var(--hw) * var(--d) - 4px); border-radius: 6px; border: 1px dashed var(--rule-2); background: repeating-linear-gradient(135deg, rgba(196, 210, 228, .03) 0 6px, transparent 6px 12px); padding: 10px 12px; font: 500 11.5px/1.2 var(--text); font-variation-settings: 'wdth' 80; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.guide.hl .blk { opacity: .2; filter: saturate(.4); }
.guide.hl .blk.lit { opacity: 1; filter: none; }

/* the "agora" line */
.now { position: absolute; top: 22px; bottom: 0; width: 2px; margin-left: -1px; background: var(--red); z-index: 4; pointer-events: none; box-shadow: 0 0 12px rgba(255, 61, 74, .55); transform-origin: top; }
.now-flag { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 3px; background: var(--red-deep); color: #fff; font: 800 14px/1 var(--disp); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; }
.now-flag span { font-weight: 600; opacity: .9; }
.past-shade { position: absolute; top: var(--rulerh); bottom: 0; left: var(--colw); background: linear-gradient(to right, rgba(10, 13, 18, .0), rgba(10, 13, 18, .22)); pointer-events: none; z-index: 3; }
.g-note { display: flex; align-items: center; gap: 16px; margin: 0; padding: 8px var(--gut); background: var(--ground-2); border-bottom: 1px solid var(--rule-2); font: 650 12px/1.3 var(--text); font-variation-settings: 'wdth' 80; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.g-note[hidden] { display: none; }
.g-note button { border: 1px solid rgba(255, 61, 74, .5); background: none; border-radius: 4px; padding: 5px 9px; cursor: pointer; font: 700 13px/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--red-text); }
.g-note button:hover { background: rgba(255, 61, 74, .1); }

/* choreography (live page only) */
html.intro .blk, html.intro .fill { animation: blk-in .8s var(--ex) both; animation-delay: calc(var(--i, 0) * 45ms + 200ms); }
@keyframes blk-in { from { opacity: 0; transform: translateX(-18px); } }
html.intro .now { animation: now-in .9s var(--io) both .5s; }
@keyframes now-in { from { transform: scaleY(0); } }
html.intro h1 { animation: rise .9s var(--ex) both; } html.intro .lede { animation: rise .9s var(--ex) both .12s; } html.intro .example { animation: rise .9s var(--ex) both .2s; }
html.intro .onair { animation: rise .9s var(--ex) both .1s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
.g-inner.swap .blk, .g-inner.swap .fill { animation: blk-in .6s var(--ex) both; animation-delay: calc(var(--i, 0) * 25ms); }

/* ---------- legend ---------- */
.legend { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 14px 0; padding: 22px var(--gut) 26px; border-bottom: 1px solid var(--rule-2); }
.lg-t { font: 800 22px/1 var(--disp); letter-spacing: .06em; text-transform: uppercase; padding-top: 8px; }
.lg-items { display: flex; flex-wrap: wrap; gap: 6px 4px; }
.lg { display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer; text-align: left; transition: background .25s var(--qo), border-color .25s var(--qo); }
.lg:hover { background: var(--ground-2); border-color: var(--rule-2); }
.lg[aria-pressed="true"] { background: var(--ground-2); border-color: var(--c); }
.lg i { flex: none; width: 26px; height: 26px; border-radius: 4px; background: var(--c); box-shadow: inset 0 -3px 0 rgba(16, 21, 27, .16); }
.lg span { display: flex; flex-direction: column; gap: 2px; }
.lg b { font: 600 14px/1.2 var(--text); }
.lg small { font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.lg-hint { grid-column: 2; margin: 0; font-size: 12.5px; color: var(--ink-2); }
.rule-line { grid-column: 2; margin: 8px 0 0; max-width: 92ch; padding: 12px 16px; border: 1px solid var(--rule-2); border-left: 3px solid var(--ink-2); border-radius: 0 4px 4px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); background: var(--row-b); }

/* ---------- my grid + request ---------- */
.pedido { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border-bottom: 1px solid var(--rule-2); scroll-margin-top: 56px; }
.mine { padding: 32px 40px 40px var(--gut); }
.row-h { display: flex; align-items: baseline; gap: 14px; }
.ch-n { font: 600 15px/1 var(--disp); letter-spacing: .12em; color: var(--ink-3); }
.row-h h2 { font: 900 clamp(40px, 4.4vw, 64px)/.88 var(--disp); letter-spacing: -.005em; text-transform: uppercase; }
.mine-sub { margin: 12px 0 22px; color: var(--ink-2); font-size: 14.5px; max-width: 56ch; }
.mg-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.mg { display: grid; grid-template-columns: 8px 92px minmax(0, 1fr) auto; align-items: center; gap: 0 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.mg > i { align-self: stretch; border-radius: 3px; background: var(--c); }
.mg .when { display: flex; flex-direction: column; gap: 4px; }
.mg .when b { font: 800 22px/.9 var(--disp); letter-spacing: .04em; text-transform: uppercase; }
.mg .when span { font: 600 13px/1 var(--disp); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.mg .what { min-width: 0; }
.mg .what button { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font: 600 15.5px/1.3 var(--text); color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-3); text-underline-offset: 4px; }
.mg .what button:hover { text-decoration-color: var(--c); }
.mg .what small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.mg .x { border: 1px solid var(--rule-2); background: none; border-radius: 4px; cursor: pointer; padding: 7px 10px; font: 700 13px/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); transition: color .25s var(--qo), border-color .25s var(--qo); }
.mg .x:hover { color: var(--ink); border-color: var(--ink-2); }
.mg.new { animation: mg-in .7s var(--ex) both; }
@keyframes mg-in { from { opacity: 0; transform: translateY(-10px); } }
.mg-empty { padding: 22px 0; color: var(--ink-2); font-size: 14.5px; border-bottom: 1px dashed var(--rule-2); }
.mg-empty b { color: var(--ink); font-weight: 600; }

.req { padding: 32px var(--gut) 36px 36px; background: var(--ground-2); border-left: 1px solid var(--rule-2); color: var(--ink); }
.req-t { font: 900 clamp(34px, 3.4vw, 48px)/.9 var(--disp); text-transform: uppercase; letter-spacing: -.005em; }
.req-sub { margin: 12px 0 18px; font-size: 14px; color: var(--ink-2); max-width: 54ch; }
.fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 18px; }
.fl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fl-w { grid-column: 1 / -1; }
.fl > span { font: 650 11.5px/1 var(--text); font-variation-settings: 'wdth' 80; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.fl input, .fl textarea { width: 100%; border: 0; border-bottom: 1.5px solid var(--rule-3); border-radius: 0; background: rgba(196, 210, 228, .05); padding: 9px 10px; font: 500 15px/1.35 var(--text); color: var(--ink); transition: border-color .25s var(--qo), background .25s var(--qo); }
.fl textarea { resize: vertical; min-height: 76px; }
.fl input::placeholder, .fl textarea::placeholder { color: var(--ink-3); }
.fl input:focus, .fl textarea:focus { outline: none; border-color: var(--c-camp); background: rgba(196, 210, 228, .09); }
.req-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 20px 0 12px; }
.go { border: 0; cursor: pointer; height: 46px; padding: 0 20px; border-radius: 4px; background: var(--ink); color: var(--ground); font: 800 18px/1 var(--disp); letter-spacing: .06em; text-transform: uppercase; transition: transform .3s var(--ex), background .3s var(--qo); }
.go:hover { transform: translateY(-2px); background: #fff; }
.call { font: 700 17px/1 var(--disp); letter-spacing: .05em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--rule-3); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.call:hover { text-decoration-color: var(--ink); }
.req .lead-note { color: var(--ink); }
.req-status { margin: 10px 0 0; min-height: 1em; font-size: 13.5px; color: var(--c-pat); }

/* ---------- company sheet ---------- */
.emp { padding: 30px var(--gut) 34px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px 32px; align-items: start; }
.emp .row-h h2 { font-size: clamp(30px, 3vw, 40px); }
.emp-d { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); border-left: 1px solid var(--rule-2); }
.emp-d > div { padding: 12px 16px 14px; border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); min-width: 0; }
.emp-d > div.w { grid-column: span 3; }
.emp-d dt { font: 650 11px/1 var(--text); font-variation-settings: 'wdth' 80; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.emp-d dd { margin: 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.emp-d .mute { color: var(--ink-2); font-size: 12.5px; }
.emp-docs { grid-column: 2; margin: 0; font-size: 13px; color: var(--ink-2); }
.emp-docs a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- the ficha (opens over the grid) ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(9, 12, 16, .4); opacity: 0; transition: opacity .45s var(--qo); }
.scrim.show { opacity: 1; }
.ficha { position: fixed; top: 56px; right: 0; bottom: 0; z-index: 41; width: min(500px, 100vw); background: var(--panel); color: var(--p-ink); overflow-y: auto; overscroll-behavior: contain; box-shadow: -30px 0 60px -20px rgba(0, 0, 0, .6); transform: translateX(104%); transition: transform .6s var(--ex); }
.ficha.show { transform: none; }
.fi-band { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 12px 24px; background: var(--c); color: var(--blk-ink); }
.fi-slot { font: 800 17px/1.1 var(--disp); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.fi-x { border: 1.5px solid var(--blk-ink); background: none; border-radius: 4px; padding: 7px 10px; cursor: pointer; font: 700 14px/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--blk-ink); flex: none; }
.fi-x:hover { background: var(--blk-ink); color: var(--c); }
.fi-body { padding: 22px 24px 28px; }
.fi-fam { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font: 650 11.5px/1.2 var(--text); font-variation-settings: 'wdth' 80; letter-spacing: .14em; text-transform: uppercase; color: var(--p-ink-2); }
.fi-fam i { width: 12px; height: 12px; border-radius: 2px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(20, 25, 32, .3); }
.fi-body h2 { margin: 10px 0 0; font: 900 clamp(40px, 4vw, 56px)/.88 var(--disp); text-transform: uppercase; letter-spacing: -.005em; color: var(--p-ink); text-wrap: balance; }
.fi-price { margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 14px 0; border-top: 2px solid var(--p-ink); border-bottom: 1px solid rgba(20, 25, 32, .2); }
.fi-price b { font: 800 34px/1 var(--disp); letter-spacing: .01em; }
.fi-price span { font-size: 14px; color: var(--p-ink); }
.fi-price em { width: 100%; font-style: normal; font: 650 11.5px/1.2 var(--text); font-variation-settings: 'wdth' 80; letter-spacing: .14em; text-transform: uppercase; color: #8A2A12; }
.fi-dl { margin: 6px 0 0; }
.fi-dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(20, 25, 32, .14); }
.fi-dl dt { font: 650 11.5px/1.35 var(--text); font-variation-settings: 'wdth' 80; letter-spacing: .12em; text-transform: uppercase; color: var(--p-ink-2); padding-top: 2px; }
.fi-dl dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--p-ink); }
.fi-other { margin: 18px 0 0; }
.fi-other p { margin: 0 0 8px; font: 650 11.5px/1.2 var(--text); font-variation-settings: 'wdth' 80; letter-spacing: .14em; text-transform: uppercase; color: var(--p-ink-2); }
.fi-other div { display: flex; flex-wrap: wrap; gap: 6px; }
.fi-other button { border: 1px solid rgba(20, 25, 32, .3); background: var(--panel-2); border-radius: 4px; padding: 7px 10px; cursor: pointer; font: 700 14px/1 var(--disp); letter-spacing: .05em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--p-ink); transition: border-color .25s var(--qo), background .25s var(--qo); }
.fi-other button:hover { border-color: var(--p-ink); background: #fff; }
.fi-other button.cur { background: var(--p-ink); color: var(--panel); border-color: var(--p-ink); }
.fi-act { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 22px -24px -28px; padding: 14px 24px 18px; background: var(--panel); border-top: 1px solid rgba(20, 25, 32, .18); box-shadow: 0 -14px 20px -14px rgba(20, 25, 32, .25); }
.fi-res { border: 0; cursor: pointer; height: 48px; padding: 0 22px; border-radius: 4px; background: var(--p-ink); color: var(--panel); font: 800 18px/1 var(--disp); letter-spacing: .06em; text-transform: uppercase; transition: transform .3s var(--ex); }
.fi-res:hover { transform: translateY(-2px); }
.fi-res.on { background: none; color: var(--p-ink); box-shadow: inset 0 0 0 2px var(--p-ink); }
.fi-go { font: 700 16px/1 var(--disp); letter-spacing: .05em; text-transform: uppercase; color: var(--p-ink); text-underline-offset: 5px; }
.ficha :focus-visible { outline-color: var(--p-ink); }
.ghost { position: fixed; z-index: 60; border-radius: 6px; background: var(--c); pointer-events: none; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .7); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .bar-place { display: none; }
  .head { grid-template-columns: 1fr; }
  .onair { border-left: 0; border-top: 1px solid var(--rule-2); padding-left: var(--gut); }
  .pedido { grid-template-columns: 1fr; }
  .req { border-left: 0; border-top: 1px solid var(--rule-2); padding-left: var(--gut); }
  .emp { grid-template-columns: 1fr; } .emp-docs { grid-column: 1; }
}
@media (max-width: 760px) {
  :root { --colw: 86px; --hw: 104px; --rowh: 88px; --gut: 16px; }
  .bar { flex-wrap: wrap; height: auto; padding: 0 var(--gut); gap: 0 12px; }
  .brand { height: 50px; } .brand img { height: 20px; }
  .bar-r { margin-left: auto; gap: 8px; }
  .mine-link { height: 32px; padding: 0 4px 0 10px; font-size: 14px; gap: 8px; }
  .days { order: 3; width: 100%; margin: 0 calc(var(--gut) * -1); padding: 0 6px; justify-content: space-between; border-top: 1px solid var(--rule); }
  .day { padding: 12px 6px 11px; font-size: 15px; }
  .ficha { top: auto; height: 86dvh; width: 100%; border-radius: 12px 12px 0 0; transform: translateY(104%); }
  .ficha.show { transform: none; }
  .fi-band { border-radius: 12px 12px 0 0; }
  .head-l { padding: 22px var(--gut) 18px; grid-template-columns: 1fr; row-gap: 14px; }
  .head-l h1, .head-l .lede, .head-l .example { grid-column: 1; grid-row: auto; }
  h1 { font-size: 54px; }
  .lede { font-size: 15px; }
  .onair { padding: 16px var(--gut); }
  .onair { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
  .oa-row { margin: 0; }
  .oa-clock { font-size: 60px; }
  .oa-list, .oa-hint { display: none; }
  .oa-list button { grid-template-columns: 10px 56px minmax(0, 1fr); }
  .g-ch { padding: 0 8px 0 12px; }
  .g-ch b { font-size: 21px; }
  .g-ch small { display: none; }
  .g-corner { padding: 0 6px; gap: 4px; }
  .g-corner .now-btn { display: none; }
  .g-corner button { min-width: 28px; padding: 0 6px; }
  .blk b { font-size: 16px; } .blk.short b { font-size: 15px; }
  .legend { grid-template-columns: 1fr; padding: 20px var(--gut) 24px; }
  .lg-t { padding-top: 0; }
  .lg-items { display: grid; grid-template-columns: 1fr; gap: 2px; }
  .lg-hint, .rule-line { grid-column: 1; }
  .mine { padding: 28px var(--gut) 30px; }
  .mg { grid-template-columns: 6px 70px minmax(0, 1fr); gap: 0 12px; }
  .mg .x { grid-column: 3; justify-self: start; margin-top: 8px; }
  .req { padding: 28px var(--gut) 30px; }
  .fields { grid-template-columns: 1fr; }
  .emp { padding: 26px var(--gut) 30px; }
  .emp-d { grid-template-columns: 1fr; } .emp-d > div.w { grid-column: auto; }
  .fi-dl > div { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }
html.static *, html.static *::before, html.static *::after { transition: none !important; animation: none !important; }

/* ---------- legal pages shell ---------- */
.legal-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 var(--gut); background: var(--ground); border-bottom: 1px solid var(--rule-2); }
.legal-top img { height: 24px; width: auto; display: block; }
.legal-top .back { font: 700 16px/1 var(--disp); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.legal-top .back::before { content: ''; width: 2px; height: 22px; background: var(--red); box-shadow: 0 0 10px rgba(255, 61, 74, .6); }
.legal-sheet { max-width: 900px; margin: 0 auto; padding: 32px var(--gut) 64px; font-size: 15.5px; line-height: 1.65; }
.legal-sheet h1 { font-size: clamp(42px, 6vw, 72px); margin: 22px 0 18px; }
.legal-sheet h2 { font: 800 24px/1.15 var(--disp); letter-spacing: .03em; text-transform: uppercase; margin: 36px 0 10px; padding-top: 14px; border-top: 1px solid var(--rule-2); }
.legal-sheet p, .legal-sheet li { color: var(--ink); }
.legal-sheet em { color: var(--ink-2); }
.legal-sheet a { color: var(--ink); text-decoration-color: var(--c-camp); text-underline-offset: 3px; }
.legal-sheet code { font-size: .9em; background: var(--ground-2); padding: 1px 5px; border-radius: 3px; }
.legal-sheet table td, .legal-sheet table th { border-bottom-color: var(--rule-2) !important; }

/* == 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: vorzena */
.ck { left: 16px; bottom: 16px; width: 780px; max-width: calc(100vw - 32px); display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "ch k b" "ch t b" "ch p b"; column-gap: 0; padding: 0; background: #CDD6E0; color: #10151B; font-family: 'Archivo', 'Segoe UI', Arial, sans-serif; font-size: 13.5px; line-height: 1.45;
  border-radius: 6px; overflow: hidden; box-shadow: inset 0 -3px 0 rgba(16, 21, 27, .16), 0 0 0 4px #161B22, 0 0 0 5px rgba(196, 210, 228, .3), 0 26px 46px -18px rgba(0, 0, 0, .8); animation: vz-ck .7s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes vz-ck { from { opacity: 0; transform: translateX(-24px); } }
.ck::before { content: '00\A SITE'; white-space: pre; grid-area: ch; display: flex; align-items: center; padding: 0 0 0 16px; background: #161B22; color: #E8EDF3; border-right: 1px solid rgba(196, 210, 228, .24); font: 800 21px/1.05 'Big Shoulders Display', 'Arial Narrow', sans-serif; letter-spacing: .04em; }
.ck .ck-k { grid-area: k; padding: 12px 14px 0 16px; font: 650 11px/1 'Archivo', sans-serif; font-variation-settings: 'wdth' 78; letter-spacing: .1em; text-transform: uppercase; color: #2C3540; font-variant-numeric: tabular-nums; }
.ck .ck-t { grid-area: t; padding: 4px 14px 0 16px; }
.ck .ck-t b { font: 800 21px/1 'Big Shoulders Display', 'Arial Narrow', sans-serif; letter-spacing: .01em; text-transform: uppercase; }
.ck .ck-p { grid-area: p; padding: 5px 14px 12px 16px; color: #1C242E; }
.ck .b { grid-area: b; margin: 0; padding: 12px 14px 12px 4px; flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; }
.ck button { border-radius: 4px; padding: 9px 14px; font: 800 15px/1 'Big Shoulders Display', 'Arial Narrow', sans-serif; letter-spacing: .07em; text-transform: uppercase; border: 1.5px solid #10151B; transition: transform .25s cubic-bezier(.16, 1, .3, 1), background .25s cubic-bezier(.25, 1, .5, 1); }
.ck .ok { background: #10151B; color: #E8EDF3; }
.ck .no { background: transparent; color: #10151B; }
.ck button:hover { transform: translateY(-1px); } .ck .no:hover { background: rgba(16, 21, 27, .08); }
.ck a.more { text-align: center; font: 600 12.5px/1.2 'Archivo', sans-serif; color: #10151B; text-decoration: underline; text-underline-offset: 3px; padding-top: 2px; }
.ck button:focus-visible, .ck a.more:focus-visible { outline: 2.5px solid #10151B; outline-offset: 2px; }
@media (max-width: 600px) { .ck.ck { left: 0; right: 0; bottom: 0; width: auto; max-width: none; grid-template-columns: 58px minmax(0, 1fr); grid-template-areas: "ch k" "ch t" "ch p" "ch b"; border-radius: 10px 10px 0 0; box-shadow: 0 0 0 1px rgba(196, 210, 228, .3), 0 -20px 40px -10px rgba(0, 0, 0, .7); }
  .ck::before { font-size: 17px; padding-left: 12px; } .ck .b { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0 14px 14px 16px; } }
/* seller block: the guide's last row, on the control-room ground */
footer.seller { background: #10141A; color: #D3DAE3; border-top: 1px solid rgba(196, 210, 228, .24); font-family: 'Archivo', 'Segoe UI', Arial, sans-serif; padding-bottom: 40px; }
footer.seller b { color: #A9B4C2; opacity: 1; font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-size: 13px; letter-spacing: .14em; }
footer.seller strong { color: #E8EDF3; }
footer.seller a { color: #E8EDF3; 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; } }