/* A página "Vai se mudar?" (/comparar/), na identidade nova e só em tema claro: o mesmo molde da página inicial (o cartão escuro com o número grande,
   um cartão por conta, as etiquetas, "Ver detalhes e fontes" fechado, o rodapé). Os tokens e os componentes comuns (busca, painel, botões) estão em
   base.css. O que vem de css/inicio.css (topo, etiquetas, a variação, as barras, o cartão escuro, os detalhes, o rodapé) está repetido aqui de
   propósito: esta página não baixa o CSS da inicial. Se mudar lá, mude aqui. Os dois lugares têm cada um a sua cor, com papel fixo: verde-água
   para onde a pessoa mora (este lugar, agora) e violeta para o lugar para onde vai (a referência); o nome sempre vai escrito ao lado. */
:root{ --lugar-a:var(--aqua-forte); --lugar-b:var(--violeta-forte); }

body{padding:0}
.pagina{max-width:1160px;margin:0 auto;padding:0 16px 56px}
main{display:grid;gap:28px}
.pular{position:absolute;left:12px;top:-60px;z-index:50;background:var(--botao);color:var(--sobre-botao);padding:10px 16px;border-radius:99px;font-weight:600}
.pular:focus{top:12px}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[tabindex="-1"]:focus{outline:none}

