/* ====================================================================================================
   ACABAMENTO («premium»): movimento discreto e pequenos detalhes. Carregado depois de sistema.css.
   Regras: nada anima propriedades de layout (só opacidade, transformação, sombra e cor); durações de 150 a 400 ms com a mesma curva;
   tudo o que se move respeita «reduzir movimento»; nenhum elemento muda de tamanho (sem saltos de página).
   ==================================================================================================== */
:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --d-1:.15s;--d-2:.25s;--d-3:.4s;
  interpolate-size:allow-keywords;
}

/* 1) âncoras: salto suave com o rato ou o dedo (os títulos já têm margem própria para não ficarem por baixo do cabeçalho fixo). Com o teclado (classe .teclado, posta por premium.js) a rolagem é imediata:
   senão o foco rolava devagar e o bloco «foco nunca tapado» media a meio da animação. Só depois de a pessoa tocar ou clicar (classe .suave, posta por premium.js): uma ligação com # partilhada por
   alguém tem de abrir já no sítio, e não a deslizar durante dois segundos desde o topo do guia (11/10/2026) */
@media (prefers-reduced-motion:no-preference){html.suave:not(.teclado){scroll-behavior:smooth}}

/* 2) cabeçalho fixo em «vidro» e com sombra suave depois de rolar (a classe .rolou é posta por premium.js) */
nav.main{transition:box-shadow var(--d-2) var(--ease),background-color var(--d-2) var(--ease),transform .22s ease}
nav.main.rolou{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);box-shadow:0 1px 0 rgba(15,23,42,.06),0 12px 28px -20px rgba(15,23,42,.4)}

/* 3) números alinhados (os algarismos têm todos a mesma largura: as colunas alinham e os valores não «tremem» quando mudam) */
table td,table th,.rgrid b,.rgrid .destaque b,.rbig,.chart-legend-item .val,.cmpbar-val,.res-fixa .v,.di-hoje b,.tbl td{font-variant-numeric:tabular-nums}

/* 4) o resultado principal muda com uma pequena animação (premium.js põe a classe .atualizou quando o texto muda) */
@keyframes cf-tick{from{opacity:.3;transform:translateY(7px)}to{opacity:1;transform:none}}
.rbig.atualizou,.rgrid b.atualizou,.res-fixa .v.atualizou{animation:cf-tick .3s var(--ease)}

/* 5) botões, chips, ligações-botão e cartões: resposta tátil ao passar o rato e ao carregar */
.btn,.cf-btn,.news-pill,.hero-rel,.cookie-btn,.di-btn,.dv-btn,.ver-mais-btn,.cmp-more,.pdf-top,.pdf-abrir,header.art-head nav.toc a,.res-fixa button,.nota-mais,.ctab,.tab,.filt{
  transition:transform var(--d-1) var(--ease),background-color var(--d-2) ease,border-color var(--d-2) ease,box-shadow var(--d-2) var(--ease),color var(--d-2) ease}
.btn:hover,.cf-btn:hover,.news-pill:hover,.cookie-btn:hover,.di-btn:hover,.dv-btn:hover,.ver-mais-btn:hover,.cmp-more:hover,.pdf-abrir:hover,header.art-head nav.toc a:hover{transform:translateY(-1px)}
.btn:active,.cf-btn:active,.news-pill:active,.hero-rel:active,.cookie-btn:active,.di-btn:active,.dv-btn:active,.ver-mais-btn:active,.cmp-more:active,.pdf-abrir:active,.res-fixa button:active,header.art-head nav.toc a:active{transform:translateY(1px) scale(.985)}
.news-pill{box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 14px -8px rgba(16,185,129,.7)}
.guide,.rel-card,.m-item{transition:transform var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease),border-color var(--d-2) ease}
.guide:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(15,23,42,.38)}

/* 6) campos: halo suave ao ganhar o foco (o contorno de teclado e das cores forçadas mantém-se) */
.in-row input,.in-row select{transition:box-shadow var(--d-2) var(--ease),border-color var(--d-2) ease}
.in-row input:focus,.in-row select:focus{box-shadow:0 0 0 4px rgba(16,185,129,.18)}

/* 7) painel de resultados com um pouco de profundidade */
.result{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -26px rgba(2,6,23,.6);background-image:radial-gradient(120% 90% at 100% 0%,rgba(16,185,129,.11),transparent 55%)}

/* 8) secções «Ver mais» abrem e fecham com suavidade (nos browsers que o permitem; nos outros, abrem de imediato) */
details.ver-mais::details-content{block-size:0;overflow:clip;transition:block-size var(--d-3) var(--ease),content-visibility var(--d-3) allow-discrete}
details.ver-mais[open]::details-content{block-size:auto}
details.ver-mais.abrir-ja::details-content{transition:none}   /* aberto por uma ligação com # (guide.js, «abrirAlvo»): abre já, sem animação, para o salto ver a altura final da página */

