/* The energy tool pages of group A on the new design (gás, fatura, mercado hoje/histórico, fixo ou indexado, solar):
   what they share on top of /design/novo.css — the freshness twins, the answer in the hero, the tool card's real
   inputs, the table, the alert, the manifesto band, «O passo seguinte» with its line, and one left edge for every
   section. Rendered by src/energia/g3/partes.ts; each page adds its own sheet. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Freshness: a figure shows only while its data is fresh (FRESCO_SCRIPT in the head), as inicio.css. */
html:not([data-erse="fresco"]) [data-erse-fresco], html[data-erse="fresco"] [data-erse-velho],
html:not([data-dgeg="fresco"]) [data-dgeg-fresco], html[data-dgeg="fresco"] [data-dgeg-velho],
html:not([data-omie="fresco"]) [data-omie-fresco], html[data-omie="fresco"] [data-omie-velho] { display: none !important; }
[hidden] { display: none !important; }

/* ── one left edge: «O passo seguinte» and the FAQ sit on the .wrap's content edge ── */
.g3b .rel.b h2, .g3b .relg { max-width: calc(1180px - 2 * clamp(18px, 4vw, 40px)); }
.g3b .fq6 { max-width: 1180px; } .g3b .fq6 > * { max-width: 820px; width: 100%; }
.g3b .b6 .gfaq details p + p { margin-top: -8px; }

/* ── 1 · the hero: the answer first, then the tool ── */
.g3b .g2hi { align-items: start; } .g3b .g2t { padding-top: clamp(0px, 3vw, 40px); }
.g3b .dek { max-width: 52ch; }
.g3r { display: grid; gap: 10px; }
.g3r__n { margin: 0; font: 700 clamp(44px, 5vw, 64px)/1 var(--disp); letter-spacing: -.02em; color: var(--ink-deep); }
.g3r__n--bom { color: var(--band-barato); }
.g3r__n small { font: 400 16px/1.2 var(--font-ui); letter-spacing: 0; color: var(--ink-50); margin-left: 4px; }
.gmeta > span:not(.dot) { line-height: 1.5; }
.tool .hint { line-height: 1.5; }
.tool > .hint { margin: -4px 0 6px; }

/* the tool card's real inputs (G3 .row / .in) */
.g3form { display: grid; gap: 0; }
.g3form .row { margin: 0; flex-wrap: wrap; } .g3form .row > span:first-child { flex: 1 1 auto; min-width: 0; }
.g3form .row .hint { flex: 1 1 100%; }
.g3form .in { font: 400 16px/1.2 var(--font-ui); color: var(--ink); background: #fff; min-height: 44px; }
.g3form input.in { width: 9ch; min-width: 0; }
.g3form .row.col .in { width: 100%; text-align: left; }
.g3form .in:focus-visible { outline: 2px solid var(--peach-ink); outline-offset: 2px; }
.pq { margin: 0; padding: 14px 0; border: 0; border-top: 1px solid var(--tint-10); min-width: 0; display: grid; gap: 10px; }
.pq:first-child { border-top: 0; padding-top: 4px; }
.pq legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font-size: 16px; color: var(--ink-deep); }
/* radio pills: the input covers its pill, so the whole pill is the target */
.g3pills { display: flex; flex-wrap: wrap; gap: 8px; }
.g3pills--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3pills label { position: relative; display: block; cursor: pointer; flex: 1 1 auto; }
.g3pills:not(.g3pills--2) span { justify-content: center; text-align: center; }
.g3pills input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.g3pills span { display: grid; align-content: center; gap: 2px; min-height: 44px; box-sizing: border-box; padding: 8px 16px; border-radius: 14px; border: 1.5px solid var(--tint-20); font-size: 15px; line-height: 1.25; color: var(--ink-deep); }
.g3pills small { font: 500 12px/1.2 var(--font-doc); color: var(--ink-50); }
.g3pills input:checked + span { background: var(--ink-deep); border-color: var(--ink-deep); color: #fff; font-weight: 600; }
.g3pills input:checked + span small { color: var(--on-dark-75); }
.g3pills input:focus-visible + span { outline: 2px solid var(--peach-ink); outline-offset: 2px; }
.g3erro { margin: 0; font-size: 15px; color: var(--peach-ink); } .g3erro:empty { display: none; }
/* the answer box the tool fills (.verd): label, figure, line */
.verd .cell__label { font: 500 12px/1.2 var(--font-doc); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-50); }
.verd p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-60); }
.verd > span[data-erse-fresco], .verd > span[data-erse-velho] { display: grid; gap: 6px; }
.g3form .verd { margin-top: 14px; }

