/* === _comun/vx.css === */
/* Vizuale explicative (propunere 19.10.2026, neintegrată). Folosește doar tokenii existenți din viz.css / r1d.css:
   --text --muted --dim --line --line-2 --link --accent --bad --warn --ok --tint --f-head --f-body --w-head --r-el.
   Fără grilă de fundal, fără halouri, fără pastile plutitoare, fără ferestre false.
   Animația: o singură dată, la intrarea în ecran (vx.js adaugă .vx-go), numai transform și opacity.
   Fără JS, cu prefers-reduced-motion sau cu html[data-nivel="2"] se vede direct starea finală. */

.vx { position: relative; margin: 0; padding: 22px 24px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-el, 6px); color: var(--text);
  --text: #1d2327; --muted: #3f5260; --dim: #586b78; --line: #dbe4e8; --line-2: #c4d1d7; --link: #00727c; }
* + .vx { margin-top: 28px; }                       /* sub titlu sau sub lista din coloană */
.r6-cont-t:has(.vx) { position: static; }           /* coloana cu titlu e lipicioasă (r6.css); cu figura sub titlu ar depăși ecranul pe laptop */
.vx-t { font: var(--w-head, 800) 16px/1.3 var(--f-head); color: var(--text); margin: 0 0 14px; padding-right: 130px; }
.vx-graf { position: relative; }
.vx-ex { position: absolute; right: 24px; top: 20px; font-size: 12px; font-weight: 700; color: #6b3e00; background: #fff0d6; padding: 2px 8px; border-radius: 3px; }
.vx-src { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.vx-sub { font: 700 14px/1.3 var(--f-body); color: var(--text); margin: 0 0 8px; }
.vx-sub small { font-weight: 400; color: var(--muted); }
.vx svg { display: block; overflow: visible; }
.vx svg * { vector-effect: non-scaling-stroke; }
.vx b.vx-nr, .vx .vx-nr { color: #fff; }
.vx-nr { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--text); color: #fff; font: 700 12px/1 var(--f-body); flex: none; }
.vx-note { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.vx-note li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--muted); }
.vx-note li > span b { color: var(--text); }
.vx-leg { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.vx-leg i { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--link); vertical-align: middle; margin-right: 6px; }
.vx-leg i.lab { border-top: 2px dashed var(--text); }
.vx-leg i.ant { border-top: 2px dotted var(--dim); }
.vx-leg i.upd { width: 0; height: 12px; border-top: 0; border-left: 2px dashed var(--text); margin: 0 8px 0 4px; }

/* ---------- 1. Site lent: de la reparație la raportul verde ---------- */
.vx-lent .vx-c { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: 200px auto auto; }
.vx-lent .vx-y { position: relative; font-size: 12px; color: var(--muted); }
.vx-lent .vx-y span { position: absolute; right: 8px; transform: translateY(-50%); white-space: nowrap; }
.vx-lent .vx-p { position: relative; border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.vx-lent .vx-p svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vx-lent .vx-x { grid-column: 2; position: relative; height: 22px; font-size: 12px; color: var(--muted); }
.vx-lent .vx-x span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.vx-lent .vx-x span:first-child { transform: none; }
.vx-lent .vx-x span.r { transform: translateX(-100%); }
.vx-lent .vx-rep { position: absolute; top: 0; bottom: 0; border-left: 1.5px solid var(--text); }
.vx-lent .vx-rep b { position: absolute; top: -2px; left: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; background: #fff; padding: 0 4px 0 0; }
.vx-lent .vx-prag { position: absolute; right: 2px; font-size: 11.5px; font-weight: 700; transform: translateY(-120%); background: #fff; padding: 0 2px; }
.vx-lent .vx-prag.ok { color: var(--ok); }
.vx-lent .vx-prag.bad { color: var(--bad); }
.vx-lent .vx-mk { position: absolute; transform: translate(-50%, -50%); }
.vx-lent .vx-band-t { grid-column: 2; font-size: 13px; font-weight: 700; color: var(--text); margin: 10px 0 6px; }
.vx-lent .vx-band { grid-column: 2; display: grid; min-height: 34px; }
.vx-lent .vx-band span { display: grid; place-items: center; text-align: center; padding: 4px 4px; font: 700 12px/1.2 var(--f-body); color: #fff; border-right: 2px solid #fff; }
.vx-lent .vx-band .s1 { background: var(--bad); }
.vx-lent .vx-band .s2 { background: var(--warn); }
.vx-lent .vx-band .s3 { background: var(--ok); border-right: 0; }

/* ---------- 2. Google Maps: ce se mișcă repede și ce se mișcă încet ---------- */
.vx-harta .vx-pasi { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1px solid var(--line); }
.vx-harta .vx-pasi li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.vx-harta .vx-pasi svg { width: 20px; height: 20px; color: var(--ok); }
.vx-harta .vx-pasi em { font-style: normal; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.vx-harta .vx-luni { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.vx-harta .vx-luni span:nth-child(2) { text-align: center; } .vx-harta .vx-luni span:nth-child(3) { text-align: right; font-weight: 700; color: var(--text); }
.vx-harta .vx-bara { height: 4px; background: var(--line); border-radius: 2px; margin-bottom: 12px; overflow: hidden; }
.vx-harta .vx-bara i { display: block; height: 100%; background: var(--link); transform-origin: 0 50%; }
.vx-harta .vx-pack { --h: 44px; position: relative; height: calc(6 * var(--h)); list-style: none; margin: 0; padding: 0 0 0 28px; }
.vx-harta .vx-poz { position: absolute; left: 0; top: 0; display: grid; grid-auto-rows: var(--h); width: 20px; font: 700 13px/var(--h) var(--f-body); color: var(--dim); text-align: center; }
.vx-harta .vx-rand { position: absolute; left: 28px; right: 0; top: 0; height: calc(var(--h) - 6px); display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font-size: 14px; transform: translateY(calc(var(--p) * var(--h))); }
.vx-harta .vx-rand small { font-size: 12.5px; color: var(--muted); white-space: nowrap; display: inline-grid; justify-items: end; }
.vx-harta .vx-rand small > span { grid-area: 1 / 1; }
.vx-harta .vx-rand.tu { border: 2px solid var(--link); font-weight: 700; z-index: 2; }
.vx-harta .vx-rand.tu b { color: var(--link); }
.vx-harta .vx-top3 { position: absolute; left: 28px; right: 0; top: calc(3 * var(--h) - 4px); border-top: 2px dashed var(--text); }
.vx-harta .vx-top3-l { margin: 8px 0 0 28px; font-size: 12.5px; color: var(--muted); }
.vx-harta .vx-top3-l i { display: inline-block; width: 22px; border-top: 2px dashed var(--text); vertical-align: middle; margin-right: 6px; }
.vx-harta .r1s, .vx-harta .r2s { opacity: 0; }   /* starea finală: 41 de recenzii */

/* ---------- 3. Traficul a scăzut: cum revine, după cauză ---------- */
.vx-rec .vx-l { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.vx-rec .vx-l-t { font-size: 14px; font-weight: 700; line-height: 1.3; }
.vx-rec .vx-l-t small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.vx-rec .vx-l-p { position: relative; height: 58px; }
.vx-rec .vx-l-p svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vx-rec .vx-ax { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; border-top: 1px solid var(--line-2); }
.vx-rec .vx-ax div { position: relative; height: 22px; font-size: 12px; color: var(--muted); }
.vx-rec .vx-ax span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.vx-rec .vx-ax span:first-child { transform: none; }
.vx-rec .vx-ax span.r { transform: translateX(-100%); }
.vx-rec .vx-upd { position: absolute; bottom: -1px; background: #fff; line-height: 1.2; font-size: 11.5px; font-weight: 700; white-space: nowrap; transform: translateX(-100%); padding-right: 6px; }

/* ---------- 4. Optimizare pentru AI: cum ajunge site-ul într-un răspuns ---------- */
.vx-ai .vx-pas { list-style: none; margin: 0; padding: 0; }
.vx-ai .vx-pas > li { display: grid; grid-template-columns: 20px minmax(0, 1fr) 200px; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.vx-ai .vx-pas-t b { display: block; font-size: 15px; line-height: 1.3; }
.vx-ai .vx-pas-t span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: 3px; }
.vx-ai .vx-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vx-ai .vx-pg { position: relative; height: 74px; border: 1px solid var(--line-2); border-radius: 3px; padding: 14px 8px 6px; overflow: hidden; background: #fff; }
.vx-ai .vx-pg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--line); }
.vx-ai .vx-pg i { display: block; height: 5px; border-radius: 1px; background: var(--dim); opacity: .45; margin-bottom: 6px; }
.vx-ai .vx-pg i:nth-child(2) { width: 82%; } .vx-ai .vx-pg i:nth-child(3) { width: 92%; } .vx-ai .vx-pg i:nth-child(4) { width: 64%; }
.vx-ai .vx-pg em { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 700 11.5px/1.2 var(--f-body); font-style: normal; color: var(--bad); }
.vx-ai .vx-pg.ok em { color: var(--ok); }
.vx-ai .vx-pg-c { display: block; text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.25; }
.vx-ai .vx-scan { position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--link); opacity: 0; }
.vx-ai .vx-pg2 { height: 92px; }
.vx-ai .vx-pg2 .ras { position: relative; margin: 2px -4px 6px; padding: 4px; }
.vx-ai .vx-pg2 .ras i { opacity: .7; background: var(--text); }
.vx-ai .vx-pg2 .ras::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--link); border-radius: 3px; }
.vx-ai .vx-surse { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.vx-ai .vx-surse li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.vx-ai .vx-surse svg { width: 16px; height: 16px; color: var(--ok); flex: none; }
.vx-ai .vx-rasp { margin-top: 6px; padding: 14px 16px; border: 1px solid var(--line-2); border-left: 3px solid var(--text); border-radius: 3px; background: #fff; }
.vx-ai .vx-rasp-t { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.vx-ai .vx-rasp i { display: block; height: 6px; border-radius: 1px; background: var(--dim); opacity: .4; margin-bottom: 7px; }
.vx-ai .vx-rasp i:nth-child(3) { width: 88%; } .vx-ai .vx-rasp i:nth-child(4) { width: 70%; }
.vx-ai .vx-rasp p { margin: 10px 0 0; font-size: 13.5px; color: var(--text); }
.vx-ai .vx-rasp p b { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- mobil ---------- */
@media (max-width: 640px) {
  .vx { padding: 18px 16px 14px; }
  .vx-t { padding-right: 0; }
  .vx-ex { position: static; display: inline-block; margin-bottom: 10px; }
  .vx-rec .vx-m0 { display: none; }
  .vx-lent .vx-c { grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 180px auto auto; }
  .vx-lent .vx-band span { font-size: 11.5px; }
  .vx-rec .vx-l, .vx-rec .vx-ax { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .vx-rec .vx-ax > div:first-child { display: none; }
  .vx-ai .vx-pas > li { grid-template-columns: 20px minmax(0, 1fr); }
  .vx-ai .vx-pas > li > .vx-ilu { grid-column: 2; }
  .vx-harta .vx-pasi li { grid-template-columns: 22px minmax(0, 1fr); }
  .vx-harta .vx-pasi em { grid-column: 2; white-space: normal; }
}

/* ---------- animația: o dată, la intrarea în ecran ---------- */
.vx-clip { transform-box: fill-box; transform-origin: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  html.js-anim:not([data-nivel="2"]) .vx:not(.vx-go) .vx-a { opacity: 0; transform: translateY(6px); }
  html.js-anim:not([data-nivel="2"]) .vx:not(.vx-go) .vx-f { opacity: 0; }
  /* eticheta „actualizarea următoare” e trasă la stânga cu translateX(-100%); starea ascunsă o păstrează, altfel iese din placă (integrare 19.10) */
  html.js-anim:not([data-nivel="2"]) .vx-rec:not(.vx-go) .vx-upd.vx-a { transform: translate(-100%, 6px); }
  html.js-anim:not([data-nivel="2"]) .vx:not(.vx-go) .vx-clip,
  html.js-anim:not([data-nivel="2"]) .vx:not(.vx-go) .vx-bara i { transform: scaleX(0); }
  html.js-anim:not([data-nivel="2"]) .vx.vx-go .vx-a { transition: opacity .45s ease var(--d, 0s), transform .45s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
  html.js-anim:not([data-nivel="2"]) .vx.vx-go .vx-f { transition: opacity .35s ease var(--d, 0s); }
  html.js-anim:not([data-nivel="2"]) .vx.vx-go .vx-clip,
  html.js-anim:not([data-nivel="2"]) .vx.vx-go .vx-bara i { transition: transform var(--t, 1s) linear var(--d, 0s); }

  /* Maps: „Firma ta” urcă de pe locul 6 pe 5 (luna 3), apoi pe 3 (luna 6); ceilalți coboară când îi depășește */
  html.js-anim:not([data-nivel="2"]) .vx-harta:not(.vx-go) .vx-rand { transform: translateY(calc(var(--p0) * var(--h))); }
  html.js-anim:not([data-nivel="2"]) .vx-harta.vx-go .vx-rand { animation: var(--an) 3.4s cubic-bezier(.3, .7, .2, 1) .5s both; }
  html.js-anim:not([data-nivel="2"]) .vx-harta:not(.vx-go) .r1s { opacity: 1; }
  html.js-anim:not([data-nivel="2"]) .vx-harta:not(.vx-go) .r3s { opacity: 0; }
  html.js-anim:not([data-nivel="2"]) .vx-harta.vx-go .r1s { animation: vx-r1 3.4s linear .5s both; }
  html.js-anim:not([data-nivel="2"]) .vx-harta.vx-go .r2s { animation: vx-r2 3.4s linear .5s both; }
  html.js-anim:not([data-nivel="2"]) .vx-harta.vx-go .r3s { animation: vx-r3 3.4s linear .5s both; }

  /* AI: bara de citire trece o dată peste cele două pagini */
  html.js-anim:not([data-nivel="2"]) .vx-ai.vx-go .vx-scan { animation: vx-scan 1.1s ease-in-out .5s both; }
}
@keyframes vx-tu { 0%, 30% { transform: translateY(calc(5 * var(--h))); } 40%, 66% { transform: translateY(calc(4 * var(--h))); } 78%, 100% { transform: translateY(calc(2 * var(--h))); } }
@keyframes vx-e { 0%, 30% { transform: translateY(calc(4 * var(--h))); } 40%, 100% { transform: translateY(calc(5 * var(--h))); } }
@keyframes vx-c { 0%, 66% { transform: translateY(calc(2 * var(--h))); } 78%, 100% { transform: translateY(calc(3 * var(--h))); } }
@keyframes vx-d { 0%, 66% { transform: translateY(calc(3 * var(--h))); } 78%, 100% { transform: translateY(calc(4 * var(--h))); } }
@keyframes vx-fix { from, to { transform: translateY(calc(var(--p) * var(--h))); } }
@keyframes vx-r1 { 0%, 33% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes vx-r2 { 0%, 33% { opacity: 0; } 36%, 69% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes vx-r3 { 0%, 69% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes vx-scan { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(58px); } }

/* ================= partea a doua (11 vizuale, 19.10.2026) ================= */
.vx .vx-leg i.sq { width: 12px; height: 10px; border: 0; border-radius: 1px; margin-right: 6px; }
.vx-leg i.sq.y, .vx-leg i.sq.noi, .vx-leg i.sq.int { background: var(--link); }
.vx-leg i.sq.n { background: var(--warn); }
.vx-leg i.sq.google { background: #fff; border: 2px solid var(--text); }
.vx-leg i.sq.ext { background: #fff; border: 2px dashed var(--link); }
.vx-leg i.sq.sel { background: var(--text); }
.vx-leg i.sq.b { background: var(--text); }
.vx-leg i.sq.o { background: #fff; border: 1px solid var(--line-2); }
.vx-sag { width: 22px; height: 22px; color: var(--dim); display: block; }
.vx-clip-h { transform-origin: 0 50%; }

/* nu-apar-in-google: bare săptămânale + scara de poziții */
.vx-bare { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; align-items: end; }
.vx-bare li { display: grid; justify-items: center; gap: 4px; transform-origin: 50% 100%; }
.vx-bare .v { font: 700 13px/1 var(--f-body); color: var(--warn); }
.vx-bare .b { display: flex; flex-direction: column; width: 100%; height: 150px; border-radius: 2px; overflow: hidden; }
.vx-bare .b i { display: block; }
.vx-bare .b .n { background: var(--warn); } .vx-bare .b .y { background: var(--link); }
.vx-bare .s { font-size: 12px; color: var(--muted); white-space: nowrap; }
.vx-serp { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.vx-serp-r { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 30px; }
.vx-serp-r > span { font-size: 12px; color: var(--muted); padding: 6px 4px; border-left: 1px solid var(--line-2); border-bottom: 3px solid var(--line); }
.vx-serp-r > span:first-child { border-bottom-color: var(--ok); color: var(--text); font-weight: 700; }
.vx-serp-m { position: absolute; right: 0; top: 100%; margin-top: 6px; font: 700 12.5px/1.2 var(--f-body); color: var(--text); white-space: nowrap; }
.vx-serp-m i { position: absolute; right: 8%; top: -12px; width: 2px; height: 10px; background: var(--text); }
.vx-serp-n { font-size: 13.5px; color: var(--muted); }

/* site-virusat: benzi de timp */
.vx-g-z { display: grid; grid-template-columns: 200px minmax(0, 1fr); font-size: 12px; color: var(--muted); }
.vx-g-z { display: flex; padding-left: 214px; }
.vx-g-z span { padding: 0 0 6px 6px; border-left: 1px solid var(--line-2); }
.vx-g-z span:first-child { display: none; }
.vx-gantt { list-style: none; margin: 0; padding: 0; }
.vx-gantt li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.vx-g-t { font-size: 14px; font-weight: 700; line-height: 1.3; }
.vx-g-t small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.vx-g-p { position: relative; height: 18px; }
.vx-g-b, .vx-g-e { position: absolute; top: 0; height: 18px; border-radius: 2px; }
.vx-g-b.noi { background: var(--link); }
.vx-g-b.google { background: #fff; border: 2px solid var(--text); }
.vx-g-e { border: 2px dashed var(--link); border-left: 0; border-radius: 0 2px 2px 0; }

/* optimizare-ai pe-site: întrebarea și pagina */
.vx-q { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 4px; font: 700 15px/1.35 var(--f-body); }
.vx-q small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.vx-sag-w { display: block; padding: 6px 0 6px 14px; }
.vx-pag { border: 1px solid var(--line-2); border-radius: 4px; padding: 14px; border-top-width: 8px; border-top-color: var(--line); }
.vx-pag-h { font: var(--w-head, 800) 16px/1.25 var(--f-head); margin-bottom: 8px; }
.vx-pag-r { font-size: 14px; line-height: 1.45; padding: 6px 8px; border: 2px solid var(--link); border-radius: 3px; }
.vx-pag-c { font-size: 12.5px; color: var(--link); font-weight: 700; margin: 4px 0 10px; }
.vx-pag-s { font-size: 13px; color: var(--muted); padding: 6px 0; border-top: 1px solid var(--line); }
.vx-pag-s b { color: var(--text); margin-right: 6px; }

/* optimizare-seo conținut: căutări pe pagini */
.vx-grps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vx-grp { border: 1px solid var(--line-2); border-radius: 4px; padding: 10px 12px; }
.vx-grp > p { font: 700 14.5px/1.3 var(--f-body); padding-bottom: 6px; border-bottom: 2px solid var(--link); margin-bottom: 6px; }
.vx-grp > p small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.vx-grp ul { list-style: none; margin: 0; padding: 0; }
.vx-grp li { font-size: 13.5px; color: var(--muted); padding: 3px 0; }
.vx-grp-n { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* link building: traseul articolului */
.vx-lb { position: relative; list-style: none; margin: 0; padding: 0 0 0 0; }
.vx-lb::before, .vx-lb::after { content: ""; position: absolute; left: 9px; top: 20px; bottom: 30px; width: 2px; background: var(--line-2); }
.vx-lb::after { background: var(--link); transform-origin: 50% 0; }
.vx-lb::before, .vx-lb::after { z-index: 0; }
.vx-lb > li { z-index: 1; }
.vx-lb > li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) 120px; gap: 12px; align-items: center; padding: 10px 0; }
.vx-lb > li p b { display: block; font-size: 14.5px; }
.vx-lb > li p span { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; }
.vx-lb-o, .vx-lb-d { display: grid; gap: 4px; }
.vx-lb-o i { display: block; height: 10px; border: 1px solid var(--line-2); border-radius: 2px; }
.vx-lb-o i.on { border: 2px solid var(--link); }
.vx-lb-d { border: 1px solid var(--line-2); border-radius: 2px; padding: 6px; }
.vx-lb-d i { display: block; height: 4px; background: var(--dim); opacity: .4; }
.vx-lb-d i.ln { background: var(--link); opacity: 1; width: 60%; }
.vx-lb-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ok); }
.vx-lb-ok svg { width: 16px; height: 16px; }
.vx-lb-c { font: 12.5px var(--f-code, ui-monospace, Menlo, monospace); color: var(--text); background: var(--tint, #eaf5f6); padding: 2px 6px; border-radius: 3px; }

/* SEO local: cerere, recenzie, răspuns */
.vx-rec2 .vx-graf > div { padding: 12px 0; border-top: 1px solid var(--line); }
.vx-rc-c ul { list-style: none; margin: 0 0 4px; padding: 0; display: flex; gap: 16px; }
.vx-rc-c li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.vx-rc-c svg { width: 20px; height: 20px; color: var(--link); }
.vx-rc-c small { font-size: 12.5px; color: var(--muted); }
.vx-st { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.vx-st span { color: var(--warn); font-size: 15px; letter-spacing: 1px; } .vx-st span.g { color: var(--dim); margin-right: 6px; }
.vx-rc-r > p:last-child, .vx-rc-a > p:last-child { font-size: 14px; }
.vx-rc-a { margin-left: 22px; padding-left: 14px !important; border-left: 3px solid var(--link); }

/* cauze → roluri */
.vx-rol { list-style: none; margin: 0; padding: 0; }
.vx-rol li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); align-items: start; }
.vx-rol li > p b { display: block; font-size: 14px; line-height: 1.3; }
.vx-rol li > p small { font-size: 12.5px; color: var(--muted); }
.vx-rol li > div { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.vx-rol li > div span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.vx-rol-f { font-size: 13.5px; font-weight: 700; padding-top: 10px; border-top: 2px solid var(--text); }

/* despre noi: fluxul cu AI */
.vx-flux { list-style: none; margin: 0; padding: 0; }
.vx-flux li { position: relative; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 4px; margin-bottom: 24px; }
.vx-flux li:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -19px; width: 2px; height: 14px; background: var(--dim); }
.vx-flux li:last-child { margin-bottom: 0; }
.vx-flux li > p:not(.vx-sub) { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.vx-flux .vx-sub { margin-bottom: 2px; }
.vx-flux .vx-om { border: 2px solid var(--link); }
.vx-flux .vx-nu { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--bad) !important; font-weight: 700; }
.vx-flux .vx-nu svg { width: 16px; height: 16px; flex: none; }

/* internship: calendar și săptămâna */
.vx-cal-l, .vx-cal li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; align-items: center; }
.vx-cal-l > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); font-size: 11.5px; color: var(--muted); text-align: center; }
.vx-cal { list-style: none; margin: 0; padding: 0; }
.vx-cal li { padding: 6px 0; border-top: 1px solid var(--line); }
.vx-cal-t { font-size: 14px; font-weight: 700; }
.vx-cal-p { position: relative; height: 42px; background: linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / calc(100% / 12) 100%; }
.vx-cal-b { position: absolute; bottom: 4px; height: 14px; border-radius: 2px; }
.vx-cal-b.sel { background: var(--text); } .vx-cal-b.int { background: var(--link); }
.vx-cal-ter { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--text); }
.vx-cal-ter b { position: absolute; top: 0; left: 4px; font-size: 11.5px; white-space: nowrap; }
@media (max-width: 480px) { .vx-cal-ter-d b { left: auto; right: 4px; } }   /* eticheta din dreapta nu mai iese din pagină (accesibilitate 19.10.2026, P4) */
.vx-sapt-t { margin-top: 16px; }
.vx-sapt { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 10px; align-items: center; font-size: 13.5px; }
.vx-sapt > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.vx-sapt span { display: grid; place-items: center; height: 26px; border-radius: 2px; font: 700 12px var(--f-body); }
.vx-sapt span.b { background: var(--text); color: #fff; } .vx-sapt span.o { background: #fff; border: 1px solid var(--line-2); color: var(--muted); }

/* prețuri: cine pune timpul */
.vx-tp-h, .vx-tp li { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; align-items: center; }
.vx-tp-h { font-size: 12.5px; font-weight: 700; color: var(--muted); padding-bottom: 6px; }
.vx-tp-h span:first-child { display: none; }
.vx-tp-h { grid-template-columns: minmax(0, 1.25fr) minmax(0, .5fr) minmax(0, .5fr); }
.vx-tp-h span:first-child { display: block; }
.vx-tp-h span:last-child { color: var(--link); }
.vx-tp { list-style: none; margin: 0; padding: 0; }
.vx-tp li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.vx-tp-p { position: relative; height: 22px; background: linear-gradient(90deg, transparent calc(50% - .5px), var(--line-2) calc(50% - .5px), var(--line-2) calc(50% + .5px), transparent calc(50% + .5px)); }
.vx-tp-m { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; display: block; }
.vx-tp-m b { position: absolute; left: 50%; top: 2px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--text); }
.vx-tp-m.mut { transform: translateX(100%); }
.vx-tp-m.mut b { background: var(--link); }

/* agenția: cu și fără grup */
.vx-ag { padding: 12px 0; border-top: 1px solid var(--line); }
.vx-ag > small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.vx-ag-a { display: grid; grid-template-columns: auto 30px minmax(0, 1fr); align-items: center; gap: 0; }
.vx-ag-a .lin { height: 70px; border: 2px solid var(--dim); border-left: 0; border-radius: 0 3px 3px 0; position: relative; }
.vx-ag-a .lin::before { content: ""; position: absolute; left: -12px; top: 50%; width: 12px; height: 2px; background: var(--dim); }
.vx-ag-a .lin::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: var(--dim); }
.vx-ag-a > div { display: grid; gap: 6px; margin-left: 8px; }
.vx-ag span { font-size: 13.5px; }
.vx-ag-a > div span, .vx-ag-g span, .vx-ag-b .sf { padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 3px; }
.vx-ag .tu { font-weight: 700; padding: 5px 10px; border: 2px solid var(--text); border-radius: 3px; margin-right: 12px; }
.vx-ag-b { display: flex; align-items: center; gap: 6px; }
.vx-ag-b .vx-sag { transform: rotate(-90deg); flex: none; }
.vx-ag-b .tu { margin-right: 0; }
.vx-ag-b .sf { border: 2px solid var(--link); font-weight: 700; }
.vx-ag small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.vx-ag-g { display: grid; gap: 6px; padding: 6px; border: 1px dashed var(--line-2); border-radius: 4px; flex: 1; min-width: 0; }
.vx-ag-g span { font-weight: 700; background: #fff; }

@media (max-width: 640px) {
  .vx-bare { gap: 5px; } .vx-bare .s { font-size: 11px; white-space: normal; text-align: center; line-height: 1.1; }
  .vx-g-z { padding-left: 0; } .vx-gantt li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .vx-grps { grid-template-columns: minmax(0, 1fr); }
  .vx-lb > li { grid-template-columns: 20px minmax(0, 1fr); } .vx-lb > li > :last-child:not(p) { grid-column: 2; justify-self: start; min-width: 120px; }
  .vx-rol li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .vx-cal-l, .vx-cal li { grid-template-columns: 70px minmax(0, 1fr); } .vx-cal-l > div span:nth-child(even) { visibility: hidden; }
  .vx-sapt { grid-template-columns: 90px minmax(0, 1fr); }
  .vx-ag-b { flex-wrap: wrap; } .vx-ag-g { flex-basis: 100%; } .vx-ag-b .vx-sag:last-of-type { transform: none; }
  .vx-tp-h { grid-template-columns: minmax(0, 1fr) minmax(0, .45fr) minmax(0, .45fr); }
  .vx-tp li { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
}

@media (prefers-reduced-motion: no-preference) {
  html.js-anim:not([data-nivel="2"]) .vx:not(.vx-go) .vx-clip-h { transform: scaleX(0); }
  html.js-anim:not([data-nivel="2"]) .vx.vx-go .vx-clip-h { transition: transform var(--t, .6s) cubic-bezier(.3, .7, .2, 1) var(--d, 0s); }
  html.js-anim:not([data-nivel="2"]) .vx:not(.vx-go) .vx-bare li { transform: scaleY(.04); opacity: 0; }
  html.js-anim:not([data-nivel="2"]) .vx:not(.vx-go) .vx-tp-m.mut { transform: none; }
  html.js-anim:not([data-nivel="2"]) .vx:not(.vx-go) .vx-lb::after { transform: scaleY(0); }
  html.js-anim:not([data-nivel="2"]) .vx.vx-go .vx-lb::after { transition: transform 2s linear .3s; }
  html.js-anim:not([data-nivel="2"]) .vx.vx-go .vx-tp-m.mut { transition: transform .7s cubic-bezier(.3, .7, .2, 1) var(--d, 0s); }
}

/* gemenii de mărime a textului (panoul de accesibilitate, generat de _sursa/panou_a11y.py) */
.a11y-text .vx-t { font-size: calc(16px * var(--a11y-k, 1)); }
.a11y-text .vx-ex { font-size: calc(12px * var(--a11y-k, 1)); }
.a11y-text .vx-src { font-size: calc(13px * var(--a11y-k, 1)); }
.a11y-text .vx-sub { font-size: calc(14px * var(--a11y-k, 1)); }
.a11y-text .vx-nr { font-size: calc(12px * var(--a11y-k, 1)); }
.a11y-text .vx-note li { font-size: calc(14px * var(--a11y-k, 1)); }
.a11y-text .vx-leg { font-size: calc(13px * var(--a11y-k, 1)); }
.a11y-text .vx-lent .vx-y { font-size: calc(12px * var(--a11y-k, 1)); }
.a11y-text .vx-lent .vx-x { font-size: calc(12px * var(--a11y-k, 1)); }
.a11y-text .vx-lent .vx-rep b { font-size: calc(12px * var(--a11y-k, 1)); }
.a11y-text .vx-lent .vx-prag { font-size: calc(11.5px * var(--a11y-k, 1)); }
.a11y-text .vx-lent .vx-band-t { font-size: calc(13px * var(--a11y-k, 1)); }
.a11y-text .vx-lent .vx-band span { font-size: calc(12px * var(--a11y-k, 1)); }
.a11y-text .vx-harta .vx-pasi li { font-size: calc(14.5px * var(--a11y-k, 1)); }
.a11y-text .vx-harta .vx-pasi em { font-size: calc(12.5px * var(--a11y-k, 1)); }
.a11y-text .vx-harta .vx-luni { font-size: calc(12.5px * var(--a11y-k, 1)); }
.a11y-text .vx-harta .vx-poz { font-size: calc(13px * var(--a11y-k, 1)); }
.a11y-text .vx-harta .vx-rand { font-size: calc(14px * var(--a11y-k, 1)); }
.a11y-text .vx-harta .vx-rand small { font-size: calc(12.5px * var(--a11y-k, 1)); }
.a11y-text .vx-harta .vx-top3-l { font-size: calc(12.5px * var(--a11y-k, 1)); }
.a11y-text .vx-rec .vx-l-t { font-size: calc(14px * var(--a11y-k, 1)); }
.a11y-text .vx-rec .vx-l-t small { font-size: calc(12.5px * var(--a11y-k, 1)); }
.a11y-text .vx-rec .vx-ax div { font-size: calc(12px * var(--a11y-k, 1)); }
.a11y-text .vx-rec .vx-upd { font-size: calc(11.5px * var(--a11y-k, 1)); }
.a11y-text .vx-ai .vx-pas-t b { font-size: calc(15px * var(--a11y-k, 1)); }
.a11y-text .vx-ai .vx-pas-t span { font-size: calc(13.5px * var(--a11y-k, 1)); }
.a11y-text .vx-ai .vx-pg em { font-size: calc(11.5px * var(--a11y-k, 1)); }
.a11y-text .vx-ai .vx-pg-c { font-size: calc(11.5px * var(--a11y-k, 1)); }
.a11y-text .vx-ai .vx-surse { font-size: calc(13px * var(--a11y-k, 1)); }
.a11y-text .vx-ai .vx-rasp-t { font-size: calc(13px * var(--a11y-k, 1)); }
.a11y-text .vx-ai .vx-rasp p { font-size: calc(13.5px * var(--a11y-k, 1)); }
@media (max-width: 640px) {
.a11y-text .vx-lent .vx-band span { font-size: calc(11.5px * var(--a11y-k, 1)); }
}
.a11y-text .vx-bare .v { font-size: calc(13px * var(--a11y-k, 1)); }
.a11y-text .vx-bare .s { font-size: calc(12px * var(--a11y-k, 1)); }
.a11y-text .vx-serp-r > span { font-size: calc(12px * var(--a11y-k, 1)); }
.a11y-text .vx-serp-m { font-size: calc(12.5px * var(--a11y-k, 1)); }
.a11y-text .vx-serp-n { font-size: calc(13.5px * var(--a11y-k, 1)); }
.a11y-text .vx-g-z { font-size: calc(12px * var(--a11y-k, 1)); }
.a11y-text .vx-g-t { font-size: calc(14px * var(--a11y-k, 1)); }
.a11y-text .vx-g-t small { font-size: calc(12.5px * var(--a11y-k, 1)); }
.a11y-text .vx-q { font-size: calc(15px * var(--a11y-k, 1)); }
.a11y-text .vx-q small { font-size: calc(12.5px * var(--a11y-k, 1)); }
.a11y-text .vx-pag-h { font-size: calc(16px * var(--a11y-k, 1)); }
.a11y-text .vx-pag-r { font-size: calc(14px * var(--a11y-k, 1)); }
.a11y-text .vx-pag-c { font-size: calc(12.5px * var(--a11y-k, 1)); }
.a11y-text .vx-pag-s { font-size: calc(13px * var(--a11y-k, 1)); }
.a11y-text .vx-grp > p { font-size: calc(14.5px * var(--a11y-k, 1)); }
.a11y-text .vx-grp > p small { font-size: calc(12px * var(--a11y-k, 1)); }
.a11y-text .vx-grp li { font-size: calc(13.5px * var(--a11y-k, 1)); }
.a11y-text .vx-grp-n { font-size: calc(13px * var(--a11y-k, 1)); }
.a11y-text .vx-lb > li p b { font-size: calc(14.5px * var(--a11y-k, 1)); }
.a11y-text .vx-lb > li p span { font-size: calc(13px * var(--a11y-k, 1)); }
.a11y-text .vx-lb-ok { font-size: calc(13px * var(--a11y-k, 1)); }
.a11y-text .vx-lb-c { font-size: calc(12.5px * var(--a11y-k, 1)); }
.a11y-text .vx-rc-c li { font-size: calc(14px * var(--a11y-k, 1)); }
.a11y-text .vx-rc-c small { font-size: calc(12.5px * var(--a11y-k, 1)); }
.a11y-text .vx-st { font-size: calc(13px * var(--a11y-k, 1)); }
.a11y-text .vx-st span { font-size: calc(15px * var(--a11y-k, 1)); }
.a11y-text .vx-rc-r > p:last-child, .a11y-text .vx-rc-a > p:last-child { font-size: calc(14px * var(--a11y-k, 1)); }
.a11y-text .vx-rol li > p b { font-size: calc(14px * var(--a11y-k, 1)); }
.a11y-text .vx-rol li > p small { font-size: calc(12.5px * var(--a11y-k, 1)); }
.a11y-text .vx-rol li > div span { font-size: calc(14px * var(--a11y-k, 1)); }
.a11y-text .vx-rol-f { font-size: calc(13.5px * var(--a11y-k, 1)); }
.a11y-text .vx-flux li > p:not(.vx-sub) { font-size: calc(13.5px * var(--a11y-k, 1)); }
.a11y-text .vx-cal-l > div { font-size: calc(11.5px * var(--a11y-k, 1)); }
.a11y-text .vx-cal-t { font-size: calc(14px * var(--a11y-k, 1)); }
.a11y-text .vx-cal-ter b { font-size: calc(11.5px * var(--a11y-k, 1)); }
.a11y-text .vx-sapt { font-size: calc(13.5px * var(--a11y-k, 1)); }
.a11y-text .vx-sapt span { font-size: calc(12px * var(--a11y-k, 1)); }
.a11y-text .vx-tp-h { font-size: calc(12.5px * var(--a11y-k, 1)); }
.a11y-text .vx-tp li { font-size: calc(14px * var(--a11y-k, 1)); }
.a11y-text .vx-ag > small { font-size: calc(12.5px * var(--a11y-k, 1)); }
.a11y-text .vx-ag span { font-size: calc(13.5px * var(--a11y-k, 1)); }
.a11y-text .vx-ag small { font-size: calc(12px * var(--a11y-k, 1)); }
@media (max-width: 640px) {
.a11y-text .vx-bare .s { font-size: calc(11px * var(--a11y-k, 1)); }
}