/* Pages that are not the walk: signing in, and the client area. They keep the
   site's vocabulary (dark ground, blue rule, the same two typefaces) without
   the scene, because these are places to do something, not to look at. */

.page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(25, 110, 218, 0.14), transparent 62%),
    linear-gradient(180deg, #06070A, #080C14 55%, #06070A);
}
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(53, 73, 107, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 73, 107, 0.16) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(80% 60% at 50% 30%, #000 20%, transparent 78%);
}

.page-main {
  display: grid;
  place-items: center;
  padding: 7rem 0 4rem;
  position: relative;
  z-index: 1;
  /* O `min-width: 0` que um item de grelha nao tem por omissao, e sem o qual
     esta pagina rola de lado num telefone.

     A REGRA, porque ela nao e obvia e custou uma medicao para aparecer: o
     tamanho minimo automatico de um item de grelha e o tamanho do CONTEUDO
     dele, nao zero. `.page` e uma grelha e este `main` e um item dela;
     `.page-main` e outra grelha e o `.sheet` e um item desta. Nenhum dos dois
     conseguia encolher abaixo do que tivesse la dentro.

     No `/blog` ha uma tabela com `min-width: 30rem`, dentro de um `.post-table`
     que tem `overflow-x: auto` precisamente para a rolagem ficar la dentro. Nao
     ficava: o `main` esticava para 507px num viewport de 390, o `.sheet` media
     o seu `100%` contra essa largura ja esticada, e a pagina inteira passava a
     rolar de lado. O `overflow-x: hidden` do body escondia o arrasto no
     computador e nao o esconde no Safari do iPhone.

     Aqui a correccao e da CLASSE e nao da instancia: vale para toda a pagina
     que use `.sheet`, e para o proximo bloco largo que alguem la ponha. */
  min-width: 0;
}

.sheet {
  width: min(30rem, 100% - 2.5rem);
  padding-left: 1.7rem;
  position: relative;
  /* Ver o comentario acima: este e o segundo item de grelha da cadeia, e sem
     ele o primeiro encolhia e este continuava a esticar. */
  min-width: 0;
}
.sheet::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 2px;
  background: linear-gradient(180deg,
    transparent, var(--blue) 16%, #8AC0FF 54%, var(--blue) 78%, transparent);
}
.sheet-wide { width: min(44rem, 100% - 2.5rem); }
.sheet h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.sheet .lead { margin-bottom: 2rem; }

