/* Calculadora grátis (radr.izing.pt/calculadora e as outras línguas). Desenho em design/site/calculadora/.
   Vem depois do inicio.css e usa as mesmas variáveis (temas claro e escuro, cores e fontes): aqui só há o que a calculadora acrescenta. Tudo em rem. */

.calc [hidden]{display:none!important}

/* Cabeçalho da página. */
.calc-cab .dentro{display:flex;flex-direction:column;gap:0.625rem;padding-top:1.5rem;padding-bottom:0.5rem}
.calc-cab h1{font-size:clamp(2rem,5.5vw,3rem);line-height:1.08;letter-spacing:-0.02em}
.migalhas ol{display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem}
.migalhas li{display:flex;align-items:center;gap:0.25rem;font-size:0.8125rem;color:var(--suave)}
.migalhas li+li::before{content:"";width:0.375rem;height:0.375rem;margin-right:0.25rem;border-top:0.125rem solid var(--suave);border-right:0.125rem solid var(--suave);transform:rotate(45deg)}
.migalhas a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--marca);font-weight:600;text-decoration:none}
.migalhas a:hover{text-decoration:underline}
.confianca{display:flex;flex-direction:column;gap:0.25rem;margin-top:0.25rem}
.confianca li{display:flex;align-items:center;gap:0.5rem;font-size:0.9375rem;font-weight:600}
.confianca svg{width:1.125rem;height:1.125rem;color:var(--aceitar)}
.atalho{display:flex;align-items:center;gap:0.625rem;min-height:2.75rem;font-size:0.875rem;font-weight:600;cursor:pointer}
.atalho input{flex:none;width:1.375rem;height:1.375rem;margin:0;accent-color:var(--marca);cursor:pointer}
.atalho input:focus-visible{outline:0.125rem solid var(--marca);outline-offset:0.125rem}
.calc-cab .lead{max-width:44rem;font-size:1.0625rem}

/* Grelha: um bloco por baixo do outro; no computador, os campos à esquerda e o resultado fixo à direita. */
.calc-corpo .dentro{padding-top:1.25rem;padding-bottom:1rem}
.calc-grelha{display:flex;flex-direction:column;gap:1rem}
.campos{display:flex;flex-direction:column;gap:1rem;min-width:0}

.bloco{background:var(--peca);border:1px solid var(--linha);border-radius:1.125rem;padding:1rem;min-width:0}
.b-cab,.bloco>summary{display:flex;align-items:center;gap:0.625rem;min-height:2.75rem}
.bloco h2{font-size:1.0625rem;line-height:1.3;font-weight:700;letter-spacing:0}
.b-cab svg,.bloco>summary svg{width:1.375rem;height:1.375rem;color:var(--marca)}
.b-corpo,.b-corpo>[data-modo]{display:flex;flex-direction:column;gap:0.875rem}
.b-corpo{margin-top:0.75rem}
.opc{font-size:0.8125rem;font-weight:500;color:var(--suave)}

