/* /energia/gas/ on the new design (G3 guide template): only what the page adds to /design/novo.css and
   /energia/g3.css — the three cheapest with the market range, the regulated tariff's card. Rendered by
   src/energia/gas/g3.ts. */
.ggas .b2 .two > div:first-child { gap: 18px; }
.ggas #gas-top3 .o b { font-size: 16px; }
.g3faixa { display: grid; gap: 8px; padding-top: 6px; }
.g3faixa__q { margin: 0; font: 700 26px/1.2 var(--disp); color: var(--ink-deep); }
.g3faixa__q a { color: inherit; text-decoration: underline; text-decoration-color: var(--peach); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.g3reg .best__p small { font: 400 15px/1 var(--font-ui); color: var(--ink-50); margin-left: 6px; }
@media (max-width: 640px) { .g3faixa__q { font-size: 22px; } .g3faixa__q a { display: inline-block; padding-block: 8px; } }

/* /energia/luz-e-gas/ (src/energia/gas/g3.ts paginaLuzEGasG3): the two bills in the tool card, the sum, the dual offers */
.glg .in--u { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; min-height: 44px; box-sizing: border-box; background: #fff; }
.glg .in--u input { width: 7ch; border: 0; padding: 0; background: transparent; font: 400 16px/1.2 var(--font-ui); color: var(--ink); text-align: right; }
.glg .in--u input:focus { outline: none; } .glg .in--u:focus-within { outline: 2px solid var(--peach-ink); outline-offset: 2px; }
.glg .in--u span { color: var(--ink-50); font-size: 15px; }
.glg .g3eur small { margin-left: 4px; }
.glg .g3go { margin-top: 14px; width: 100%; min-height: 52px; padding: 0 22px; border: 0; border-radius: var(--r-pill); background: var(--ink-deep); color: #fff; font: 600 16px/1.2 var(--font-ui); cursor: pointer; }
.glg .g3go:focus-visible { outline: 2px solid var(--peach-ink); outline-offset: 3px; }
.g3lg__r { margin: 14px 0 0; padding: 16px 18px; border-radius: 18px; background: var(--peach-pale); font: 600 16px/1.45 var(--font-ui); color: var(--ink-deep); } .g3lg__r:empty { display: none; }
.g3soma { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 14px; }
.g3soma__t { background: #fff; border: 1px solid var(--tint-10); border-radius: 22px; padding: 22px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.g3soma__t b { font: 700 32px/1.1 var(--disp); color: var(--ink-deep); }
.g3soma__t span:not(.tk) { font-size: 15px; font-weight: 600; color: var(--ink-deep); } .g3soma__t small { font-size: 14px; line-height: 1.4; color: var(--ink-60); }
.g3soma__t--r { background: var(--ink-deep); border-color: var(--ink-deep); } .g3soma__t--r .tk { color: var(--peach); } .g3soma__t--r b { color: #fff; } .g3soma__t--r small { color: var(--on-dark-75); }
.g3soma__op { align-self: center; font: 400 28px/1 var(--font-ui); color: var(--ink-50); }
.g3bars { background: #fff; border: 1px solid var(--tint-10); border-radius: 22px; padding: 24px; display: grid; gap: 14px; align-content: start; }
.g3bars__h { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.g3bar { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 2.5em; align-items: center; gap: 12px; font-size: 15px; color: var(--ink); }
.g3bar i { height: 12px; border-radius: var(--r-pill); background: var(--tint-10); overflow: hidden; }
.g3bar i::before { content: ''; display: block; height: 100%; width: var(--w); border-radius: var(--r-pill); background: var(--ink-deep); }
.g3bar b { font: 600 15px var(--font-doc); text-align: right; color: var(--ink-deep); }
.g3resto li { background: var(--tint-10); color: var(--ink-60); }
.glg .g3duplas .best { align-content: start; }
@media (max-width: 760px) {
  .g3soma { grid-template-columns: 1fr; gap: 8px; } .g3soma__op { justify-self: center; }
}

/* /energia/gas/municipios/ (paginaMunicipiosG3): the search and the result card in the tool */
.g3ficha { margin: 10px 0 0; display: grid; background: var(--peach-pale); border-radius: 18px; padding: 6px 18px; }
.g3ficha > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--tint-10); }
.g3ficha > div:first-child { border-top: 0; }
.g3ficha dt { font: 500 12px/1.3 var(--font-doc); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); }
.g3ficha dd { margin: 0; font: 600 15.5px/1.35 var(--font-ui); color: var(--ink-deep); text-align: right; }
.gmun .g3form input.in { width: 100%; text-align: left; }
.gmun .tool > .hint:last-child { margin-top: 10px; font-size: 14.5px; line-height: 1.5; }