/* O QUE AS PÁGINAS DA CASA PARTILHAM ALÉM DO CABEÇALHO: O FUNDO, OS BOTÕES E
   AS LIGAÇÕES. UMA FONTE, OITO PÁGINAS.
   ======================================================================

   🔴 PORQUE EXISTE, medido a 2/11/2026 (brief 87): o blogue parecia um site à
   parte. Havia DOIS desenhos de botão para a mesma coisa (`.btn.primary` no
   site, `.cn-botao` no blogue), e o próprio site tinha TRÊS (a home, o 404 e as
   páginas legais, cada um com a sua altura). O fundo estava escrito SEIS vezes
   no site e uma sétima, com outra geometria, no blogue. Cada correcção tinha de
   ser feita em sete sítios, e nunca foi.

   ⬜ QUEM O CARREGA: as seis páginas do `site/` pelo `<link>` que o
   `_cabecalho.html` estampa, e o blogue pelo `@import` do `blogue.css`. **É o
   mesmo ficheiro nos dois lados**, lido do disco na construção da app: não há
   cópia nenhuma para manter.

   ⚠️ AS CORES SÃO ESCRITAS AQUI, E NÃO LIDAS DE VARIÁVEIS DA PÁGINA, de
   propósito e pela mesma regra do `_cabecalho.css`: **uma parte partilhada tem
   de ser imune ao CSS da página que a recebe.** O `--brand` do backoffice é a
   cor do CLIENTE, e um `var(--brand)` aqui pintava o botão da casa com ela no
   dia em que alguém voltasse a carregar o `globals.css` numa página pública.
   Os valores são os do `:root` do `site/index.html`.

   🔴 E NENHUMA REGRA DE PASSAR O RATO VIVE FORA DO `@media (hover:hover)`. No
   telemóvel, um toque deixa o `:hover` preso ao elemento até se tocar noutro
   sítio, e o que se via era um botão levantado ou uma ligação acesa depois de a
   pessoa já ter saído dela. O foco do teclado vive fora, porque o teclado não
   depende do rato. */

/* -------------------------------------------------------------------------- */
/* O FUNDO                                                                     */
/* -------------------------------------------------------------------------- */

/* ⬜ O DA HOME, que as seis páginas do site já tinham igual. O do blogue tinha
   os mesmos tons noutra geometria (60% em vez de 42%, a 12% em vez de 10%), e
   lado a lado via-se: o brilho de cima caía noutro sítio. */
