/* /energia/comparar/ on the new design, option CV1 «Resposta primeiro» (approved 2026-10-28; mock
   vault/energia-comparar/?cv=1, its comparar.css CV1 rules). Only what the page adds to /design/novo.css: the hero grid,
   the tool card's real inputs (radio groups drawn as the mock's segmented buttons), the answer card, the supplier tiles,
   the next three, the list and its filters, «Como mudar», the lead and error forms (lead.ts builds them; the rules are
   energia.css's, scoped to the card), and the phone layout (answer + «Condições» in the first screen, no sideways scroll,
   tap targets of at least 40 px, a visible focus everywhere). */
.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; }
.cmp a:focus-visible, .cmp button:focus-visible, .cmp select:focus-visible, .cmp summary:focus-visible { outline: 2px solid var(--peach-ink); outline-offset: 2px; }
.rascunho { font: 500 11.5px/1.3 var(--font-doc); color: var(--peach-ink); }

/* hero */
.ch { background: var(--cream); padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 64px); }
.ch h1 { font-size: clamp(34px, 4.4vw, 58px); }
.ch .dek { font-size: clamp(16px, 1.3vw, 19px); }
.ch1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(28px, 4vw, 64px); align-items: start; }
.ch1__l { display: grid; gap: 18px; min-width: 0; }
.ch .gmeta { flex-wrap: wrap; }

/* the tool card: label above the control; «O meu comercializador» and «Quem gasta» on full rows */
.tool.q1 { padding: 20px 22px 16px; gap: 10px; }
.ibar--card { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-start; }
.ibar--card .f { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ibar--card .f > label, .ibar--card .f > legend { padding: 0; font: 500 11.5px/1 var(--font-doc); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); }
.ibar--card .f > legend { margin-bottom: 6px; }
.ibar--card .f.fcom, .ibar--card .f.fqg { flex: 1 1 100%; }
.ibar--card .f.fpot, .ibar--card .f.fcont { flex: 1 1 0; }
.ibar--card select.in { width: 100%; min-width: 0; min-height: 44px; padding: 9px 34px 9px 14px; text-align: left; border-radius: var(--r-pill); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23291210' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; font-size: 15px; }
.ibar--card .seg { display: flex; width: 100%; box-sizing: border-box; }
.ibar--card .seg label { flex: 1; display: flex; }
.ibar--card .seg label span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; border-radius: var(--r-pill); font: 500 14px/1 var(--font-ui); color: var(--ink-60); cursor: pointer; white-space: nowrap; }
.ibar--card .seg input:checked + span { background: var(--ink-deep); color: #fff; }
.ibar--card .seg input:focus-visible + span { outline: 2px solid var(--peach-ink); outline-offset: 2px; }
.q__eco { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-50); }
.q__eco a { color: var(--ink-60); }

/* the answer card */
.ans1 { background: #fff; border-radius: 28px; padding: 26px 28px 22px; box-shadow: 0 30px 70px rgba(41,18,16,.10); display: grid; gap: 12px; border: 2px solid var(--band-barato); min-width: 0; }
.ans1--vazio { border-color: var(--tint-20); }
.ans1__c { display: grid; gap: 12px; min-width: 0; }
.who { display: flex; gap: 12px; align-items: center; min-width: 0; } .who > div { display: grid; gap: 2px; min-width: 0; }
.who b { font-size: 17px; color: var(--ink-deep); } .who span.on { font-size: 14.5px; color: var(--ink-60); line-height: 1.3; overflow-wrap: anywhere; }
.price { margin: 0; font: 700 clamp(40px, 4vw, 52px)/1 var(--disp); color: var(--ink-deep); letter-spacing: -.01em; }
.price small { font: 400 15px/1 var(--font-ui); color: var(--ink-50); margin-left: 4px; letter-spacing: 0; }
.mes { margin: -4px 0 0; font-size: 14.5px; color: var(--ink-60); }
.save { margin: 0; justify-self: start; font: 600 15px/1.3 var(--font-ui); padding: 8px 12px; border-radius: 12px; background: var(--band-barato-11); color: var(--band-barato); }
.save.neu { background: var(--tint-10); color: var(--ink-60); }
.sua { margin: 0; font-size: 14px; color: var(--ink-60); } .sua a { color: var(--ink); font-weight: 600; }
.catch { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ink); padding: 12px 14px; border-radius: 14px; background: var(--cream); }
.catch b { display: block; font: 500 11.5px/1 var(--font-doc); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 6px; }
.act { display: grid; gap: 8px; margin-top: 2px; }
.act .cta { 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; }
.act .cta[hidden] { display: none; }
.act .cta[aria-busy="true"] { cursor: progress; }
.act__sub { margin: 0; font-size: 13.5px; color: var(--ink-50); }
.act .ghost { margin: 0; padding: 13px; font-size: 15px; }
.salta { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-60); } .salta a { color: var(--ink); display: inline-block; padding: 10px 0; margin: -10px 0; }
.salta[hidden], .partilha[hidden], .refl[hidden] { display: none; }
.partilha { margin: 0; font-size: 14px; } .partilha a { color: var(--ink); font-weight: 600; }
.trust { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--tint-10); font: 500 11.5px/1.5 var(--font-doc); color: var(--ink-50); }
.trust a { color: var(--ink-60); }
#eband-falha { margin: 0; font-size: 14px; color: var(--band-caro); }