/* ── sections ── */
.g3s { display: grid; gap: 28px; } .g3s__h { display: grid; gap: 14px; max-width: 65ch; }
.g3b .b .lead2 { max-width: 65ch; }
.g3b .tk + h2, .g3b .tk + h3 { margin-top: -4px; }
.g3linha { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--tint-10); border-bottom: 1px solid var(--tint-10); }
.best .door, .g3b .door { display: inline-flex; align-items: center; min-height: 44px; padding-bottom: 0; }
.best .tk:not(:first-child) { margin-top: 8px; }

/* the table (an old ledger): a real table; each row stacks on a phone */
.g3tabw { display: grid; gap: 12px; min-width: 0; }
.g3tab { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.g3tab thead th { padding: 0 12px 10px 0; font: 500 12px/1.3 var(--font-doc); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-50); text-align: left; }
.g3tab td, .g3tab tbody th { padding: 14px 12px 14px 0; border-top: 1px solid var(--tint-20); vertical-align: top; text-align: left; line-height: 1.45; }
.g3tab tbody th { font-weight: 600; color: var(--ink-deep); }
.g3tab__n { width: 3em; font: 500 13px/1.45 var(--font-doc); color: var(--ink-50); }
.g3tab__r { color: var(--ink-60); max-width: 48ch; }
.g3tab .g3tab__v { text-align: right; padding-right: 0; font: 600 15px/1.45 var(--font-doc); color: var(--ink-deep); white-space: nowrap; }
.g3tab__v .ep-v2 { display: block; }
.g3tab__f { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-60); max-width: 92ch; }
.eh-breve { font-style: normal; display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--peach-pale); font: 500 12px/1.4 var(--font-doc); color: var(--peach-ink); white-space: nowrap; }

/* ── the alert (.b5): the form row, its consent and status, the example email ── */
.g3b .b5 .mail { align-items: center; }
.g3b .b5 .mail input { min-width: 0; }
.g3b .b5 .mail input:focus-visible, .g3b .b5 .mail button:focus-visible { outline: 2px solid var(--peach-ink); outline-offset: 2px; }
.bmail__consent { flex: 1 1 100%; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-60); max-width: 65ch; }
.bmail__consent a { color: var(--ink); }
.bmail__msg { flex: 1 1 100%; margin: 0; font-size: 15px; color: var(--peach-ink); } .bmail__msg:empty { display: none; }
.bmail__ok { display: grid; gap: 6px; } .bmail__ok p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-deep); }
.g3mail { gap: 10px; } .g3mail p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.g3mail__h { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--tint-10); }
.g3mail__h > span:nth-child(2) { display: grid; gap: 2px; flex: 1; } .g3mail__h small { font-size: 13px; color: var(--ink-50); }
.g3mail .av { width: 40px; height: 40px; border-radius: 12px; background: var(--peach); color: var(--ink-deep); display: grid; place-items: center; flex: none; }
.g3mail .av svg { width: 30px; height: 30px; }
.g3mail__tag { font: 500 12px/1 var(--font-doc); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-50); }
.g3mail .g3mail__s { font-weight: 600; color: var(--ink-deep); }
.g3mail__pay { padding: 12px 14px; border-radius: 14px; background: var(--band-barato-11); } .g3mail__pay b { color: var(--band-barato); }
.g3mail .g3mail__l { font-weight: 600; color: var(--ink-deep); text-decoration: underline; text-decoration-color: var(--peach); text-underline-offset: 3px; }

/* ── the manifesto as the dark band ── */
.g3man .split__resolve { display: grid; gap: 14px; }
.g3man .split__claim { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font: 700 clamp(30px, 3vw, 44px)/1.1 var(--disp); color: #fff; }
.g3man .claim-mark { width: 1.3em; height: 1.3em; padding: 6px; box-sizing: border-box; border-radius: 14px; background: var(--peach); color: var(--ink-deep); }
.g3man .split__resolve p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--on-dark-75); max-width: 65ch; }

