/* Guia do motorista (radr.izing.pt/guia e as outras línguas: índice e artigos). Desenho em design/site/guia-calculadoras/ (quadros 3 e 4).
   Vem depois do inicio.css e do calculadora.css e usa as mesmas variáveis (temas claro e escuro): aqui só há o que o Guia acrescenta.
   Sem JavaScript. Tudo em rem. */

/* Cabeçalho do índice e do artigo: migalhas, título, resumo e (no artigo) a linha da data e das fontes. */
.guia-cab .dentro{gap:0.625rem;padding-top:1.5rem;padding-bottom:0}
.guia-cab h1{font-size:clamp(2rem,4vw,2.75rem);line-height:1.1;font-weight:750;letter-spacing:-0.02em}
.guia-cab .lead{max-width:42.5rem;font-size:1.0625rem;line-height:1.5;color:var(--suave)}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.875rem;font-family:var(--mono);font-size:0.8125rem;color:var(--suave)}
.art-meta a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--marca)}

/* Índice: as categorias com artigos, e ao lado (por baixo, no telemóvel) o cartão das calculadoras. */
.guia-grelha{display:flex;flex-direction:column;gap:2.5rem;padding-top:2rem;padding-bottom:2.5rem}
.gcats{display:flex;flex-direction:column;gap:2.5rem;min-width:0}
.gcat h2{padding-bottom:0.5rem;font-size:1.375rem;line-height:1.25;font-weight:750;letter-spacing:0}
.gas{display:flex;flex-direction:column}
.ga{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;align-items:center;padding:1.125rem 0;border-top:1px solid var(--linha)}
.ga :is(h2,h3){grid-column:1;font-size:1.1875rem;line-height:1.3;font-weight:700}
.ga :is(h2,h3) a{color:var(--texto);text-decoration:none}
.ga :is(h2,h3) a::after{content:"";position:absolute;inset:0}
.ga :is(h2,h3) a:focus-visible{outline:none}
.ga:has(:is(h2,h3) a:focus-visible){outline:0.125rem solid var(--marca);outline-offset:0.125rem;border-radius:0.5rem}
.ga:hover :is(h2,h3) a{text-decoration:underline}
.ga p{grid-column:1;margin-top:0.25rem;font-size:0.9375rem;line-height:1.45;color:var(--suave)}
.ga .ga-d{font-family:var(--mono);font-size:0.78125rem}
.ga-seta{grid-column:2;grid-row:1/span 3;color:var(--marca)}
.ga-seta svg{width:1.125rem;height:1.125rem}
.guia-calc{display:flex;flex-direction:column;align-items:flex-start;gap:0.75rem;padding:1.375rem;border-radius:1.25rem;background:var(--tinta)}
.guia-calc .ferr-ico{background:var(--peca);color:var(--marca)}
.guia-calc h2{font-size:1.0625rem;line-height:1.3;font-weight:750;letter-spacing:0}
.guia-calc p{font-size:0.875rem;line-height:1.5;color:var(--suave)}
.guia-calc .ferr-abrir{align-self:stretch}

/* Artigo: o corpo com no máximo 45 rem e, no computador, «Nesta página» à direita. */
.art-grelha{display:flex;flex-direction:column;gap:2rem;padding-top:1.75rem;padding-bottom:2.5rem}
.art-corpo{display:flex;flex-direction:column;gap:1rem;min-width:0;max-width:45rem}
.art-corpo h2{margin-top:0.75rem;font-size:clamp(1.375rem,3vw,1.5rem);line-height:1.25;font-weight:750;letter-spacing:0;scroll-margin-top:1rem}
.art-corpo h3{margin-top:0.5rem;font-size:1.1875rem;line-height:1.3;font-weight:700}
.art-corpo p,.art-corpo li{font-size:1.0625rem;line-height:1.65}
.art-corpo ul,.art-corpo ol{display:flex;flex-direction:column;gap:0.5rem;padding-left:1.375rem}
.art-corpo ul{list-style:disc}
.art-corpo ol{list-style:decimal}
.art-corpo li::marker{color:var(--suave)}
.art-corpo code{font-family:var(--mono);font-size:0.9375em}
.art-corpo .nota-txt{font-size:0.84375rem;line-height:1.4;color:var(--suave)}
.art-corpo .fontes{gap:0.375rem;color:var(--suave)}
.art-corpo .fontes li{font-size:0.9375rem;line-height:1.5}
.art-corpo .aviso{padding-top:0.375rem;border-top:1px solid var(--linha);font-size:0.84375rem;line-height:1.4;color:var(--suave)}

/* Tabela: cartão com cantos redondos; a primeira coluna à esquerda, as outras como a linha de alinhamento pede; a última linha é o total. */
.tabela{overflow-x:auto;border:1px solid var(--linha);border-radius:1rem;background:var(--peca)}
.tabela table{width:100%;border-collapse:collapse}
.tabela th,.tabela td{padding:0.625rem 0.75rem;font-size:0.9375rem;font-weight:400;line-height:1.4;font-variant-numeric:tabular-nums}
.tabela thead th{font-size:0.8125rem;font-weight:700;color:var(--suave)}
.tabela tbody th,.tabela tbody td{border-top:1px solid var(--linha)}
.tabela .esq{text-align:left}
.tabela .dir{text-align:right}
.tabela tr.total th,.tabela tr.total td{border-top-width:2px;font-weight:750}

