/* =========================================================
   COMUM. O que se repete em todas as paginas:
   cabeca, botoes, pastilhas, filete de marca e rodape.
   ========================================================= */

/* ---------- Cabeca. Logotipo a 30px, sempre a esquerda, p.25 ---------- */
.cab{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--bd); }
.cab__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--e2); min-height:64px; }
.logo{ display:inline-flex; align-items:center; gap:11px; }
.logo img{ height:30px; width:auto; }
.logo b{ font-size:.95rem; font-weight:700; letter-spacing:-.02em; padding-left:11px; border-left:1px solid var(--bd); }
/* Em ecra estreito o menu em linha fica escondido e quem serve e
   o painel. Nao ha duas listas: e a mesma, escrita uma vez. */
.nav{ display:none; gap:2px; }
.nav a{ padding:8px 13px; border-radius:999px; font-size:.8125rem; font-weight:600; color:var(--tinta-2); }
.nav a:hover,.nav a[aria-current]{ color:var(--azul-txt); background:var(--sup); }

/* ---------- Painel do menu, so em ecra estreito ----------
   Cada item ocupa a largura toda e tem 52px de altura: e um alvo
   que se acerta com o polegar, em pe, a andar. O item actual leva
   um traco a esquerda, para o estado nao depender so da cor. */
.menu-movel{ border-top:1px solid var(--bd); background:var(--fondo); }
.menu-movel .wrap{ display:grid; padding-block:8px; }
.menu-movel a{ display:flex; align-items:center; min-height:52px;
  padding:0 14px; border-left:3px solid transparent;
  font-size:1rem; font-weight:600; color:var(--tinta); }
.menu-movel a:hover{ background:var(--sup); }
.menu-movel a[aria-current]{ border-left-color:var(--azul);
  color:var(--azul-txt); font-weight:700; background:var(--sup); }
.cab__acc{ display:flex; gap:7px; }
.chip{ display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border-radius:999px;
  border:1.5px solid var(--bd-f); background:transparent; color:var(--tinta);
  font-family:var(--f); font-size:.75rem; font-weight:700; cursor:pointer; }
.chip:hover{ border-color:var(--azul); color:var(--azul-txt); }

/* ---------- Botoes e pastilhas, p.28 e p.29.
     Borda toda arredondada, texto centrado, alvo de 48px. ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:var(--tap); padding:0 28px; border-radius:999px;
  font-family:var(--f); font-size:.9375rem; font-weight:700; text-align:center;
  border:1.5px solid transparent; cursor:pointer; }
.btn--c{ background:var(--grad-coral); color:var(--on-coral); border-color:var(--coral); }
.btn--claro{ background:#FFFFFF; color:var(--hondo); border-color:#FFFFFF; }
.btn--linea-b{ background:transparent; color:#FFFFFF; border-color:rgba(255,255,255,.62); }
.btn--linea-b:hover{ background:rgba(255,255,255,.14); border-color:#FFFFFF; }
.btn--p{ background:var(--grad-azul); color:#FFFFFF; border-color:var(--azul); }
.btn--full{ width:100%; }

.pas{ display:inline-flex; align-items:center; justify-content:center; text-align:center;
  min-height:42px; padding:0 20px; border-radius:999px;
  border:1.5px solid var(--bd-f); background:transparent;
  font-size:.875rem; font-weight:700; color:var(--tinta); }
.pas--b{ border-color:rgba(255,255,255,.72); color:#FFFFFF; }
.pas--coral{ background:var(--grad-coral); border-color:var(--coral); color:var(--on-coral); }
.pas--min{ min-height:34px; padding:0 15px; font-size:.75rem; font-weight:600; color:var(--tinta-2); }
.rot{ font-size:.6875rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--azul-txt); }

/* Filete de gradiente da marca */
.filete{ height:14px; border-radius:999px; background:var(--grad-marca); }
.filete--sep{ margin-top:var(--e5); }

/* ---------- Rodape ----------
   Tres colunas de ligacoes e uma linha legal por baixo. Nao repete
   a explicacao do programa: aqui o rodape e saida, nao destino.

   Cada ligacao tem 40px de altura, que e alvo suficiente para o
   polegar sem transformar o rodape num muro. */
.pie{ background:var(--sup); border-top:1px solid var(--bd);
  color:var(--tinta-2); font-size:.8125rem; }
/* O degradado da marca fecha a pagina, colado ao topo do rodape */
.pie__filete{ height:6px; background:var(--grad-marca); }
.pie > .wrap{ padding-block:var(--e6); }

.pie__g{ display:grid; gap:var(--e5); }
/* min-width:0 impede que um link comprido estique a coluna e
   arraste a grelha para fora do ecra no telemovel. */
.pie__col{ min-width:0; }
.pie__col ul{ gap:2px; }
.pie h4{ margin:0 0 12px; font-size:.6875rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3); }
.pie ul{ display:grid; }
.pie li a{ display:flex; align-items:center; min-height:40px; color:var(--tinta-2); }
.pie li a:hover{ color:var(--azul-txt); }
/* Na coluna dos idiomas a saudacao vem primeiro e com peso: e o
   que se reconhece antes de ler o nome da lingua. */
.pie__col--idi b{ color:var(--hondo); font-weight:800; margin-right:8px;
  min-width:64px; display:inline-block; }

.pie__base{ margin-top:var(--e5); padding-top:var(--e4);
  border-top:1px solid var(--bd); display:grid; gap:10px; }
.pie__marca{ display:inline-flex; align-items:center; gap:10px; }
.pie__marca img{ height:22px; width:auto; }
.pie__marca span{ font-size:.875rem; font-weight:700; color:var(--tinta); }
.pie__legal{ font-size:.75rem; line-height:1.6; }
.pie__fecha{ font-size:.6875rem; color:var(--tinta-3); }

@media (min-width:640px){
  .btn--full{ width:auto; }
  /* A coluna dos idiomas leva seis itens contra cinco e tres das
     outras, por isso recebe mais largura. */
  .pie__g{ grid-template-columns:1fr 1.4fr 1fr; gap:var(--e4); }
  .pie__base{ grid-template-columns:auto 1fr; align-items:center;
    column-gap:var(--e4); }
  .pie__base .pie__marca{ grid-row:span 3; align-self:start; }
}
@media (min-width:1000px){
  .nav{ display:flex; }
  /* Com o menu em linha a vista, o botao e o painel saem de cena */
  .chip--menu{ display:none; }
  .menu-movel{ display:none; }
}


}