/* Blocos recolhíveis (details): seta à direita, que roda quando abre. O texto «Abrir» e «Recolher» é só para leitores de ecrã. */
.bloco>summary,.perguntas summary{list-style:none;cursor:pointer}
.bloco>summary::-webkit-details-marker,.perguntas summary::-webkit-details-marker{display:none}
.bloco>summary::after,.perguntas summary::after{content:"";flex:none;width:0.5rem;height:0.5rem;margin:0 0.25rem 0 0.25rem;border-right:0.125rem solid var(--suave);border-bottom:0.125rem solid var(--suave);transform:translateY(-0.125rem) rotate(45deg)}
.bloco[open]>summary::after,.perguntas details[open]>summary::after{transform:translateY(0.125rem) rotate(-135deg)}
.bloco>summary .opc{margin-right:auto}
.resumo{margin-left:auto;font-family:var(--mono);font-size:0.8125rem;color:var(--suave);white-space:nowrap}
.bloco[open] .resumo{display:none}
.so-a,.so-f{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
details:not([open]) .so-f,details[open] .so-a{display:none}
.bloco>summary:focus-visible,.perguntas summary:focus-visible{outline:0.125rem solid var(--marca);outline-offset:0.125rem;border-radius:0.5rem}

/* Campos. */
.grupo{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:0.5rem}
.grupo legend{padding:0;margin-bottom:0.5rem;font-size:0.8125rem;font-weight:700;color:var(--suave)}
.par{display:flex;gap:0.75rem}
.campo{display:flex;flex-direction:column;gap:0.375rem;min-width:0;flex:1}
.campo label{font-size:0.875rem;font-weight:600;line-height:1.3}
.caixa{display:flex;align-items:center;gap:0.5rem;min-height:3rem;padding:0 0.75rem;border-radius:0.75rem;border:1.5px solid var(--linha);background:var(--peca)}
.caixa:focus-within{border-color:var(--marca);outline:0.125rem solid var(--marca);outline-offset:0.125rem}
.caixa.com-erro{border-color:var(--recusar)}
.caixa input{flex:1;min-width:0;width:100%;height:2.75rem;padding:0;border:0;outline:0;background:transparent;color:var(--texto);font:inherit;font-size:1.0625rem;font-weight:600;font-variant-numeric:tabular-nums}
.un{font-family:var(--mono);font-size:0.8125rem;color:var(--suave);white-space:nowrap}
.nota{font-size:0.78125rem;line-height:1.4;color:var(--suave)}
.exemplo{font-size:0.8125rem;color:var(--suave)}
.sug{align-self:flex-start;padding:0.25rem 0.625rem;border-radius:999px;background:var(--tinta);color:var(--sobre-tinta);font-size:0.78125rem;font-weight:700}
.erro{display:flex;align-items:flex-start;gap:0.375rem;font-size:0.8125rem;line-height:1.35;font-weight:600;color:var(--recusar)}
.erro svg{width:1rem;height:1rem;margin-top:0.0625rem}

/* Modo do carro: dois botões lado a lado (rádios, por isso as setas do teclado trocam de um para o outro). */
.modos{display:flex;gap:0.25rem;padding:0.25rem;border-radius:0.8125rem;background:var(--neutro)}
.modos label{flex:1;position:relative;display:flex}
.modos input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.modos span{flex:1;display:flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 0.5rem;border-radius:0.625rem;text-align:center;font-size:0.875rem;font-weight:700;color:var(--suave)}
.modos input:checked+span{background:var(--peca);color:var(--texto);box-shadow:0 1px 3px rgb(11 16 38 / 0.18)}
.modos input:focus-visible+span{outline:0.125rem solid var(--marca);outline-offset:0.125rem}

/* Resultado. */
.res{display:flex;overflow:hidden;background:var(--peca);border:1px solid var(--linha);border-radius:1.25rem;scroll-margin-top:1rem}
.res:focus{outline:none}
.faixa{width:0.5rem;flex:none;background:var(--linha)}
.res[data-sinal="ok"] .faixa{background:var(--aceitar)}
.res[data-sinal="pensa"] .faixa{background:var(--pensar)}
.res[data-sinal="nao"] .faixa{background:var(--recusar)}
.res-dentro{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.875rem;padding:1.125rem}
.res-rot{font-family:var(--mono);font-size:0.8125rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--suave)}
.res-vazio{font-size:0.9375rem;color:var(--suave);padding:0.5rem 0 0.25rem}
.res-cheio{display:flex;flex-direction:column;gap:0.875rem}
.res-sinal{display:flex;align-items:center;gap:0.75rem;font-size:1.625rem;line-height:1.15;font-weight:750;letter-spacing:-0.01em}
.res-sinal .sn svg{width:2.125rem;height:2.125rem}
#r-palavra{min-width:0}
/* A forma do sinal: só aparece a do sinal atual (cor, forma e palavra, nunca só a cor). O data-sinal vem do script. */
.sn{display:inline-flex}
.sn>span{display:none}
.res-sinal[data-sinal="ok"] .f-ok,.res-sinal[data-sinal="pensa"] .f-pensa,.res-sinal[data-sinal="nao"] .f-nao,
.barra[data-sinal="ok"] .f-ok,.barra[data-sinal="pensa"] .f-pensa,.barra[data-sinal="nao"] .f-nao,
.tile[data-sinal="ok"] .f-ok,.tile[data-sinal="pensa"] .f-pensa,.tile[data-sinal="nao"] .f-nao{display:flex}
.res-sinal[data-sinal="ok"],.barra[data-sinal="ok"] .b-pal,.barra[data-sinal="ok"] .sn,.tile[data-sinal="ok"] .sn{color:var(--aceitar)}
.res-sinal[data-sinal="pensa"] .sn,.barra[data-sinal="pensa"] .sn,.tile[data-sinal="pensa"] .sn{color:var(--pensar)}
.res-sinal[data-sinal="pensa"],.barra[data-sinal="pensa"] .b-pal{color:var(--pensar-texto)}
.res-sinal[data-sinal="nao"],.barra[data-sinal="nao"] .b-pal,.barra[data-sinal="nao"] .sn,.tile[data-sinal="nao"] .sn{color:var(--recusar)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.625rem}
.tile{min-width:0;padding:0.875rem;border-radius:0.875rem;background:var(--fundo)}
.t-rot{display:flex;align-items:center;gap:0.375rem;font-size:0.8125rem;line-height:1.3;color:var(--suave)}
.t-rot .sn svg{width:1rem;height:1rem}
.t-val{margin-top:0.25rem;font-size:1.5rem;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.t-nota{margin-top:0.125rem;font-size:0.75rem;line-height:1.4;color:var(--suave)}
.res-motivo{font-size:0.9375rem;line-height:1.4;font-weight:600;color:var(--texto)}
.tile.t-minimo{grid-column:1/-1}
.res-convite{font-size:0.875rem;color:var(--suave)}

/* Barra fixa no telemóvel: o sinal e as duas métricas, enquanto o resultado não está à vista. O toque leva ao resultado. */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:0.75rem;min-height:3.5rem;padding:0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom));background:var(--peca);border-top:1px solid var(--linha);box-shadow:0 -0.375rem 1.25rem rgb(11 16 38 / 0.14);color:var(--texto);text-decoration:none}
.barra .sn svg{width:1.5rem;height:1.5rem}
.b-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.b-pal{font-size:0.9375rem;font-weight:700;line-height:1.25}
.b-met{font-family:var(--mono);font-size:0.78125rem;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seta{flex:none;width:0.5rem;height:0.5rem;margin-right:0.375rem;border-left:0.125rem solid var(--suave);border-top:0.125rem solid var(--suave);transform:translateY(0.125rem) rotate(45deg)}
.barra:focus-visible{outline:0.125rem solid var(--marca);outline-offset:-0.25rem}
.calc:has(.barra:not([hidden])) .rodape{padding-bottom:4rem}

/* Secções de baixo. */
.calc-sec{padding:2.25rem 0}
.calc-sec .dentro{display:flex;flex-direction:column;gap:1.25rem}
.calc-sec h2{font-size:clamp(1.5rem,4vw,2rem);line-height:1.15}
.conta-lista{display:flex;flex-direction:column;gap:0.875rem;counter-reset:passo}
.conta-lista li{display:flex;gap:0.75rem;counter-increment:passo;font-size:1rem;line-height:1.5}
.conta-lista li::before{content:counter(passo);flex:none;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--tinta);color:var(--sobre-tinta);font-family:var(--mono);font-size:0.8125rem}
/* Cartão de destaque do fim: cor de marca (a do tema: cobalto no claro, o índigo escuro da tinta no escuro), sombra do site e o
   telemóvel da página inicial à direita (inclinado no computador; no telemóvel vai por baixo do texto, cortado em baixo). */
