/* EU DELIVERY ID — destino público.
 *
 * Uma folha, servida da própria origem. Sem tipos de letra remotos: a pilha
 * abaixo é a do sistema, e é a razão por que este site não precisa de pedir
 * um único byte a mais ninguém antes de o visitante escolher medição. Ver `tools/gate-dominio-limpo.mjs`, que mede
 * essa afirmação no grafo de rede real em vez de a acreditar. */

:root {
  --tinta: #10162b;
  --tinta-suave: #47506b;
  --fundo: #ffffff;
  --fundo-suave: #f4f6fb;
  --linha: #dfe4ef;
  --marca: #15306b;
  --largura: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #eef1f8;
    --tinta-suave: #a8b1c8;
    --fundo: #0d1020;
    --fundo-suave: #161b30;
    --linha: #2a3150;
    --marca: #a9c0f5;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 1.0625rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.folha { max-width: var(--largura); margin: 0 auto; }

header.topo {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--linha);
}

header.topo img { height: 2rem; width: auto; display: block; }

nav.linguas { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.9375rem; }
nav.linguas a { color: var(--tinta-suave); text-decoration: none; }
nav.linguas a:hover, nav.linguas a:focus { color: var(--marca); text-decoration: underline; }
nav.linguas a[aria-current="true"] { color: var(--tinta); font-weight: 600; }

h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.2; letter-spacing: -0.02em; margin: 2.5rem 0 0.75rem; }
h2 { font-size: 1.3125rem; line-height: 1.3; margin: 2.75rem 0 0.75rem; }
h3 { font-size: 1.0625rem; margin: 0 0 0.25rem; }

p { margin: 0 0 1rem; }
p.sub { font-size: 1.1875rem; color: var(--tinta-suave); max-width: 34rem; }

a { color: var(--marca); }

.lojas { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; margin: 1.75rem 0 0.5rem; }
.lojas a { display: inline-block; line-height: 0; }
.lojas img { height: 2.875rem; width: auto; display: block; }

.nota { font-size: 0.9375rem; color: var(--tinta-suave); }

ol.passos { list-style: none; margin: 0; padding: 0; }
ol.passos li { padding: 1rem 0; border-top: 1px solid var(--linha); }
ol.passos li p { margin: 0; color: var(--tinta-suave); }

ul.limpa { list-style: none; margin: 0; padding: 0; }
ul.limpa li { padding: 0.75rem 0 0.75rem 1.5rem; border-top: 1px solid var(--linha); position: relative; color: var(--tinta-suave); }
ul.limpa li::before { content: "—"; position: absolute; left: 0; color: var(--linha); }

.caixa { background: var(--fundo-suave); border: 1px solid var(--linha); border-radius: 0.75rem; padding: 1.25rem 1.375rem; margin: 1.5rem 0; }
.caixa p:last-child { margin-bottom: 0; }

footer.rodape { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linha); font-size: 0.9375rem; color: var(--tinta-suave); }
footer.rodape a { color: var(--tinta-suave); }
footer.rodape nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.75rem; }

ul.escolha { list-style: none; margin: 2rem 0; padding: 0; }
ul.escolha li { border-top: 1px solid var(--linha); }
ul.escolha a { display: block; padding: 1rem 0; text-decoration: none; font-size: 1.125rem; }
ul.escolha a:hover, ul.escolha a:focus { text-decoration: underline; }

/* Consentimento — o aviso nasce `hidden` e só o script o mostra. Recusar e
 * aceitar têm o mesmo tamanho, a mesma cor e o mesmo peso: a escolha é do
 * visitante e o desenho não a inclina. */
footer.rodape button.ligacao {
  font: inherit; color: var(--tinta-suave); background: none; border: 0; padding: 0;
  text-decoration: underline; cursor: pointer;
}
.consentimento {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  max-width: var(--largura); margin: 0 auto 1rem; padding: 1.125rem 1.25rem;
  background: var(--fundo); color: var(--tinta);
  border: 1px solid var(--linha); border-radius: 0.75rem;
  box-shadow: 0 0.5rem 2rem rgba(16, 22, 43, 0.18);
  font-size: 0.9375rem;
}
.consentimento p { margin: 0 0 0.75rem; }
.consentimento-titulo { font-weight: 600; }
.consentimento-opcoes label { display: block; padding: 0.5rem 0; border-top: 1px solid var(--linha); color: var(--tinta-suave); }
.consentimento-opcoes strong { color: var(--tinta); }
.consentimento-botoes { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.consentimento-botoes button {
  font: inherit; font-weight: 600; min-width: 8.5rem; padding: 0.625rem 1rem; cursor: pointer;
  color: var(--fundo); background: var(--marca); border: 1px solid var(--marca); border-radius: 0.5rem;
}
.consentimento-botoes button[data-c="escolher"],
.consentimento-botoes button[data-c="guardar"] { color: var(--marca); background: transparent; }
/* ⚠️ Medido no servido a 11/09 (375 px): com três botões, o «Aceitar» caía
 * sozinho numa linha inteira e ficava MAIOR do que o «Recusar». No telemóvel,
 * Recusar e Aceitar partilham a mesma linha, com o mesmo tamanho; Escolher e
 * Guardar ficam por baixo. */
@media (max-width: 30rem) {
  .consentimento { margin: 0; border-radius: 0.75rem 0.75rem 0 0; }
  .consentimento-botoes button { flex: 1 1 40%; min-width: 0; }
  .consentimento-botoes button[data-c="recusar"] { order: 1; }
  .consentimento-botoes button[data-c="aceitar"] { order: 2; }
  .consentimento-botoes button[data-c="escolher"],
  .consentimento-botoes button[data-c="guardar"] { order: 3; flex-basis: 100%; }
}

/* Contas da marca (CC INSPECTOR 026): glifo de 20 px num alvo de 44 px, na cor
 * do texto do rodapé; a margem negativa alinha o glifo, não a caixa. */
ul.redes { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0 0 0.5rem -0.75rem; padding: 0; }
ul.redes a { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; color: var(--tinta-suave); }
ul.redes a:hover { color: var(--marca); background: var(--fundo-suave); }
ul.redes a:focus-visible { color: var(--marca); outline: 2px solid var(--marca); outline-offset: 2px; }
ul.redes svg { display: block; width: 1.25rem; height: 1.25rem; }