.field { display: grid; gap: 0.5rem; margin-bottom: 1.3rem; }
.field label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7C90B0;
  font-family: var(--font-head);
  font-weight: 600;
}
.field input {
  font: inherit;
  color: var(--text);
  background: rgba(10, 14, 22, 0.8);
  border: 1px solid rgba(140, 175, 225, 0.2);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.field input:focus {
  outline: none;
  border-color: var(--blue-bright);
  background: rgba(12, 18, 30, 0.95);
}
/* 3.29:1 before, which is under AA for the hint that shows what to type. */
.field input::placeholder { color: #8A9AB5; }

.form-note { font-size: 0.86rem; color: var(--muted); margin: 1.2rem 0 0; }

/* One status line does all the talking: sent, failed, signed out. */
.status {
  display: none;
  margin: 1.4rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  font-size: 0.94rem;
  border: 1px solid transparent;
}
.status.is-on { display: block; }
.status.is-ok {
  color: #CFE3FF;
  background: rgba(25, 110, 218, 0.12);
  border-color: rgba(59, 139, 240, 0.32);
}
.status.is-bad {
  color: #FFD9CF;
  background: rgba(218, 70, 40, 0.12);
  border-color: rgba(240, 110, 80, 0.32);
}

.account-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.2rem;
}
.who { font-family: var(--font-head); font-weight: 600; }
.who span { display: block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: #7C90B0; }

.panel-rows { display: grid; gap: 0.9rem; }
.row {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(140, 175, 225, 0.14);
  border-radius: 14px;
  background: rgba(9, 13, 22, 0.6);
}
.row h2 { font-size: 1.05rem; margin: 0; }
.row p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.row-soon { border-style: dashed; opacity: 0.75; }

.page-foot {
  position: relative;
  z-index: 1;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
}
.page-foot .container { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
/* AS LIGACOES DO RODAPE SAO CONTROLOS E NAO TEXTO CORRIDO. Mediam 19 a 23px
   de altura, ou seja abaixo do minimo de 24 da norma, e sao a unica saida desta
   pagina para os termos, a privacidade e o contacto.

   O `padding` vertical e a unica coisa que muda: a letra fica do mesmo tamanho
   e o rodape cresce uns milimetros. As ligacoes que estao DENTRO de uma frase
   nao levam nada, e nao e esquecimento: a propria norma isenta-as, e po-las com
   padding partia a entrelinha do paragrafo onde vivem. */
.page-foot a {
  color: var(--muted);
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.page-foot a:hover { color: var(--text); text-decoration: none; }

/* ------------------------------------------------------------------ plans */

/* Picking a plan is the one thing this page is for, so it gets the room the
   three dead panels used to take. */
.plan-block { margin: 0.4rem 0 0; }
.plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.plan-head h2 { font-size: 1.15rem; margin: 0; }

/* Monthly against yearly. A segmented control, not a dropdown: two options
   are worth showing both at once. */
.plan-switch {
  display: inline-flex;
  padding: 0.22rem;
  gap: 0.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 12, 20, 0.6);
}
.plan-switch button {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.16s ease, background 0.16s ease;
}
.plan-switch button:hover { color: var(--text); }
.plan-switch button[aria-pressed="true"] {
  color: var(--text);
  background: rgba(25, 110, 218, 0.28);
}
.plan-save {
  font-size: 0.74rem;
  font-weight: 700;
  color: #86e0ab;
  margin-left: 0.4rem;
}

.plan-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.4rem 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  position: relative;
}
/* The one being steered towards, marked by light rather than by shouting. */
.plan-card.is-featured {
  border-color: rgba(25, 110, 218, 0.42);
  background:
    radial-gradient(120% 80% at 50% -30%, rgba(25, 110, 218, 0.16), transparent 70%),
    var(--bg-card);
}
.plan-name { font-family: var(--font-head); font-size: 1.2rem; font-weight: 600; margin: 0; }
.plan-tag { color: var(--muted); font-size: 0.88rem; margin: 0; }
.plan-price {
  font-family: var(--font-head);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.2rem 0 0;
}
.plan-per { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.plan-features { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.plan-features li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.45;
}
.plan-features li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.5em;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: var(--blue-bright);
}
.plan-card .btn { margin-top: auto; width: 100%; }
.plan-note {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #f0c674;
}
.plan-current {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: #86e0ab;
  text-align: center;
}

@media (max-width: 720px) {
  /* minmax(0, 1fr), not 1fr: a plain 1fr is minmax(auto, 1fr) and lets the
     column grow past the container to fit its content, which pushed the cards
     off the right of the screen. */
  .plan-grid { grid-template-columns: minmax(0, 1fr); }
  .plan-head { justify-content: flex-start; }
}

/* ------------------------------------------------------------------ legal */

/* Terms and privacy. Long prose, so it gets a measure that is comfortable to
   read and headings that are easy to scan back to. */
.legal { text-align: left; }
.legal h1 { margin-bottom: 0.6rem; }
.legal .lead { margin-bottom: 0.4rem; }
.legal-date { font-size: 0.82rem; color: var(--muted); margin: 0 0 2rem; }
.legal section { margin: 0 0 1.9rem; }
.legal h2 {
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0 0 0.7rem;
}
.legal p, .legal li { color: var(--muted); font-size: 0.94rem; line-height: 1.65; }
.legal p { margin: 0 0 0.8rem; }
.legal ul { margin: 0 0 0.9rem; padding-left: 1.1rem; }
.legal li { margin-bottom: 0.45rem; }
.legal strong { color: var(--text); font-weight: 600; }
/* Underlined, because in a wall of body text the blue alone is only 1.52:1
   against the surrounding words, so colour is doing all the work. */
.legal a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 0.18em; }

/* Who we legally are, as a definition list that stays readable on a phone. */
.legal-ident {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.legal-ident dl {
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr;
  gap: 0.45rem 1rem;
  margin: 0;
}
.legal-ident dt { color: #7C90B0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.legal-ident dd { margin: 0; color: var(--text); font-size: 0.94rem; }
/* Anything company.js could not fill stays visibly unfinished, rather than
   quietly reading as if it were a real answer. */
.legal-ident dd[data-missing] { color: #f0c674; font-style: italic; }

.legal-warn {
  padding: 0.85rem 1rem;
  border: 1px solid rgba(214, 158, 46, 0.45);
  border-radius: 10px;
  background: rgba(214, 158, 46, 0.1);
  color: #f0c674;
  font-size: 0.88rem;
  margin: 0 0 1.6rem;
}
.legal-lang {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}

@media (max-width: 560px) {
  .legal-ident dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .legal-ident dd { margin-bottom: 0.6rem; }
}

/* Announced, not shown: for text that only exists to tell a screen reader
   what just changed. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Was two inline style attributes; moved here so the Content-Security-Policy
   can say style-src 'self' with no unsafe-inline. */
.panel-rows-gap { margin-top: 1.6rem; }
.row-actions-top { margin-top: 2rem; }

/* The statutory withdrawal form. Boxed and monospaced-ish so it reads as a
   thing to fill in and send, not as more prose. */
.legal-form {
  margin-top: 1.4rem;
  padding: 1.1rem 1.2rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(8, 12, 20, 0.5);
}
.legal-form h3 {
  font-family: var(--font-head);
  font-size: 0.98rem;
  margin: 0 0 0.3rem;
}
.legal-form-note { font-size: 0.84rem; font-style: italic; }
.legal-form p { margin: 0 0 0.75rem; font-size: 0.9rem; }
.legal-form [data-missing] { color: #f0c674; font-style: italic; }

/* Net price is the headline; the gross figure sits under it so a consumer can
   see what they would actually pay. */
.plan-vat { margin: -0.35rem 0 0; font-size: 0.78rem; color: var(--muted); }

/* ------------------------------------------------------- área de cliente */
/* A área de cliente passou de página estática a aplicação com sete ecrãs.
   Barra horizontal e não lateral: o CRM é ferramenta de trabalho diária e
   ganha com a lateral, isto visita-se cinco vezes por ano. */

.conta-nav {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.7rem;
}
.conta-nav a {
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.94rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.conta-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.conta-nav a.is-active { color: var(--text); background: var(--blue-soft); }

.conta-h2 { font-family: var(--font-head); font-size: 1.5rem; margin-bottom: 0.5rem; }
.conta-lead { color: var(--muted); margin-bottom: 1.4rem; max-width: 60ch; }
.conta-nota { color: var(--muted); font-size: 0.88rem; margin-top: 0.8rem; }

/* Um valor por preencher aparece por acabar. Zero é uma resposta; "por
   definir" é uma confissão, e é o que a maioria destes campos merece hoje. */
.por-definir { color: #f0c674; font-style: italic; }

.conta-faixa {
  padding: 0.85rem 1rem;
  border-radius: 10px;
  margin-bottom: 1.4rem;
  font-size: 0.94rem;
  border: 1px solid var(--line);
}
.conta-faixa.is-espera { background: rgba(214, 158, 46, 0.12); border-color: rgba(214, 158, 46, 0.4); color: #f0c674; }
.conta-faixa.is-mau { background: rgba(226, 85, 85, 0.12); border-color: rgba(226, 85, 85, 0.45); color: #f0a0a0; }

.conta-dl { display: grid; gap: 0.1rem; }
.conta-dl > div {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr);
  gap: 1rem; padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.conta-dl dt { color: var(--muted); font-size: 0.92rem; }
.conta-dl dd small { color: var(--muted); font-size: 0.82rem; }

.conta-tag {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.76rem;
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
}
.conta-tag.tag-active { background: rgba(74, 222, 128, 0.14); color: #86e0ab; }
.conta-tag.tag-grace, .conta-tag.tag-espera, .conta-tag.tag-pending { background: rgba(214, 158, 46, 0.16); color: #f0c674; }
.conta-tag.tag-suspended, .conta-tag.tag-closed { background: rgba(226, 85, 85, 0.14); color: #f0a0a0; }

.conta-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.conta-plano { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; }
.conta-plano.is-actual { border-color: var(--blue); background: rgba(25, 110, 218, 0.07); }
.conta-plano h3 { font-family: var(--font-head); text-transform: capitalize; margin-bottom: 0.4rem; }
.conta-preco { margin-top: 0.7rem; }
.conta-preco b { font-family: var(--font-head); font-size: 1.4rem; }
.conta-preco span { color: var(--muted); font-size: 0.9rem; }
.conta-preco small { display: block; color: var(--muted); font-size: 0.8rem; }

.conta-tabela { width: 100%; border-collapse: collapse; }
.conta-tabela th {
  text-align: left; padding: 0.6rem 0.7rem;
  font-size: 0.74rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.conta-tabela td { padding: 0.8rem 0.7rem; border-bottom: 1px solid var(--line); }
.conta-tabela .td-money { text-align: right; font-variant-numeric: tabular-nums; }
.conta-tabela small { display: block; color: var(--muted); font-size: 0.76rem; }

.conta-lista { list-style: none; display: grid; gap: 0.2rem; }
.conta-lista li { padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.conta-lista a { text-decoration: none; }
.conta-det { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 0.2rem; }

.conta-fio { list-style: none; display: grid; gap: 0.9rem; margin-bottom: 1.4rem; }
.conta-fio li { padding: 0.9rem 1rem; border-radius: 10px; border: 1px solid var(--line); }
.conta-fio li.de-nos { background: rgba(25, 110, 218, 0.08); border-color: rgba(25, 110, 218, 0.3); }
.conta-fio p { margin-top: 0.35rem; white-space: pre-wrap; }

.conta-form { margin-top: 2rem; display: grid; gap: 0.9rem; max-width: 40rem; }
.conta-form h3 { font-family: var(--font-head); font-size: 1.1rem; }
.conta-form label { display: grid; gap: 0.35rem; font-size: 0.9rem; color: var(--muted); }
.conta-form input, .conta-form textarea, .conta-form select {
  width: 100%; padding: 0.7rem 0.8rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(10, 14, 22, 0.8); color: var(--text);
  font: inherit;
}
.conta-form-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0.9rem; }
.conta-check { display: flex; flex-direction: row; align-items: center; gap: 0.6rem; }
.conta-check input { width: auto; }
.conta-form button { justify-self: start; }

.conta-pe {
  margin-top: 2.5rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  font-size: 0.88rem;
}
.conta-quem { margin-left: auto; color: var(--muted); }

.row-accao { margin-top: 0.9rem; }

@media (max-width: 720px) {
  .conta-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .conta-form-2 { grid-template-columns: minmax(0, 1fr); }
  .conta-quem { margin-left: 0; width: 100%; }
  /* A tabela vira cartões, como no CRM: a três centímetros de largura uma
     tabela esconde a coluna que interessa. */
  .conta-tabela, .conta-tabela tbody, .conta-tabela tr, .conta-tabela td { display: block; width: auto; }
  .conta-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .conta-tabela tr { border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem; margin-bottom: 0.7rem; }
  .conta-tabela td { border-bottom: 0; padding: 0.2rem 0; text-align: left; }
  .conta-tabela .td-money { text-align: left; }
  .conta-tabela td::before {
    content: attr(data-label); display: block;
    color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  }
}

/* --------------------------------------------------------------- /pagar */
/* O valor a pagar é a única coisa nesta página que alguém vai procurar com os
   olhos antes de ler o resto. Tem de se ver sem se ler. */
.pagar-valor {
  font-family: var(--font-display, inherit);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--fg, #f8f7f8);
}
/* O aviso de falha não é vermelho de alarme: quem está a tentar pagar já está
   com a atenção toda aqui, e o que falta é a frase seguinte e não o susto. */
.pagar-erro { color: #f0a0a0; }
/* O botão de escolher um plano, dentro da linha de preço.
 *
 * Fica na linha e não por baixo do cartão de propósito: há dois preços por
 * plano, mensal e anual, e um botão por cartão obrigaria a escolher a
 * periodicidade noutro sítio qualquer. Assim a escolha é uma só, e é onde o
 * número está. */
.conta-preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.conta-escolher {
  margin-left: auto;
  padding: 0.34rem 0.9rem;
  font-size: 0.85rem;
  align-self: center;
}

/* ---------- linhas de preencher ---------- */

/* O formulario-modelo de livre resolucao (Anexo A do DL 24/2014) tem linhas
   para escrever a mao. Estavam escritas com quarenta e seis tracos baixos
   seguidos, e um traco baixo e um caractere como outro qualquer: nao quebra.
   Quarenta e seis deles medem 369px, e num telefone de 320px eram eles que
   faziam a pagina inteira rolar de lado.

   Uma regra desenhada faz o mesmo trabalho e adapta-se: enche a coluna que
   houver, seja ela de 280px ou de 700px. E imprime igual, que e o que importa
   num formulario que existe para ser impresso.

   As palavras do formulario nao mudaram, e nao podiam: sao as que a lei
   prescreve. O que mudou foi a maneira de desenhar um espaco em branco. */
.preencher {
  display: inline-block;
  vertical-align: baseline;
  /* `min-width` e nao `width`: numa coluna estreita encolhe, e nunca abaixo de
     um espaco onde ainda se consegue escrever alguma coisa. */
  min-width: 6rem;
  width: 100%;
  max-width: 26rem;
  height: 1.05em;
  margin-bottom: -0.15em;
  border-bottom: 1px solid var(--line);
}
/* As de data, que sao curtas de proposito: dia, mes, ano. */
.preencher-2 { width: 2.6rem; min-width: 2.6rem; }
.preencher-4 { width: 4.4rem; min-width: 4.4rem; }

/* O grupo dia / mes / ano anda todo junto ou nao anda. Sem isto, numa coluna
   de 265px o dia e o mes ficavam numa linha e o ano saltava para a seguinte
   com uma barra orfa a acompanha-lo, o que se le como um formulario partido e
   nao como um formulario. */
.data-campos { white-space: nowrap; display: inline-block; }

/* Um URL longo nao pode empurrar a coluna. `anywhere` e nao `break-word`:
   `break-word` so parte quando a palavra sozinha nao cabe na LINHA, e deixa
   passar o caso em que ela nao cabe na COLUNA. */
.sheet p, .sheet li, .sheet td, .post p, .post li { overflow-wrap: anywhere; }

/* ---------- o cabecalho das paginas sem cena ---------- */

/* O VEU SOLIDO, e porque e que so aqui.
 *
 * O veu de `styles.css` e um gradiente que comeca a 82% de opacidade e se
 * desfaz antes do fim da faixa. Na viagem isso e exactamente o que se quer: a
 * cena atravessa por tras do menu e a pagina parece uma so, e o que passa por
 * baixo sao linhas finas de desenho, que a 18% nao se leem.
 *
 * Nestas paginas o que passa por baixo e TEXTO CORRIDO. A 18% le-se, e o que
 * se ve e um paragrafo a atravessar o logotipo enquanto se rola. Foi medido no
 * `/termos`, que e a pagina mais longa do site: a partir do segundo ecra, cada
 * linha de texto passa por dentro da marca.
 *
 * E aqui nao ha nada a mostrar por tras, portanto o veu nao custa nada a ser
 * opaco. A linha em baixo nao e decoracao: sem ela a faixa opaca acaba num
 * degrade suave e o olho nao sabe onde e que o cabecalho termina e o documento
 * comeca. */
.page .site-header::before {
  background: linear-gradient(180deg,
    rgba(6, 7, 10, 0.97) 0%,
    rgba(6, 7, 10, 0.95) 72%,
    rgba(6, 7, 10, 0.88) 100%);
  border-bottom: 1px solid rgba(53, 73, 107, 0.28);
}

/* O `backdrop-filter` e um extra e nao a solucao: onde existir, o pouco que
   passasse fica desfocado; onde nao existir, o gradiente acima ja resolveu. */
@supports (backdrop-filter: blur(2px)) {
  .page .site-header::before { backdrop-filter: blur(10px) saturate(1.1); }
}