.convite{--cf:var(--marca);--ct:var(--sobre-marca);display:flex;flex-direction:column;overflow:hidden;border-radius:1.75rem;background:var(--cf);color:var(--ct);box-shadow:var(--sombra)}
:root[data-tema="escuro"] .convite{--cf:var(--tinta);--ct:var(--texto)}
.conv-txt{display:flex;flex-direction:column;align-items:flex-start;padding:1.5rem 1.5rem 0}
.convite .selo{background:var(--sobre-marca);color:var(--marca)}
.convite h2{margin-top:1rem;font-size:clamp(1.75rem,5vw,2.5rem);line-height:1.1;font-weight:750;letter-spacing:-0.02em}
.convite .conv-p{margin-top:0.75rem;font-size:1.0625rem;line-height:1.5;max-width:30rem}
.convite .conv-reg{display:flex;align-items:flex-start;gap:0.5rem;margin-top:0.75rem;max-width:30rem;font-size:0.9375rem;line-height:1.5;font-weight:600}
.conv-reg svg{width:1.25rem;height:1.25rem;margin-top:0.125rem}
.conv-acao{margin-top:1.5rem}
.convite .loja{background:var(--sobre-marca);color:var(--marca);border:0}
.conv-tel{position:relative;display:flex;justify-content:center;align-items:flex-start;height:15rem;margin-top:1.5rem;overflow:hidden}
.conv-tel .montra{flex:none;align-self:flex-start;width:18rem;height:36rem;margin:0;animation:none}
.apps{margin-top:1.5rem}
.convite .apps p{margin:0 0 0.5rem;font-size:0.8125rem;font-weight:700;max-width:none}
.apps ul{display:flex;flex-wrap:wrap;gap:0.5rem}
.apps li{display:flex;align-items:center;gap:0.5rem;min-height:2.75rem;padding:0.25rem 0.875rem 0.25rem 0.375rem;border-radius:999px;background:var(--sobre-marca);color:var(--marca);font-size:0.9375rem;font-weight:700}
.apps img{width:2rem;height:2rem;border-radius:0.5rem}
/* Ícone da Uber nos dois temas, sem JavaScript: o escuro com o tema escuro. */
.ic-escuro{display:none}
:root[data-tema="escuro"] .ic-claro{display:none}
:root[data-tema="escuro"] .ic-escuro{display:block}
.perguntas{display:flex;flex-direction:column;border-top:1px solid var(--linha)}
.perguntas li{border-bottom:1px solid var(--linha)}
.perguntas summary{display:flex;align-items:center;gap:0.75rem;min-height:3.25rem;padding:0.5rem 0}
.perguntas summary h3{flex:1;font-size:1rem;line-height:1.35}
.perguntas summary::after{margin-right:0.5rem}
.perguntas details p{padding:0 0 1rem;font-size:0.9375rem;color:var(--suave)}