/* ---------- o topo ---------- */
.topo{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.marca-site{display:inline-flex;align-items:center;gap:10px;color:var(--tinta);text-decoration:none}
.marca-site .logo{display:block;width:34px;height:34px}

/* ---------- a pergunta ---------- */
.cp-intro{display:grid;gap:10px;margin:8px 0 0}
.cp-intro h1{font-size:clamp(32px,9vw,52px);line-height:1.04;max-width:16ch}
.cp-intro .lede{font-size:17px;color:var(--tinta-2);max-width:56ch;text-wrap:balance}

/* ---------- os dois lugares, o aluguel de cada um e o kWh ---------- */
.cp-form{display:grid;gap:12px;grid-template-areas:"a" "b" "aj" "k"}
.cp-a{grid-area:a} .cp-b{grid-area:b} .cp-aj{grid-area:aj;margin:0 6px} .cp-kwh{grid-area:k}
.cp-cartao{display:grid;gap:11px;align-content:start;padding:18px 18px 20px;border-radius:26px;background:var(--superficie);border:1px solid var(--linha)}
.cp-cab{display:flex;align-items:center;gap:10px}
.ic-tile{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:var(--aqua-suave);color:var(--aqua);flex:none}
.ic-tile .ic{width:18px;height:18px}
.cp-rot{font:600 15.5px/1.25 var(--display);letter-spacing:-.01em}
.cp-rot-sub{font-weight:600;font-size:14px}
.mini{font-size:12.5px;line-height:1.45;color:var(--tinta-3)}
.cp-cartao .search{max-width:none}
.cp-cartao .search input{height:56px;border-radius:99px;border:1px solid var(--linha-forte);background:var(--superficie);color:var(--tinta);font:500 16px var(--body);padding:0 18px 0 50px;-webkit-appearance:none;appearance:none}
.cp-cartao .search input:focus{border-color:var(--aqua-forte);box-shadow:0 0 0 4px var(--aqua-suave)}
.cp-cartao .search input::-webkit-search-cancel-button{display:none}
.cp-lupa{position:absolute;left:19px;top:28px;transform:translateY(-50%);color:var(--tinta-3);pointer-events:none}
.sugs{z-index:40}
.sugs .uf{font-family:var(--body)}
.cp-linha{display:flex;align-items:center;justify-content:space-between;gap:6px 12px}
.cp-linha-kwh{justify-content:flex-start}
.cp-din{display:flex;align-items:center;gap:8px;color:var(--tinta-2);font-weight:600}
.cp-din span{font:600 15px var(--display)}
.cp-din input{width:100%;max-width:150px;height:44px;border-radius:14px;border:1px solid var(--linha-forte);background:var(--superficie-2);color:var(--tinta);font:600 18px var(--display);padding:0 12px}
.cp-linha:not(.cp-linha-kwh) .cp-din{flex:1 1 130px;justify-content:flex-end}
.cp-kwh .cp-din input{width:104px}
.cp-din input:focus{outline:none;border-color:var(--aqua-forte);box-shadow:0 0 0 4px var(--aqua-suave)}
.cp-erro{color:var(--alta);margin:0}
.cp-cartao p{margin:0}

/* ---------- etiquetas: o estado de um número, com palavra e forma (nunca só cor) ---------- */
.et{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:99px;vertical-align:middle;font:600 12px/1.35 var(--body);letter-spacing:.005em;max-width:100%;
  color:var(--tinta-2);background:var(--superficie-2);border:1px solid var(--linha-forte)}
.et::before{content:"";flex:none;width:8px;height:8px;box-sizing:border-box}
.et-estimativa{color:var(--violeta);background:var(--violeta-suave);border-color:color-mix(in srgb,var(--violeta) 45%,transparent)}
.et-estimativa::before{content:"≈";width:auto;height:auto;font-size:13px;font-weight:700;line-height:.8}
.et-indefinido{background:transparent;border-style:dashed}
.et-indefinido::before{content:"?";width:auto;height:auto;font-weight:700;font-size:11px;line-height:1}
.et-conferir{border-style:dotted;border-width:1.5px;color:var(--tinta)}
.et-conferir::before{background:currentColor;transform:rotate(45deg) scale(.82)}
.et-estado::before{border:1.5px solid currentColor;border-radius:2px}
.et-neutra::before{border:1.5px solid currentColor;border-radius:50%}
.cp-et{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* a variação: seta, palavra e valor ("a mais" em magenta, "a menos" em verde-água, "igual" neutro: a cor só reforça) */
.vr{display:inline-flex;align-items:center;gap:5px;padding:3px 11px 3px 7px;border-radius:99px;font:600 12.5px/1.3 var(--body)}
.vr .ic{width:14px;height:14px;stroke-width:2.3}
.vr-mais{color:var(--alta);background:var(--alta-suave)}
.vr-menos{color:var(--aqua);background:var(--aqua-suave)}
.vr-igual{color:var(--tinta-2);background:var(--superficie-2)}

/* barras: o número está sempre escrito ao lado; a barra só mostra o tamanho */
.br{position:relative;display:block;height:10px;border-radius:99px;background:var(--superficie-3);min-width:0}
.br i{display:block;height:100%;border-radius:inherit}
.br-a i{background:var(--lugar-a)}
.br-b i{background:var(--lugar-b)}
.cp-nome{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;line-height:1.3}
.cp-nome > span{min-width:0;overflow-wrap:anywhere}
.cp-nome i{width:12px;height:12px;border-radius:4px;flex:none}
.k-a{background:var(--lugar-a)} .k-b{background:var(--lugar-b)}

/* ---------- o resultado: o cartão escuro com o número grande ---------- */
.cp-res{display:grid;gap:28px}
.cp-anuncio{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#cp-corpo{display:grid;gap:28px;min-width:0}
#cp-corpo > p{margin:0}
.cp-vazio{padding:20px 18px;border-radius:26px;border:1.5px dashed var(--linha-forte);color:var(--tinta-2);font-size:15px;line-height:1.45}
.hero-card{
  --tinta:#f3f6fb; --tinta-2:#b4bfd0; --tinta-3:#8d9ab0; --aqua:#2ee6d6; --aqua-forte:#2ee6d6; --violeta:#a892ff; --violeta-forte:#a892ff; --alta:#ff7ac8;
  --superficie-2:#1a2130; --superficie-3:#263044; --linha-forte:rgba(255,255,255,.16); --violeta-suave:rgba(168,146,255,.16); --alta-suave:rgba(255,122,200,.16); --aqua-suave:rgba(46,230,214,.14);
  --lugar-a:#2ee6d6; --lugar-b:#a892ff;
  position:relative;overflow:hidden;border-radius:30px;padding:22px 20px 20px;color:var(--tinta);
  background:radial-gradient(120% 75% at 100% -5%,rgba(46,230,214,.24),transparent 58%),radial-gradient(90% 70% at -5% 105%,rgba(168,146,255,.22),transparent 62%),var(--grafite);
  border:1px solid rgba(255,255,255,.1);box-shadow:var(--sombra);display:grid;gap:22px}
.olho{font:600 11.5px/1.3 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3)}
.cp-hero-tit{font:600 22px/1.15 var(--display);letter-spacing:-.015em;margin:8px 0 10px;text-wrap:balance}
.hero-num{font:700 clamp(58px,19.4vw,92px)/.95 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums;display:block;white-space:nowrap}
.hero-num-longo{font-size:clamp(46px,15.2vw,76px)}
.hero-num-texto{font-size:clamp(30px,9vw,44px);line-height:1.06;letter-spacing:-.03em;white-space:normal;margin-top:8px;text-wrap:balance}
.moeda{font-size:.42em;font-weight:600;letter-spacing:0;color:var(--tinta-2)}
.cp-hero-un{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:15px;line-height:1.4;color:var(--tinta-2)}
.cp-hero-un .ic{width:18px;height:18px}
.seta-mais{color:var(--alta)} .seta-menos{color:var(--aqua)}
.cp-tot{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.cp-tot-l{display:grid;gap:7px}
.cp-tot-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cp-tot-v{font:700 24px/1.1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cp-tot-l small{font-size:13px;line-height:1.4;color:var(--tinta-2)}
.comp-obs{margin:14px 0 0;font-size:12.5px;line-height:1.45;color:var(--tinta-3)}
.cp-tot + .comp-obs{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.cp-hero-dir .comp-obs + .comp-obs{margin-top:8px}

/* ---------- um cartão por conta ---------- */
.cp-trilho{display:grid;gap:16px;scroll-margin-top:14px}
.cp-trilho-cab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
.cp-trilho-cab .ic-tile{width:42px;height:42px;border-radius:15px}
.cp-trilho-cab .ic-tile .ic{width:20px;height:20px}
.cp-trilho h2{font:600 23px/1.12 var(--display);letter-spacing:-.02em;text-wrap:balance}
.trilho-tt p{margin-top:3px;font-size:13.5px;line-height:1.4;color:var(--tinta-2)}
.cp-contas{display:grid;gap:12px}
.cp-conta{display:flex;flex-direction:column;gap:12px;padding:18px 18px 20px;border-radius:26px;background:var(--superficie);border:1px solid var(--linha);min-width:0}
.cp-conta-cab{display:flex;align-items:center;gap:10px}
.cp-conta-cab h3{font:600 15.5px/1.25 var(--display);letter-spacing:-.01em;text-wrap:balance}
.cp-conta-cab .mini{margin-top:1px}
.cp-lados{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cp-lado{display:grid;gap:7px;min-width:0}
.cp-lado-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cp-lado-t .cp-nome{color:var(--tinta-2)}
.cp-val{font:700 22px/1.1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cp-pe{display:grid;gap:10px;margin-top:auto}   /* o pé do cartão: a diferença, as etiquetas e as notas ficam embaixo, e as barras alinhadas entre os cartões */
.cp-dif{display:flex;flex-wrap:wrap;gap:6px}
.cp-conta .mini{margin:0}
.cp-conta-soma{background:var(--aqua-suave);border-color:color-mix(in srgb,var(--aqua) 30%,var(--linha))}
.cp-conta-soma .ic-tile{background:var(--superficie)}
.cp-conta-soma .br{background:var(--superficie)}

/* ---------- "Ver detalhes e fontes": fechado; dentro, a cesta, o método e as fontes ---------- */
.cx-det{border:1px solid var(--linha);border-radius:20px;background:var(--superficie)}
.cx-det > summary,.rodape-det > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;min-height:50px;cursor:pointer;list-style:none;font:600 14.5px var(--body);color:var(--aqua)}
.cx-det > summary::-webkit-details-marker,.rodape-det > summary::-webkit-details-marker{display:none}
.cx-det > summary::after,.rodape-det > summary::after{content:"";width:9px;height:9px;flex:none;margin-right:3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.cx-det[open] > summary::after,.rodape-det[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.cx-det-corpo{padding:2px 18px 20px;display:grid;gap:18px}
.dt{display:grid;gap:8px;justify-items:start}
.dt h4{font:600 11.5px/1.3 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3);margin:0}
.dt .mini{font-size:13.5px;line-height:1.55;color:var(--tinta-2);max-width:70ch}
.dt .mini a{font-weight:600}

/* ---------- compartilhar ---------- */
.cp-comp{max-width:560px}
.cp-comp h2{font:600 15.5px/1.25 var(--display);letter-spacing:-.01em}
.share-acoes{display:grid;gap:9px;margin-top:4px}
.ci-retorno{min-height:0;font-size:13px;font-weight:600;color:var(--aqua);margin:0}
.ci-retorno textarea{display:block;width:100%;margin-top:6px;font:13px var(--body);border:1px solid var(--linha-forte);border-radius:12px;padding:8px}

/* ---------- links para o resto e o rodapé ---------- */
.atalhos{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;overflow:visible}   /* base.css faz dos atalhos uma fileira que rola no celular: aqui eles quebram a linha */
.atalhos a{padding:9px 16px;border-radius:99px;border:1px solid var(--linha-forte);background:var(--superficie);color:var(--tinta);font-size:13.5px;font-weight:500;text-decoration:none}
.atalhos a:hover{border-color:var(--aqua-forte)}
.rodape{margin-top:56px;padding-top:24px;border-top:1px solid var(--linha);display:grid;gap:10px;font-size:13.5px;color:var(--tinta-2);max-width:none}
.rodape__autoria{color:var(--tinta)}
.rodape-det{margin-top:6px;border:1px solid var(--linha);border-radius:20px;background:var(--superficie)}
.rodape-corpo{display:grid;gap:12px;padding:2px 18px 20px}
.rodape-corpo p{font-size:13.5px;line-height:1.55}
#gerado{color:var(--tinta-3);font-size:12.5px}

/* ---------- telas maiores ---------- */
@media (min-width:640px){
  .cp-form{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a b" "aj aj" "k .";column-gap:12px}
  .hero-card{padding:28px 28px 24px}
  .share-acoes{display:flex;flex-wrap:wrap}
}
@media (min-width:760px){
  .cp-contas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-conta-soma{grid-column:1 / -1}
  .cp-conta-soma .cp-lados{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
}
@media (min-width:960px){
  .pagina{padding:0 32px 72px}
  main{gap:36px}
  .topo{height:88px}
  .marca-nome{font-size:20px}
  .cp-intro{margin-top:18px}
  .cp-form{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"a b k" "aj aj aj"}
  .hero-card{padding:40px 40px 34px;border-radius:36px;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center}
  .cp-hero-tit{font-size:28px}
  .hero-num{font-size:clamp(84px,9.4vw,120px)}
  .hero-num-longo{font-size:clamp(66px,7.4vw,92px)}
  .hero-num-texto{font-size:clamp(38px,4vw,54px)}
  .cp-hero-un{font-size:16px}
  .cp-tot-v{font-size:28px}
  .cp-trilho h2{font-size:28px}
  .cp-contas{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .rodape{margin-top:80px;grid-template-columns:1fr 1fr;gap:12px 40px}
  .rodape-det{grid-column:1 / -1}
}
@media (max-width:359px){   /* telas de 320 px: o valor em reais de R$ 1.000 em diante precisa de letra um pouco menor para não encostar no nome do lugar */
  .cp-val{font-size:19px}
  .cp-tot-v{font-size:21px}
}