/* ── «O passo seguinte»: the old card's line under its title ── */
.rc__l { font-size: 14.5px; line-height: 1.45; color: var(--on-dark-75); }
.rc:focus-visible { outline: 3px solid var(--peach-ink); outline-offset: 3px; }

/* ── source line ── */
.hfonte { padding-top: 28px; padding-bottom: 28px; }
.hfonte .src { display: block; max-width: 92ch; border-top: 0; padding-top: 0; margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-60); } .hfonte a { color: var(--ink); text-underline-offset: 2px; }

/* focus everywhere a link or control sits on these pages */
.g3b .crumbs a:focus-visible, .g3b .door:focus-visible, .g3b .f1q summary:focus-visible, .g3b a:focus-visible, .g3b button:focus-visible, .g3b select:focus-visible { outline: 2px solid var(--peach-ink); outline-offset: 2px; border-radius: 4px; }
.g3b .crumbs a, .g3b .hfonte a, .g3b .g3faixa a, .g3b .tool a { text-underline-offset: 2px; }

/* ── explanation cards; the alert's options and its card (the Simuladores and market pages) ── */
/* what each word means: cards on one grid */
.g3exps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.g3exp { background: var(--cream); border-radius: 22px; padding: 24px; display: grid; gap: 10px; align-content: start; }
.g3exp h3 { margin: 0; font: 700 22px/1.2 var(--disp); color: var(--ink-deep); }
.g3exp p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-60); max-width: 65ch; }
/* the alert: the live watch ticked, the ones not built yet as a hollow mark */
.g3opts li.eh-opt:not(.eh-opt--on)::before { content: ""; background: transparent; border: 1.5px dashed var(--ink-50); box-sizing: border-box; }
.g3opts li { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; }
.g3aviso { align-content: start; }
.g3aviso .mail input { background: var(--cream); }
.g3aviso .mail button { background: var(--ink-deep); color: #fff; }
.g3exps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g3opt { position: relative; } .g3opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
@media (max-width: 960px) { .g3exps--3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .g3exps { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .g3exp { padding: 20px; } .g3aviso .mail button { width: 100%; } }

@media (max-width: 640px) {
  .g3b .tool .row:not(.col) { flex-direction: row; align-items: center; } .g3b .tool .row input.in { text-align: right; }
  .g3pills--2 span { padding: 8px 10px; font-size: 14px; }
  .g3pills span { padding: 8px 12px; }
  .g3tab thead { display: none; }
  .g3tab, .g3tab tbody, .g3tab tr { display: block; }
  .g3tab tr { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; gap: 4px 10px; padding: 14px 0; border-top: 1px solid var(--tint-20); }
  .g3tab td, .g3tab tbody th { display: block; padding: 0; border: 0; }
  .g3tab .g3tab__r { grid-column: 2 / -1; grid-row: 2; font-size: 14.5px; }
  .g3tab .g3tab__v { grid-column: 3; grid-row: 1; font-size: 14px; }
  /* text links: a 40 px+ tap area without moving the line */
  .g3b .crumbs a, .g3b .hfonte a, .g3b .bmail__consent a, .g3b .fz-consent a { padding-block: 12px; }
  .g3b .b5 .mail button { width: 100%; }
}
.g3b .crumbs { flex-wrap: wrap; align-items: center; row-gap: 0; }
.g3b select.in { padding-right: 36px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%2347201C'/%3E%3C/svg%3E") no-repeat right 14px center; appearance: none; -webkit-appearance: none; cursor: pointer; }

/* QA 2026-10-29 · E10: one muted style for a missing value («sem dados», g3/partes.ts semDados) and for «a confirmar» */
.sd, .g3b .ep-conf, .g3b .tag-confirmar { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); background: var(--tint-10);
  font: 500 11.5px/1.4 var(--font-doc); font-style: normal; letter-spacing: .02em; color: var(--ink-50); vertical-align: middle; }
.b4 .sd { background: var(--on-dark-20); color: var(--on-dark-75); }