/* ---------- Varilla de nivel de combustible (usa también vigilo-sensores.css) ---------- */
.vn-hero::before { display: none; }
.vn-hero::after { background: radial-gradient(ellipse 50% 70% at 78% 45%, rgba(254,102,1,.20), rgba(254,102,1,0) 70%), radial-gradient(ellipse 40% 50% at 8% 100%, rgba(61,123,217,.14), rgba(61,123,217,0) 70%), linear-gradient(90deg, #081220 0%, rgba(8,18,32,.97) 50%, #0b1a2c 100%); }
.vn-hero .vg-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.vg26 .vn-hero h1 em { font-style: normal; color: #ffb347 !important; }
.vn-shot { position: relative; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.12); background: radial-gradient(circle at 40% 40%, #16263a, #0a1422 75%); padding: 20px 10px 6px; }
.vn-tank { display: block; width: 100%; height: auto; }
.vn-chip--r i { background: #ff5a5a !important; box-shadow: 0 0 0 4px rgba(255,90,90,.3) !important; }
.vn-shot .th-chip--b { top: auto; bottom: 16px; right: 16px; }
.vn-shot .th-chip--a { left: 16px; top: 16px; bottom: auto; }
.vg26 main > .vg-section.vn-kpis { background: linear-gradient(90deg, #e35d00, #ff8a1f) !important; padding: 34px 0; }
.vn-kpis .vg-wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vn-kpis b { display: block; font-family: var(--vg-display); font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.vn-kpis span { font-size: 14px; color: #ffe6cf; }
.vn-what .th-w .vx-ic, .vn-apps .th-w .vx-ic { background: #fff0e5; color: #c95400; }
.vn-steps li::before { background: #fe6601; }
.vn-dash svg text.g { fill: #4ade80; font-weight: 700; font-size: 12px; } .vn-dash svg text.r { fill: #ff7a7a; font-weight: 700; font-size: 12px; }
.vn-dash .th-dash__now b { color: #ffb347; }
.vn-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.vn-f { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--vg-line); border-radius: 20px; padding: 22px; }
.vn-f .vx-ic { flex: none; background: #0f1d2e; color: #ffb347; }
.vn-f h3 { font-family: var(--vg-display); font-size: 17px; color: var(--vg-ink); margin: 2px 0 6px; }
.vn-f p { font-size: 14.5px; color: var(--vg-muted); line-height: 1.55; margin: 0; }
.vg26 main > .vg-section.vn-vs-sec { background: var(--vg-ink) !important; }
.vn-vs-sec .vg-h2 { color: #fff; } .vn-vs-sec .vg-eyebrow { color: #ffb347; }
.vn-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.vn-vs__c { border-radius: 22px; padding: 28px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.vn-vs__c h3 { font-family: var(--vg-display); font-size: 22px; color: #fff; margin: 0 0 10px; }
.vn-vs__c p { color: #b4c4d7; font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.vn-vs__c ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vn-vs__c li { color: #dfe7f0; font-size: 14.5px; padding-left: 22px; position: relative; }
.vn-vs__c li::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #6f849c; }
.vn-vs__c--on { border-color: #fe6601; background: rgba(254,102,1,.10); }
.vn-vs__c--on li::before { background: #fe6601; }
.vn-spec tbody th { width: 32%; }
@media (max-width: 900px) {
  .vn-hero .vg-wrap { grid-template-columns: minmax(0, 1fr); }
  .vn-kpis .vg-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vn-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vn-vs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .vn-feats { grid-template-columns: minmax(0, 1fr); }
  .vn-kpis b { font-size: 24px; }
  .vn-spec { overflow-x: visible; } .vn-spec table { min-width: 0; }
  .vn-spec th, .vn-spec td { display: block; width: auto !important; } .vn-spec td { padding-top: 0; }
}