/* Cabeçalho: ligação da página atual. */
.secoes a[aria-current="page"]{font-weight:700;border-bottom:0.125rem solid var(--marca);padding-bottom:0.625rem}
.menu a[aria-current="page"]{font-weight:800;color:var(--marca)}

@media (min-width:48rem){
  .calc-cab .dentro{padding-top:2.5rem}
  .calc-cab .lead{font-size:1.125rem}
  .calc-sec{padding:3.5rem 0}
  .calc-sec .dois{display:grid;grid-template-columns:minmax(0,21rem) minmax(0,1fr);gap:3rem}
  .convite{display:grid;grid-template-columns:minmax(0,1fr) 22rem;min-height:27rem}
  .conv-txt{padding:3rem 0 3rem 3rem}
  .conv-tel{height:auto;margin-top:0}
  .conv-tel .montra{position:absolute;top:2.25rem;left:50%;margin-left:-9rem;transform:rotate(6deg);transform-origin:50% 40%}
}

/* Computador: duas colunas, com o resultado fixo à direita ao descer a página. A barra fixa fica só para o telemóvel. */
@media (min-width:60rem){
  .calc-grelha{display:grid;grid-template-columns:minmax(0,1fr) 26.25rem;gap:2rem;align-items:start}
  .res-col{position:sticky;top:1.5rem}
  .barra{display:none}
}