/* 9) aviso de cookies e cartão do PDF: entram por baixo */
@keyframes cf-subir{from{transform:translateY(100%)}to{transform:none}}
.cookie-bar.show{animation:cf-subir .4s var(--ease)}

/* 10) passagem entre páginas: o conteúdo faz uma transição suave e o cabeçalho fica no sítio (browsers com «view transitions»).
   A ADESÃO («@view-transition{navigation:auto}», só com movimento normal) NÃO está aqui: está num <style> dentro do <head> de cada página, antes das folhas de estilos. Numa folha de estilos que chega pela rede,
   ao «Voltar» o Chromium aborta a passagem («Transition was aborted because of invalid state. ViewTransition opt-in disabled») quando a folha chega depois de a passagem começar (medido a 11/10/2026:
   19 em 24 tentativas; com a adesão no HTML, 0 em 24, e a passagem chega ao fim). Há um teste que exige a regra em todas as páginas (cenário C22). */
@media (prefers-reduced-motion:no-preference){
  nav.main{view-transition-name:cabecalho}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:var(--ease)}
}

/* 11) pormenores de leitura: parágrafos sem linhas órfãs, ligações com sublinhado mais fino e afastado do texto, seleção na cor da marca */
.art-body p,.art-body li,.sim-intro,.lead{text-wrap:pretty}
.art-body a:not([class]),.sim-intro a,.disclaim a{text-underline-offset:.2em;text-decoration-thickness:1px;transition:text-decoration-color var(--d-2) ease,color var(--d-2) ease}
.art-body a:not([class]):hover{text-decoration-thickness:2px}
::selection{background:rgba(16,185,129,.28);color:inherit}

/* 12) impressão e «guardar em PDF»: só o texto do artigo (sem menus, avisos, botões nem caixas fixas), cabeçalho a preto e branco, endereço das fontes à vista */
@media print{
  nav.main,.skip-link,#cookieBar,.cookie-bar,.pdf-offer,.pdf-offer-static,.news-strip,.res-fixa,.toc-act,nav.toc,.exit-overlay,.mobile-nav,.hero-rel,.pdf-top,.cf-painel,.nota-mais,.reveal-btn{display:none!important}
  html,body{background:#fff!important}
  header.art-head{background:#fff!important;color:#000!important;border-bottom:2px solid #000;padding:0 0 10px!important}
  header.art-head::before,header.art-head::after{display:none!important}
  header.art-head h1,header.art-head .art-cat,header.art-head .art-meta{color:#000!important}
  main.art-body .wrap.art-grid{display:block!important;max-width:none!important;box-shadow:none!important;border:0!important;padding:0!important;background:#fff!important}
  .result{background:#fff!important;color:#000!important;border:1px solid #888!important;box-shadow:none!important;position:static!important}
  .result *{color:#000!important}
  .art-body a[href^="http"]::after{content:" (" attr(href) ")";color:#444;overflow-wrap:anywhere}
  h2,h3,h4{break-after:avoid} figure,.callout,.warn,.box-card,.rgrid,.disclaim-box,tr{break-inside:avoid} thead{display:table-header-group}   /* as tabelas partem-se entre páginas (só as linhas não); uma tabela longa a «não partir» deixava a página anterior meio vazia */
  /* comparadores: o bloco escuro e a tabela imprimem a preto e branco */
  .cmp-block,.cmp-block .cmp-wrap{background:#fff!important;border:1px solid #888!important;border-radius:0!important;overflow:visible!important}
  .cmp-block *{color:#000!important;background:transparent!important}
  /* o texto das linhas de «Detalhes» (garantia, custo, risco, para quem serve) sai impresso; o botão «Detalhes», que no papel não faz nada, não */
  tr.cmp-det[hidden]{display:table-row!important}
  .cmp-more{display:none!important}
  .cmp-block tbody tr:not(.cmp-det){break-after:avoid}   /* o produto e os seus «Detalhes» ficam na mesma página */
  .cmp-block tr.cmp-det{break-before:avoid}
  .qa .ans{max-height:none!important;visibility:visible!important}
  /* o que está recolhido no ecrã sai impresso: secções «Ver mais» (premium.js também as abre antes de imprimir, para os browsers que escondem o conteúdo de outra forma),
     notas, introdução cortada e blocos que só aparecem ao rolar */
  details.ver-mais::details-content{block-size:auto!important;overflow:visible!important;content-visibility:visible!important;transition:none!important}
  .nota-resto{display:inline!important}
  .nota-rotulo{display:block!important}
  .sim-intro.cortada{display:block!important;overflow:visible!important}
  .reveal{opacity:1!important;transform:none!important}
  *{box-shadow:none!important;text-shadow:none!important}
}

/* movimento reduzido: tudo parado */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  details.ver-mais::details-content{transition:none!important}   /* o ::details-content não é apanhado pelo * acima */
}