/* Caixa «Faz a conta»: liga à calculadora relacionada. */
.faz-conta{display:flex;flex-direction:column;align-items:flex-start;gap:0.75rem;padding:1.375rem;border-radius:1.25rem;background:var(--tinta);border:1px solid var(--linha)}
@supports (color:color-mix(in srgb,red,blue)){.faz-conta{border-color:color-mix(in srgb,var(--marca) 20%,transparent)}}
.art-corpo .faz-conta h2{display:flex;align-items:center;gap:0.625rem;margin:0;font-size:1.125rem;line-height:1.3;color:var(--sobre-tinta)}
.faz-conta h2 svg{width:1.375rem;height:1.375rem}
.art-corpo .faz-conta p{font-size:0.96875rem;line-height:1.5}
.art-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;min-height:2.75rem;padding:0 1.125rem;border-radius:999px;background:var(--marca);color:var(--sobre-marca);font-size:0.9375rem;font-weight:700;white-space:nowrap;text-decoration:none}
.art-btn svg{width:1.125rem;height:1.125rem}
.art-btn:focus-visible{outline:0.125rem solid var(--marca);outline-offset:0.1875rem}
.art-btn:hover{text-decoration:underline}

/* «Nesta página»: só no computador (no telemóvel o artigo é curto e as âncoras ficam de fora). */
.art-toc{display:none}
.art-toc .rotulo{font-family:var(--mono);font-size:0.78125rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--suave)}
.art-toc ol{display:flex;flex-direction:column;gap:0.125rem;margin-top:0.5rem}
.art-toc a{display:inline-flex;align-items:center;min-height:2.25rem;color:var(--texto);font-size:0.90625rem;font-weight:500;text-decoration:none}
.art-toc a:hover{color:var(--marca);text-decoration:underline}

/* Artigos relacionados. */
.guia-rel{padding:0.5rem 0 2.5rem}
.guia-rel .dentro{gap:0.875rem}
.guia-rel h2{font-size:1.375rem;line-height:1.25;font-weight:750}
.rels{display:grid;grid-template-columns:minmax(0,1fr);gap:0.75rem}
.rel{position:relative;display:flex;flex-direction:column;gap:0.375rem;padding:1.125rem;border-radius:1.125rem;background:var(--peca);border:1px solid var(--linha)}
.rel:hover{border-color:var(--marca)}
.rel:has(h3 a:focus-visible){outline:0.125rem solid var(--marca);outline-offset:0.125rem}
.rel h3{font-size:1.0625rem;line-height:1.3;font-weight:700}
.rel h3 a{color:var(--texto);text-decoration:none}
.rel h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.rel h3 a:focus-visible{outline:none}
.rel p{font-size:0.90625rem;line-height:1.45;color:var(--suave)}
.rel .rel-cat{font-size:0.8125rem;line-height:1.3}

@media (max-width:30rem){
  .tabela th,.tabela td{padding:0.625rem 0.5rem;font-size:0.875rem}
}
@media (min-width:48rem){
  .guia-cab .dentro{padding-top:2.5rem}
  .guia-cab .lead{font-size:1.125rem}
  .guia-grelha{padding-top:3rem;padding-bottom:4rem}
  .art-grelha{padding-top:2.5rem;padding-bottom:3rem}
  .rels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:60rem){
  .guia-grelha{display:grid;grid-template-columns:minmax(0,1fr) 18.75rem;gap:3rem;align-items:start}
  .guia-calc{position:sticky;top:1.5rem}
  .art-grelha{display:grid;grid-template-columns:minmax(0,45rem) 15rem;gap:4rem;align-items:start}
  .art-toc{display:block;position:sticky;top:1.5rem;padding-left:1.125rem;border-left:2px solid var(--linha)}
}

/* Categoria: lista de artigos e, por baixo, os cartões das outras categorias. */
.gcat h2 a{color:var(--texto);text-decoration:none}
.gcat h2 a:hover{text-decoration:underline}
.cat-numero{font-family:var(--mono);font-size:0.8125rem;color:var(--suave)}
.categoria-conteudo{display:flex;flex-direction:column;gap:2.25rem;padding-top:1.5rem;padding-bottom:2.5rem}
.cat-outras{display:flex;flex-direction:column;gap:0.75rem}
.cat-cab{display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;flex-wrap:wrap}
.cat-outras h2{font-size:1.25rem;line-height:1.3;font-weight:750;letter-spacing:0}
.cat-outras ul{display:grid;grid-template-columns:minmax(0,1fr);gap:0.75rem}
.cat-outras li a{display:flex;align-items:center;gap:0.75rem;padding:1rem 1.125rem;border:1px solid var(--linha);border-radius:1.125rem;background:var(--peca);color:var(--texto);text-decoration:none}
.cat-outras li span{flex:1;display:flex;flex-direction:column;gap:0.125rem}
.cat-outras strong{font-size:1rem;font-weight:700}
.cat-outras small{font-size:0.84375rem;color:var(--suave)}
.cat-outras svg{width:1.125rem;height:1.125rem;color:var(--marca)}
.cat-outras a:hover{text-decoration:underline}
.cat-todo{display:flex;align-items:center;gap:0.375rem;min-height:2.75rem;font-size:0.9375rem;font-weight:700;text-decoration:none}
@media (min-width:48rem){
  .categoria-conteudo{gap:4rem;padding-top:2.5rem;padding-bottom:4.5rem}
  .cat-outras ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}