body{
  background:
    radial-gradient(42% 34% at 10% 2%, #00d2ff26 0%, transparent 55%),
    radial-gradient(42% 40% at 92% 3%, #00d2ff1c 0%, transparent 55%),
    radial-gradient(60% 44% at 50% 100%, #00d2ff1f 0%, transparent 62%),
    linear-gradient(150deg,#04222e 0%,#053a4d 55%,#042732 100%);
  background-attachment:fixed;
}
/* No telemóvel o `fixed` dá solavancos no iOS e chega a deixar faixas por
   pintar. Passa a `scroll`, e a cor de base garante que não há corte nenhum
   onde o degradé acabar. */
@media (max-width:720px){
  body{background-attachment:scroll;background-color:#042732}
}

/* -------------------------------------------------------------------------- */
/* OS BOTÕES: DOIS MODELOS, E MAIS NENHUM                                      */
/* -------------------------------------------------------------------------- */

/* 🔴 A ALTURA É CONTADA E NÃO HERDADA. 22 de entrelinha, mais 10 de margem em
   cima e em baixo, mais 1 de borda de cada lado, dá 44: o alvo de um dedo.

   ⚠️ E A CONTA TEM DE SER FECHADA AQUI porque, sem ela, o botão herdava a
   entrelinha da página: medido a 2/11/2026, o mesmo `.btn` dava 48px na home
   (1,6) e o `.cn-botao` dava 44,5 no blogue e 46,5 no fantasma, que tinha
   borda e o cheio não. **A borda transparente no principal é o que põe os dois
   modelos à mesma altura.**

   ⬜ O `font-family:inherit` É O QUE TIRA O ARIAL DO "ENVIAR PEDIDO". Um
   `<button>` não herda a letra da página se ninguém lho disser: o browser dá-lhe
   a dele. Uma ligação herda, e por isso o defeito só se via no formulário. */
.cnm-botao{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-sizing:border-box;min-height:44px;margin:0;
  padding:10px 20px;border:1px solid transparent;border-radius:12px;
  font-family:inherit;font-size:15px;font-weight:600;line-height:22px;letter-spacing:normal;
  text-align:center;white-space:nowrap;cursor:pointer;
  color:#04222e;background:#00d2ff;
  box-shadow:0 8px 30px rgb(0 210 255 / 22%);
  transition:transform .15s,box-shadow .2s,border-color .2s,color .2s;
}

/* 🔴 O SUBLINHADO ANULA-SE EM TODOS OS ESTADOS, E NÃO SÓ NO PARADO. Era a lição
   do `.cn-botao` do blogue: o `globals.css` da app sublinhava qualquer ligação
   ao passar, o botão só se defendia parado, e no telemóvel o sublinhado ficava
   preso depois de um toque. */
.cnm-botao,
.cnm-botao:hover,
.cnm-botao:focus,
.cnm-botao:focus-visible,
.cnm-botao:active{
  text-decoration:none;
}

/* O PRINCIPAL, AO PASSAR: sobe 2px e a sombra cresce. O site nunca mudou a cor
   do botão ao passar; muda a altura e o brilho. */
.cnm-botao:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 12px 40px rgb(0 210 255 / 34%);
}
@media (hover:hover){
  .cnm-botao:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 40px rgb(0 210 255 / 34%);
  }
}

/* O SECUNDÁRIO: vidro com borda fina, e ao passar a borda e o texto passam a
   ciano. Não levanta do chão.

   ⚠️ E DEFENDE-SE EM CADA ESTADO ONDE A BASE MUDA ALGUMA COISA. A conta de
   especificidade é a do fantasma do blogue: `.cnm-botao:hover` vale 0,2,0 e
   `.cnm-botao--secundario` vale 0,1,0, portanto ao passar a base ganhava e o
   secundário virava um botão cheio. **Um modificador que muda uma propriedade
   tem de a voltar a mudar em cada estado onde a base também a muda.** */
.cnm-botao--secundario{
  color:#eaf5f8;
  background:#ffffff0b;
  border-color:#ffffff1f;
  box-shadow:none;
}
.cnm-botao--secundario:focus-visible{
  color:#00d2ff;
  background:#ffffff0b;
  border-color:#00d2ff;
  box-shadow:none;
  transform:none;
}
@media (hover:hover){
  .cnm-botao--secundario:hover{
    color:#00d2ff;
    background:#ffffff0b;
    border-color:#00d2ff;
    box-shadow:none;
    transform:none;
  }
}

/* -------------------------------------------------------------------------- */
/* AS LIGAÇÕES QUE NÃO SÃO BOTÕES                                              */
/* -------------------------------------------------------------------------- */

/* 🔴 NUNCA UM FUNDO OPACO. O preto que o João viu no índice de um artigo era a
   receita das ligações do backoffice (`a:hover:where(:not(:empty))`, no
   `globals.css`) a chegar a uma página pública. Aqui a ligação de texto muda
   de COR e mais nada: passa a branco, como no rodapé.

   ⬜ O `:where()` CONTA ZERO, e é de propósito: a regra fica com o peso de um
   `a:hover` (0,1,1), e qualquer página ou parte que diga mais do que isto
   (o menu, o rodapé, o índice do blogue) continua a mandar nas suas. */
a:where(:not(.cnm-botao)):focus-visible{color:#eaf5f8}
@media (hover:hover){
  a:where(:not(.cnm-botao)):hover{color:#eaf5f8}
}

/* O CONTORNO DO FOCO, o mesmo em tudo o que se carrega. O do browser era um
   anel de outra cor em cada sistema, e no fundo teal mal se via. */
:where(a,button):focus-visible{
  outline:2px solid #00d2ff;
  outline-offset:3px;
}

/* -------------------------------------------------------------------------- */
/* OS CAMPOS DE UM FORMULÁRIO                                                  */
/* -------------------------------------------------------------------------- */

/* 🔴 VIERAM DA HOME A 2/11/2026 (brief 88), e vieram para aqui porque a lista
   desenhada tem de ser IGUAL aos outros campos: com o campo escrito na página e
   a lista escrita aqui, eram duas versões do mesmo campo a três ecrãs uma da
   outra. Qualquer formulário que o site ou o blogue venham a ter fica com eles
   sem ninguém se lembrar.

   ⬜ OS TIPOS QUE NÃO SÃO CAIXAS DE TEXTO SAEM POR EXCLUSÃO, e não se lista o
   que entra: um `type` novo é uma caixa de texto até alguém dizer o contrário.

   ⬜ E O `:where()` CONTA ZERO: uma página que precise de um campo diferente
   (o `textarea` mais alto, o erro a vermelho) diz-o com uma regra simples e
   ganha.

   🔴 16px E NÃO 15, E NÃO É GOSTO: abaixo de 16 o Safari do iPhone AMPLIA a
   página ao tocar num campo, e quem está a escrever fica com o formulário fora
   do ecrã. Medido na home a 17/10/2026: era 15 em todos os campos a 390px. */
:where(input:not([type=checkbox],[type=radio],[type=hidden],[type=submit],[type=button],[type=reset],[type=image],[type=range],[type=color],[type=file]),textarea,select,.cnm-lista-campo){
  box-sizing:border-box;width:100%;margin:0;
  background-color:rgba(255,255,255,.05);
  border:1px solid #ffffff1f;border-radius:10px;
  padding:11px 13px;
  color:#eaf5f8;font:inherit;font-size:16px;
}
:where(input,textarea,select,.cnm-lista-campo):focus{outline:none;border-color:#00d2ff}

/* -------------------------------------------------------------------------- */
/* A LISTA DE ESCOLHA                                                          */
/* -------------------------------------------------------------------------- */

/* 🔴 O DEFEITO QUE A TROUXE, medido em produção a 2/11/2026: a lista do "O que
   procura?" abria BRANCA com as opções escritas no branco da casa por cima. Só
   se lia a que estava sob o rato. O `select` tinha `color-scheme: normal`, o
   sistema desenhava a lista clara, e a cor do texto vinha herdada do site
   escuro.

   ⬜ AS DUAS METADES DA CURA, e são as duas precisas:
     - o `color-scheme: dark` faz o sistema desenhar a lista ESCURA, que é a que
       fica no telemóvel e num computador sem JavaScript;
     - a cor de fundo e de texto em cada opção, porque há sistemas que ignoram o
       `color-scheme` na lista aberta e pintam a opção com o que ela declarar.

   ⬜ A SETA É DESENHADA AQUI, a ciano, e não a do sistema, que era preta num
   Windows e cinzenta num Mac. Um desenho em SVG e não uma letra, que mudava de
   tamanho com a letra de cada sistema. */
select,
.cnm-lista-campo{
  -webkit-appearance:none;appearance:none;
  color-scheme:dark;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2300d2ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  cursor:pointer;
}
select option{background-color:#04222e;color:#eaf5f8}

/* 🔴 A LISTA DESENHADA, SÓ COM RATO. O `_campos.js` constrói-a por cima de cada
   `select` quando o aparelho tem rato (`hover:hover` e `pointer:fine`), e o
   `select` verdadeiro fica lá dentro, escondido mas inteiro: é ele que o
   formulário envia e valida. No telemóvel fica a lista do próprio telefone,
   que é a que as pessoas conhecem, já escura pela regra de cima.

   ⚠️ O CAMPO FECHADO TEM A ALTURA DOS OUTROS PORQUE TEM A MESMA ENTRELINHA: é
   um `div`, e herda a da página como a caixa de texto ao lado. */
.cnm-lista{position:relative}
.cnm-lista-nativa{
  position:absolute;left:0;bottom:0;width:1px;height:1px;
  margin:0;padding:0;border:0;opacity:0;pointer-events:none;
}
.cnm-lista-campo{
  display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  user-select:none;
}
.cnm-lista-campo[aria-expanded="true"]{border-color:#00d2ff}

/* ⬜ O PAINEL ABERTO É UM FUNDO SÓLIDO, e é a única superfície opaca que uma
   página pública acende: fica por cima do formulário e tem de se ler. É o azul
   mais escuro da casa, o mesmo do texto por cima do ciano, com a borda fina e
   a sombra dos cartões. */
.cnm-lista-painel{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;
  box-sizing:border-box;margin:0;padding:6px;list-style:none;
  max-height:min(320px,60vh);overflow-y:auto;
  background:#04222e;
  border:1px solid #ffffff1f;border-radius:12px;
  box-shadow:0 18px 50px rgb(0 0 0 / 45%);
  color-scheme:dark;
}
.cnm-lista-painel[hidden]{display:none}
.cnm-lista--acima .cnm-lista-painel{top:auto;bottom:calc(100% + 6px)}

/* A OPÇÃO SOB O RATO OU O TECLADO tem o ciano translúcido do índice do blogue,
   e é uma classe posta pelo guião e não um `:hover`: o rato e as setas mexem a
   MESMA opção acesa, e nunca ficam duas acesas ao mesmo tempo. */
.cnm-lista-opcao{
  position:relative;
  display:flex;align-items:center;
  box-sizing:border-box;min-height:44px;margin:0;
  padding:10px 40px 10px 12px;border-radius:8px;
  color:#eaf5f8;font-size:15px;line-height:22px;
  cursor:pointer;
}
.cnm-lista-opcao.cnm-acesa{
  background:rgb(0 210 255 / 7%);
  box-shadow:inset 0 0 0 1px rgb(0 210 255 / 22%);
}
/* A ESCOLHIDA leva um visto ciano desenhado, à direita, onde a seta do campo
   fechado estava. */
.cnm-lista-opcao[aria-selected="true"]::after{
  content:"";position:absolute;right:14px;top:50%;
  width:14px;height:11px;margin-top:-5.5px;
  background:#00d2ff;
  clip-path:polygon(14% 44%,0 62%,40% 100%,100% 18%,86% 4%,39% 70%);
}

/* -------------------------------------------------------------------------- */
/* A CAIXA DE MARCAR E A DE ESCOLHA                                            */
/* -------------------------------------------------------------------------- */

/* 🔴 A DO SISTEMA ERA A DO SISTEMA, medido a 2/11/2026: `appearance: auto`,
   18px e o azul do Windows quando marcada, ao lado de um botão ciano. Passa a
   ser desenhada aqui, e continua a ser um `<input>` de verdade: obrigatória,
   lida pelos leitores de ecrã, e marcada ao clicar no texto do `<label>`.

   ⬜ O VISTO É UM DESENHO E NÃO UMA LETRA: um "✓" vinha da letra que o sistema
   tivesse, e o Inter da casa não o tem. Entra com uma transição curta. */
input:is([type=checkbox],[type=radio]){
  -webkit-appearance:none;appearance:none;
  box-sizing:border-box;width:22px;height:22px;margin:0;flex:0 0 auto;
  display:inline-grid;place-content:center;vertical-align:middle;
  background-color:rgba(255,255,255,.05);
  border:1px solid #ffffff1f;border-radius:6px;
  cursor:pointer;
  transition:background-color .15s,border-color .15s;
}
input[type=radio]{border-radius:50%}
input:is([type=checkbox],[type=radio])::before{
  content:"";width:12px;height:10px;
  background:#04222e;
  clip-path:polygon(14% 44%,0 62%,40% 100%,100% 18%,86% 4%,39% 70%);
  transform:scale(0);
  transition:transform .15s;
}
input[type=radio]::before{width:10px;height:10px;border-radius:50%;clip-path:none}
input:is([type=checkbox],[type=radio]):checked{background-color:#00d2ff;border-color:#00d2ff}
input:is([type=checkbox],[type=radio]):checked::before{transform:scale(1)}
@media (hover:hover){
  input:is([type=checkbox],[type=radio]):hover{border-color:#00d2ff}
}
input:is([type=checkbox],[type=radio]):focus-visible{
  outline:2px solid #00d2ff;
  outline-offset:3px;
}