/* Combustível e energia: um só cartão de campos (combustão ou elétrico, país, distância, consumo e preço) e o resultado em linhas. */
.so-corpo>.b-corpo{margin-top:0}
.modos-icone span{gap:0.375rem}
.modos-icone svg{width:1.125rem;height:1.125rem}
.sel{position:relative}
.sel select{flex:1;min-width:0;width:100%;height:2.75rem;padding:0 1.5rem 0 0;border:0;outline:0;background:transparent;color:var(--texto);font:inherit;font-size:1rem;-webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis}
.sel select option{background:var(--peca);color:var(--texto)}
.sel::after{content:"";position:absolute;right:0.875rem;top:50%;width:0.5rem;height:0.5rem;margin-top:-0.375rem;border-right:0.125rem solid var(--suave);border-bottom:0.125rem solid var(--suave);transform:rotate(45deg);pointer-events:none}
.res-linhas .res-dentro{gap:0.5rem;padding:1.375rem}
.r-grande{display:flex;flex-direction:column;gap:0.25rem;margin-top:0.25rem}
.r-leg{font-size:0.875rem;color:var(--suave)}
.r-valor{font-size:2.5rem;line-height:1.1;font-weight:800;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.r-linhas{margin:0.5rem 0 0}
.r-linhas>div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:0.75rem 0;border-top:1px solid var(--linha)}
.r-linhas dt{font-size:0.9375rem;color:var(--suave)}
.r-linhas dd{margin:0;font-size:1.125rem;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Hub das calculadoras: um cartão por ferramenta (o cartão todo leva à ferramenta, pela ligação do título) e, quando o Guia abrir, a faixa do Guia. */
.ferrs{display:grid;grid-template-columns:minmax(0,1fr);gap:1.125rem}
.ferr{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0.75rem;padding:1.375rem;border-radius:1.375rem;background:var(--peca);border:1px solid var(--linha)}
.ferr:hover{border-color:var(--marca)}
.ferr:has(h2 a:focus-visible){outline:0.125rem solid var(--marca);outline-offset:0.125rem}
.ferr-ico{display:flex;align-items:center;justify-content:center;flex:none;width:2.75rem;height:2.75rem;border-radius:0.875rem;background:var(--tinta);color:var(--sobre-tinta)}
.ferr-ico svg{width:1.375rem;height:1.375rem}
.ferr h2{font-size:1.1875rem;line-height:1.25;font-weight:750;letter-spacing:0}
.ferr h2 a{color:var(--texto);text-decoration:none}
.ferr h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ferr h2 a:focus-visible{outline:none}
.ferr p{flex:1;font-size:0.9375rem;line-height:1.5;color:var(--suave)}
.ferr-abrir{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;min-height:2.75rem;padding:0 1.125rem;border-radius:999px;border:1.5px solid var(--linha);background:var(--peca);color:var(--marca);font-size:0.9375rem;font-weight:700;white-space:nowrap;text-decoration:none}
.ferr-abrir svg{width:1.125rem;height:1.125rem}
.ferr-guia{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:1.375rem;border-radius:1.375rem;background:var(--tinta)}
.ferr-guia .ferr-ico{background:var(--peca);color:var(--marca)}
.ferr-guia h2{font-size:1.125rem;line-height:1.3;letter-spacing:0}
.ferr-guia p{font-size:0.9375rem;color:var(--suave)}
@media (min-width:40rem){
  .ferrs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:48rem){
  .ferr-guia{flex-direction:row;align-items:center;gap:1rem}
  .ferr-guia-txt{flex:1}
}
@media (min-width:60rem){
  .ferrs{grid-template-columns:repeat(3,minmax(0,1fr))}
}