/* supplier tiles: the supplier's own file on its light or dark ground, else initials */
.lg { flex: none; width: 64px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--tint-10); overflow: hidden; }
.lg img { max-width: 52px; max-height: 24px; width: auto; height: auto; object-fit: contain; display: block; }
.lg.escuro { background: var(--ink-deep); box-shadow: none; }
.lg.ini { font: 600 14px/1 var(--font-ui); color: var(--ink-deep); box-shadow: none; }
.lg.sm { width: 48px; height: 32px; border-radius: 8px; } .lg.sm img { max-width: 40px; max-height: 18px; } .lg.sm.ini { font-size: 12px; }

/* «as 3 seguintes», the regulated tariff, the list */
.nx { background: var(--paper); }
.nx .wrap { display: grid; gap: 22px; }
.nx h2 { font-size: clamp(26px, 2.6vw, 36px); }
.nx3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.nxc { background: #fff; border: 1px solid var(--tint-10); border-radius: 22px; padding: 18px 18px 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.nxc .who b { font-size: 15.5px; } .nxc .who span.on { font-size: 13.5px; }
.nxc__p { margin: 0; font: 700 26px/1 var(--disp); color: var(--ink-deep); } .nxc__p small { font: 400 13px/1 var(--font-ui); color: var(--ink-50); margin-left: 4px; }
.nxc__w { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-60); } .nxc__r { margin: 0; font: 500 11.5px/1 var(--font-doc); color: var(--ink-50); }
.refl { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 14px 18px; border-radius: 16px; background: #FDEDE6; font-size: 15px; color: var(--ink); justify-self: start; }
.refl b { color: var(--ink-deep); }
.tbx { display: grid; gap: 16px; }
.tbx > summary { list-style: none; justify-self: start; display: inline-flex; gap: 10px; align-items: center; min-height: 48px; padding: 0 22px; border: 1.5px solid var(--ink-deep); border-radius: var(--r-pill); font: 600 16px/1 var(--font-ui); color: var(--ink-deep); cursor: pointer; }
.tbx > summary::-webkit-details-marker { display: none; }
.tbx .vbtn__esc, .tbx[open] .vbtn__ver { display: none; } .tbx[open] .vbtn__esc { display: inline; }
.tb { display: grid; gap: 14px; margin-top: 16px; }
.tb__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.tb__h h3 { margin: 0; font: 700 22px/1.2 var(--disp); color: var(--ink-deep); }
.flt { display: flex; flex-wrap: wrap; gap: 8px; }
.flt button { min-height: 40px; border: 1.5px solid var(--tint-20); background: #fff; border-radius: var(--r-pill); padding: 0 14px; font: 500 14px/1 var(--font-ui); color: var(--ink); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.flt button small { font: 500 12px/1 var(--font-doc); color: var(--ink-50); }
.flt button[aria-pressed="true"] { background: var(--ink-deep); border-color: var(--ink-deep); color: #fff; } .flt button[aria-pressed="true"] small { color: var(--on-dark-75); }
.flt button[aria-pressed="true"]::before { content: "✓"; font-size: 12px; }
.rt { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--tint-10); border-radius: 22px; overflow: hidden; }
.rt__h, .rt li { display: grid; grid-template-columns: 34px minmax(0, 1.5fr) minmax(0, 1fr) 104px 104px; gap: 14px; align-items: center; padding: 12px 18px; }
.rt__h { padding: 12px 18px 10px; font: 500 11.5px/1.2 var(--font-doc); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-50); background: var(--paper); }
.rt__h span:nth-child(n+4) { text-align: right; }
.rt li { border-top: 1px solid var(--tint-10); scroll-margin-top: 90px; }
.rt li.rt__h { border-top: 0; }
.rt .n { font: 600 13px/1 var(--font-doc); color: var(--ink-50); }
.rt .o { display: flex; gap: 12px; align-items: center; min-width: 0; } .rt .oo { display: grid; gap: 2px; min-width: 0; }
.rt .o b { font-size: 15px; color: var(--ink-deep); } .rt .o span.on { font-size: 13.5px; color: var(--ink-60); line-height: 1.3; overflow-wrap: anywhere; }
.rt .w { font-size: 13.5px; color: var(--ink-60); line-height: 1.4; }
.rt .a { text-align: right; font: 700 17px/1 var(--disp); color: var(--ink-deep); white-space: nowrap; } .rt .d { text-align: right; font-size: 14.5px; color: var(--ink-60); white-space: nowrap; }
.rt li.reg { background: #FDEDE6; } .rt li.top { background: var(--band-barato-11); }
.rt .lbl { display: inline-block; margin-top: 3px; font: 500 11px/1 var(--font-doc); letter-spacing: .04em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; justify-self: start; }
.rt .lbl { line-height: 1.2; }
.rt li.reg .lbl { background: #fff; color: var(--band-caro); } .rt li.top .lbl { background: var(--band-barato); color: #fff; }
.rt li.rt__more, .rt li.vazio { display: block; }
.rt__more { padding: 8px 18px; text-align: center; }
.rt__more button { min-height: 44px; border: 0; background: none; font: 600 15px/1 var(--font-ui); color: var(--ink-deep); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.vazio { padding: 22px 18px; color: var(--ink-60); }

/* como mudar + FAQ + the source line */
.cm { background: var(--azul); } .cm .tk { color: var(--azul-ink); }
.cm .two > div:first-child { gap: 14px; }
.cm .steps b { font-size: 17px; } .cm .steps li::before { background: #fff; }
.cm .door { margin-top: 6px; }
.cfaq { background: var(--paper); }
.cfaq .gfaq summary small { flex: 1; align-self: center; }
.cfaq .src { display: block; line-height: 1.55; }
.etrust__btn { border: 0; background: none; padding: 10px 0; margin: -10px 0; font: inherit; color: var(--ink-60); text-decoration: underline; cursor: pointer; }

/* the lead form (lead.ts) and the error dialog: energia.css's rules, the form as a dialog over the page */
.ans1 .elead { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30; margin: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; background: #fff; border-radius: 24px; box-shadow: 0 30px 70px rgba(41,18,16,.18); padding: 20px 22px; display: grid; gap: 8px; }
.elead[hidden] { display: none; }
.elead__fundo { display: none; }
.elead__fundo:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 29; background: var(--ink-50); }
.elead__top, .ecard__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.elead__eyebrow { margin: 0; font: 500 12px var(--font-doc); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-60); }
.elead__x, .ecard__x { border: 0; background: var(--cream); border-radius: var(--r-pill); width: 44px; height: 44px; min-width: 44px; flex: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink); }
.elead__texto { margin: 0; color: var(--ink); }
.elead__campo { display: grid; gap: 2px; } .elead__campo[hidden] { display: none; }
.elead__label { font-size: 13px; color: var(--ink-60); }
.elead__input { font: 400 16px var(--font-ui); color: var(--ink); background: #fff; border: 1px solid var(--tint-20); border-radius: 12px; padding: 10px 12px; min-height: 44px; width: 100%; box-sizing: border-box; }
.elead__input:focus-visible { outline: 2px solid var(--peach-ink); outline-offset: 1px; }
.elead__input[aria-invalid="true"] { border-color: var(--band-caro); }
.elead__area { resize: vertical; min-height: 96px; }
.elead__msg { margin: 0; font-size: 13px; color: var(--band-caro); }
.elead__msg:empty, .elead__estado:empty { display: none; }
.elead__consent { margin: 0; font-size: 12.5px; color: var(--ink-60); }
.elead__porque, .elead__como { margin: 0; font-size: 13.5px; color: var(--ink-60); }
.elead__gratis { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.elead__btn { min-height: 48px; border: 0; border-radius: var(--r-pill); background: var(--ink-deep); color: #fff; font: 600 16px/1 var(--font-ui); cursor: pointer; }
.elead__btn:disabled { opacity: .6; cursor: progress; }
.elead__estado { margin: 0; font-size: 14px; }
.elead__ok p { margin: 0 0 6px; }
.elead__partilha a { color: var(--ink); font-weight: 600; }
.elead__copiado { margin-left: 8px; color: var(--ink-60); font-size: 13px; }
.elead__breve { display: block; margin: 0; font-size: 13.5px; color: var(--ink-60); }
.ecard { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; border: 0; border-radius: 24px; padding: 18px 20px; background: #fff; color: var(--ink); box-shadow: 0 30px 70px rgba(41,18,16,.18); font: 400 15px/1.45 var(--font-ui); }
.ecard::backdrop { background: var(--ink-50); }
.ecard__h { margin: 4px 0 0; font: 700 22px/1.2 var(--disp); color: var(--ink-deep); }
.eerro .elead { display: grid; gap: 8px; margin-top: 12px; }
body:has(.elead:not([hidden])) .ask-pill { display: none; }

@media (max-width: 960px) {
  .ch1, .nx3 { grid-template-columns: 1fr; }
  .rt li.rt__h { display: none; }
  .rt li { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 14px; }
  .rt .o { grid-column: 2; } .rt .a { grid-column: 3; grid-row: 1; }
  .rt .w { grid-column: 2 / 4; grid-row: 2; font-size: 13px; } .rt .d { grid-column: 2 / 4; grid-row: 3; text-align: left; font-size: 13px; }
  .rt .d::before { content: attr(data-l) " "; }
}
@media (max-width: 760px) {
  .ans1 .elead { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; max-height: 100dvh; border-radius: 24px 24px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); }
  .ecard { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: 24px 24px 0 0; }
}
@media (max-width: 600px) {
  .ch { padding: 16px 0 28px; } .ch .wrap { padding: 0 16px; }
  .ch .crumbs { display: none; }
  .ch h1 { font-size: 31px; }
  .ch .dek { font-size: 15.5px; line-height: 1.45; }
  .ch1__l { gap: 12px; } .ch1 { gap: 12px; }
  .ch .gmeta { display: none; }
  .tool.q1 { padding: 12px 14px 10px; border-radius: 22px; gap: 6px; box-shadow: 0 12px 30px rgba(41,18,16,.08); }
  .ibar--card { gap: 8px 10px; }
  .ibar--card .f { gap: 4px; } .ibar--card .f > label, .ibar--card .f > legend { font-size: 10.5px; } .ibar--card .f > legend { margin-bottom: 4px; }
  .ibar--card select.in { min-height: 40px; font-size: 15px; padding: 6px 30px 6px 12px; }
  .ibar--card .seg label span { padding: 0 6px; font-size: 13.5px; }
  .q__eco { font-size: 12.5px; }
  .q__eco a { display: inline-block; padding: 9px 0; margin: -9px 0; }
  .ans1 { padding: 16px; border-radius: 22px; gap: 9px; } .ans1__c { gap: 9px; }
  .ans1 .price { font-size: 40px; }
  .ans1 .mes { font-size: 13.5px; }
  .catch { font-size: 14px; padding: 10px 12px; } .save { font-size: 14px; padding: 7px 10px; }
  .lg { width: 56px; height: 36px; } .lg img { max-width: 46px; max-height: 22px; }
  .nx .wrap { padding: 0 16px; } .b.nx, .b.cm, .b.cfaq { padding: 44px 0; }
  .cm .wrap, .cfaq .wrap { padding: 0 16px; }
  .tbx > summary { width: 100%; justify-content: center; box-sizing: border-box; }
  .refl { font-size: 14px; padding: 12px 14px; }
}