/* ==========================================================================
   Rádios em Português — folha de estilo do site público

   Direcção visual: modernismo brasileiro / tropicália. Cor plana e
   saturada, geometria firme, tipografia grossa. A escolha não é
   arbitrária: 1.690 das 2.153 rádios do catálogo são brasileiras, e um
   registo sóbrio europeu seria fiel ao domínio mas infiel ao conteúdo.

   Nota sobre tamanhos de letra: nada neste ficheiro desce abaixo dos
   15px. As duas excepções acordadas são as ajudas de formulário (14px) e
   a menção "Publicidade", que é uma menção legal e não conteúdo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fichas de cor e medidas
   -------------------------------------------------------------------------- */

  :root {
  /* Paleta clara — "escala cinzenta" (variação 08).
     Cinzas e um só azul. O extremo da contenção: nada na página tem cor
     sem ser um logótipo. Numa listagem de 24 rádios há 24 logótipos, cada
     um com as suas cores; com a página calada, são eles a cor. */
  --papel:  #FFFFFF;   /* fundo */
  --papel-2:#F0F0F0;   /* fundo das secções e dos blocos */
  --tinta:  #111111;   /* texto */
  --tinta-2:#6E6E6E;   /* texto secundário */
  --brasa:  #1A56DB;   /* azul: acção principal, no ar */

  /* Cores das estações sem logótipo — quase um terço do catálogo.
     Aqui são quase todas neutras, de propósito: dão identidade a um
     cartão sem introduzir cor na página. */
  --mar:    #444444;
  --flor:   #767676;
  --ouro:   #8A8A8A;
  --uva:    #232323;

  --linha:  rgba(0, 0, 0, .14);
  --sombra: none;      /* esta estrutura não usa sombra projectada */

  /* Tintas FIXAS, que não acompanham o tema. A barra do player é sempre
     escura e o texto sobre o acento é sempre claro, em qualquer modo. */
  --tinta-fixa: #111111;
  --papel-fixo: #FFFFFF;
  --sobre-acento: #FFFFFF;

  /* Peso do título. A Archivo Black só existe em 400: pedir 700 ou 800
     faria o browser engordá-la sozinho, e negrito sintético numa letra
     que já é preta fica borrado. */
  --display-peso: 400;

  /* Medidas. Cantos rectos: nesta estrutura os blocos definem-se pelo
     fundo e não por contorno nem por arredondamento. */
  --raio:    0px;
  --raio-s:  0px;
  --gutter:  16px;
  --largura: 1220px;
  --player:  76px;

  --display: 'Archivo Black', system-ui, sans-serif;
  --corpo:   'Archivo', system-ui, sans-serif;
  --mono:    'Roboto Mono', ui-monospace, monospace;

  color-scheme: light dark;
}

/* Modo escuro — "sinal" (variação 11).
   Preto de osciloscópio com verde-lima. Não é a paleta clara invertida:
   muda de família. O azul #1A56DB lê-se bem sobre branco e apaga-se
   sobre preto; o lima é o contrário. São duas leituras do mesmo sítio,
   uma de dia e outra de noite. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel:   #0D0F0C;
    --papel-2: #161A15;
    --tinta:   #EAF0E6;
    --tinta-2: #8D9789;
    --brasa:   #B6F04A;
    --mar:     #4AC9E0;
    --flor:    #F0724A;
    --ouro:    #E8C84A;
    --uva:     #C77DF0;
    --linha:   rgba(234, 240, 230, .16);
    --sombra:  none;
    /* Sobre o verde-lima o texto tem de ser escuro: é uma cor clara. */
    --sobre-acento: #0D0F0C;
  }
}

/* Escolha explícita do visitante, que ganha sempre à do sistema. */
:root[data-tema="escuro"] {
    --papel:   #0D0F0C;
    --papel-2: #161A15;
    --tinta:   #EAF0E6;
    --tinta-2: #8D9789;
    --brasa:   #B6F04A;
    --mar:     #4AC9E0;
    --flor:    #F0724A;
    --ouro:    #E8C84A;
    --uva:     #C77DF0;
    --linha:   rgba(234, 240, 230, .16);
    --sombra:  none;
    /* Sobre o verde-lima o texto tem de ser escuro: é uma cor clara. */
    --sobre-acento: #0D0F0C;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.55;
  /* Espaço para o player fixo não tapar o fim da página. */
  padding-bottom: calc(var(--player) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }

button { font: inherit; color: inherit; }

/* Foco sempre visível, em qualquer fundo. */
:focus-visible {
  outline: 3px solid var(--brasa);
  outline-offset: 3px;
  border-radius: 4px;
}

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--tinta);
  color: var(--papel);
  font-weight: 600;
}
.saltar:focus { left: 12px; top: 12px; }

#conteudo {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
  /* Impede que um filho largo (um nome sem espaços, uma tabela) alargue
     o contentor e crie deslocamento horizontal na página inteira. */
  min-width: 0;
}

/* Rede de segurança: palavras muito longas quebram em vez de empurrar.
   Nomes de rádio da fonte incluem URLs e cadeias sem espaços. */
.cartao__nome, .dial__nome, .ficha-radio__nome, .topo__titulo, .ficha__nome {
  overflow-wrap: anywhere;
}
#conteudo:focus { outline: none; }

/* --------------------------------------------------------------------------
   3. Cabeçalho
   -------------------------------------------------------------------------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
}

.cabecalho__interior {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: grid;
  /* A coluna da pesquisa é minmax(0, 240px) e não auto: com auto, a
     caixa recusava-se a encolher e, em ecrãs de tablet (~768px),
     empurrava o cabeçalho 13px para fora da página.
     Colunas: marca · língua · navegação · aspecto · pesquisa · conta. */
  grid-template-columns: auto auto minmax(0, 1fr) auto minmax(0, 240px) auto;
  align-items: center;
  gap: 14px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: var(--display-peso);
  font-size: 19px;
  letter-spacing: -.02em;
}
.marca__simbolo { width: 30px; height: 30px; flex: none; color: var(--brasa); }
.marca__nome { white-space: nowrap; }

/* Cabeçalho da página principal do portal: só marca, aspecto e conta.
   Não há menu nem pesquisa ali, porque essas páginas são todas de uma
   língua e ainda não há nenhuma escolhida. A marca fica com 1fr para
   empurrar os dois botões para a direita. */
.cabecalho__interior--portal { grid-template-columns: minmax(0, 1fr) auto auto; }

/* Em que língua se está, e a porta para sair dela. É a única coisa do
   cabeçalho que responde a "onde é que eu estou?": sem ela, /pt/alemao/
   e /pt/frances/ têm o mesmo cabeçalho ao pixel.

   Desenhada como uma etiqueta e não como um item de menu, para não se
   confundir com os três ao lado: aquilo são destinos, isto é o sítio
   onde se está. */
.lingua-activa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--papel-2);
  color: var(--tinta);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .14s ease, color .14s ease;
}
.lingua-activa:hover,
.lingua-activa:focus-visible { background: var(--brasa); color: var(--sobre-acento); }
.lingua-activa__nome { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
.lingua-activa__seta { width: 15px; height: 15px; flex: none; opacity: .7; }

.navegacao {
  display: flex;
  gap: 22px;
  font-weight: 600;
  font-size: 16px;
}
.navegacao a { text-decoration: none; padding: 6px 0; border-bottom: 3px solid transparent; }
.navegacao a:hover { border-bottom-color: var(--brasa); }

.procura { display: flex; align-items: center; gap: 0; min-width: 0; }
.procura__etiqueta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.procura__campo {
  font: inherit;
  font-size: 16px;               /* 16px evita o zoom automático no iOS */
  width: 100%;
  min-width: 0;
  padding: 9px 13px;
  border: 1px solid var(--linha);
  border-right: none;
  background: var(--papel-2);
  color: var(--tinta);
}
.procura__campo::placeholder { color: var(--tinta-2); }

.procura__botao {
  display: grid;
  place-items: center;
  width: 44px;                   /* alvo de toque confortável */
  height: 42px;
  border: 1px solid var(--brasa);
  background: var(--brasa);
  color: var(--sobre-acento);
  cursor: pointer;
}
.procura__botao svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   3b. Botão de aspecto (claro / escuro / automático)
   -------------------------------------------------------------------------- */

.tema {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: none;
  background: var(--papel-2);
  color: var(--tinta);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .14s ease, color .14s ease;
}
.tema:hover { background: var(--brasa); color: var(--sobre-acento); }
.tema svg { width: 18px; height: 18px; flex: none; }

/* Só o ícone do estado actual é mostrado. O estado vive num atributo do
   <html>, por isso pode ser lido daqui sem JavaScript nenhum a mexer em
   classes. */
.tema__icone { display: none; }
:root:not([data-tema]) .tema__icone--auto   { display: block; }
:root[data-tema="claro"]  .tema__icone--claro  { display: block; }
:root[data-tema="escuro"] .tema__icone--escuro { display: block; }

@media (max-width: 880px) {
  /* Em ecrã estreito fica só o ícone: o rótulo é a primeira coisa a
     sair quando o espaço aperta. */
  .tema__texto { display: none; }
  .tema { padding: 8px; }
}

/* --------------------------------------------------------------------------
   3c. Botão de conta (entrar / ir para a gestão)
   -------------------------------------------------------------------------- */

/* Mesma altura e mesmo ritmo do botão de aspecto, mas contornado em vez
   de preenchido: é o último item da barra e não deve competir com o
   botão de pesquisa, que é o que a maioria dos visitantes vem procurar.
   Só ao passar o rato é que ganha a cor da marca. */
.conta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--linha);
  background: transparent;
  color: var(--tinta);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.conta:hover,
.conta:focus-visible {
  background: var(--brasa);
  border-color: var(--brasa);
  color: var(--sobre-acento);
}
.conta__icone { width: 18px; height: 18px; flex: none; }

@media (max-width: 880px) {
  /* Pela mesma razão do botão de aspecto: cai o rótulo, fica o ícone.
     O title continua lá para quem passa o rato, e o texto dentro do
     <span> continua a ser lido pelos leitores de ecrã. */
  .conta__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .conta { padding: 8px; }
}

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

/* Duas colunas: o argumento à esquerda, uma acção à direita. Antes o
   número vivia sozinho e deixava metade da faixa mais valiosa da página
   em branco. */
.hero {
  padding: 54px 0 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  align-items: center;
  gap: 32px;
}

/* A página principal do portal não tem o botão "ouvir ao acaso" — não
   pode ter, porque ao acaso EM QUE LÍNGUA é justamente a pergunta que a
   página está a fazer. Sem segundo elemento, a coluna de 300px ficava
   vazia e o título apertado à esquerda sem razão. */
.hero--portal { grid-template-columns: minmax(0, 1fr); }
.hero--portal .hero__sub { max-width: 46ch; }

.hero__argumento { min-width: 0; }

.hero__etiqueta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 15px;
  /* Tracking curto: a 15px, o espaçamento pensado para 10px parece partido. */
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brasa);
  font-weight: 500;
}

/* O único movimento permanente da página. Está aqui porque diz uma
   coisa verdadeira — isto está a acontecer agora — e não para animar. */
.hero__sinal {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--brasa);
  animation: sinal 2s ease-in-out infinite;
}
@keyframes sinal {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(204, 58, 38, .55); }
  50%      { opacity: .5; box-shadow: 0 0 0 7px rgba(204, 58, 38, 0); }
}

.hero__titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--display-peso);
  line-height: .88;
  letter-spacing: -.035em;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 18px;
}

/* O número é o argumento da página, por isso é o maior elemento.
   clamp() com mínimo de 64px: acima do mínimo de 15px com folga. */
.hero__numero { font-size: clamp(64px, 15vw, 168px); }

.hero__unidade {
  font-size: clamp(26px, 5vw, 52px);
  color: var(--brasa);
}

.hero__sub {
  margin: 18px 0 0;
  font-size: clamp(17px, 2.2vw, 22px);
  max-width: 34ch;              /* medida curta: é uma frase, não um texto */
  color: var(--tinta-2);
}

/* --------------------------------------------------------------------------
   5. O dial — elemento distintivo
   -------------------------------------------------------------------------- */

.dial {
  margin: 10px 0 44px;
  border: none;
  background: var(--papel-2);
  overflow: hidden;
}

.dial__cabeca { padding: 18px 20px 8px; }

.dial__titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--display-peso);
  font-size: 23px;
  letter-spacing: -.02em;
}

.dial__ajuda { margin: 4px 0 0; font-size: 15px; color: var(--tinta-2); }

/* A janela está parada; só a pista lá dentro rola. É isto que permite à
   agulha ficar no centro enquanto o mundo passa por baixo. */
.dial__janela { position: relative; }

.dial__pista {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  /* Alta o suficiente para as marcas, as etiquetas das estações e a
     faixa da régua não se pisarem. */
  height: 208px;
  /* O arrasto horizontal é o gesto natural aqui; travamos só a cadeia
     vertical para o gesto não arrastar a página inteira. */
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  cursor: grab;
}
.dial__pista.a-arrastar { cursor: grabbing; scroll-behavior: auto; }

.dial__mundo { position: relative; height: 100%; }

/* A régua tem faixa própria no fundo da pista: separada das estações
   por uma linha, para as duas camadas de informação não competirem. */
.dial__regua {
  position: absolute;
  inset: auto 0 0 0;
  height: 34px;
  border-top: 2px solid var(--linha);
}

/* Etiqueta de país na régua. É o que dá sentido à escala: lê-se
   "Cabo Verde", não "20°O". */
/* max-width e translate: uma etiqueta centrada junto ao fim da pista
   era cortada a meio ("BRA" em vez de "BRASIL"). */
.dial__grau {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-2);
  padding: 0 8px;
  white-space: nowrap;
}

.dial__estacao {
  position: absolute;
  bottom: 44px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  /* Sempre menor do que $passoBase em dial.php — é isso que impede duas
     etiquetas vizinhas de se sobreporem. */
  width: 118px;
}

.dial__marca {
  width: 3px;
  height: 34px;
  border-radius: 2px;
  background: var(--tinta);
  transition: background-color .18s ease;
}
/* A marca muda de cor e de espessura, não de altura: crescer era mais
   um elemento a mexer-se debaixo do cursor. */
.dial__estacao:hover .dial__marca,
.dial__estacao:focus-visible .dial__marca { width: 5px; background: var(--brasa); }
.dial__estacao.esta-a-tocar .dial__marca { width: 5px; background: var(--brasa); }

.dial__etiqueta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: .48;
  transition: opacity .18s ease;
}
.dial__estacao:hover .dial__etiqueta,
.dial__estacao:focus-visible .dial__etiqueta,
.dial__estacao.esta-a-tocar .dial__etiqueta { opacity: 1; }

.dial__nome {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  /* Duas linhas no máximo: os nomes variam de "RFM" a frases inteiras. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dial__pais {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .01em;
  color: var(--tinta-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Posicionada na janela e não na pista: dentro da pista deslizava com o
   conteúdo, que é o contrário do que um dial faz. */
.dial__agulha {
  position: absolute;
  top: 10px;
  bottom: 34px;
  left: 50%;
  width: 2px;
  background: var(--brasa);
  pointer-events: none;
  opacity: .5;
}
.dial__agulha::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 11px; height: 11px;
  background: var(--brasa);
  border-radius: 50%;
}

.dial__pes {
  display: flex;
  justify-content: space-between;
  padding: 8px 20px 14px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

/* --------------------------------------------------------------------------
   5b. Ouvir ao acaso
   -------------------------------------------------------------------------- */

/* A serendipidade é como a rádio se ouve de facto: não se procura, dá-se
   com. Por isso isto é uma acção de primeiro nível e não um link de rodapé. */
.acaso {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 20px;
  border: none;
  /* Contorno e não bloco de cor. Numa paleta contida, um rectângulo de
     ocre tornava-se o elemento mais berrante da página — mais do que o
     número, que é o argumento. Preenche-se a vermelho só ao passar por
     cima, quando a atenção já lá está. */
  background: var(--papel);
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: background-color .16s ease;
}
.acaso:hover { background: var(--brasa); color: #fff; }

/* A cor concentra-se no ícone: num cartão calado é ali que ela rende. */
.acaso__icone { flex: none; color: var(--brasa); }
.acaso:hover .acaso__icone { color: inherit; }
.acaso__icone svg { width: 42px; height: 42px; display: block; }
/* Sem rotação ao passar o rato: pelo mesmo princípio, nada se move. */

.acaso__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acaso__titulo { font-family: var(--display); font-weight: var(--display-peso); font-size: 20px; letter-spacing: -.02em; }
.acaso__sub { font-size: 15px; opacity: .78; }

/* Peso proporcional nas fichas de país: uma ficha com 1.406 rádios não
   deve pesar o mesmo que uma com 1. O tamanho segue a ordem da lista,
   que já vem ordenada por contagem. */
.fichas--pesadas li:nth-child(-n+3) .ficha { font-size: 18px; padding: 11px 19px; }
.fichas--pesadas li:nth-child(-n+3) .ficha__conta { font-size: 16px; opacity: .8; }
.fichas--pesadas li:nth-child(n+11) .ficha { font-size: 15px; padding: 7px 12px; opacity: .82; }

/* --------------------------------------------------------------------------
   6. Secções, fichas e grelha
   -------------------------------------------------------------------------- */

.seccao { margin: 0 0 44px; }

.seccao__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--tinta);
}

.seccao__titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--display-peso);
  font-size: clamp(22px, 3.4vw, 32px);
  letter-spacing: -.025em;
}

/* Acento e não uma das cores de estação: estas existem para dar
   identidade a um cartão sem logótipo, e usá-las na interface fazia o
   mesmo elemento mudar de família de cor entre o modo claro e o escuro. */
.seccao__mais { font-weight: 600; font-size: 16px; color: var(--brasa); }

.fichas {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ficha {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: none;
  background: var(--papel-2);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: background-color .14s ease;
}
/* Nada se mexe ao passar por cima: a resposta é de cor, não de
   posição. Elementos que saltam sob o cursor tornam uma lista longa
   inquieta e fazem falhar o alvo a quem tem o pulso menos firme. */
.ficha:hover { background: var(--brasa); color: var(--sobre-acento); }
.ficha:hover .ficha__conta { opacity: .85; }
/* Nesta paleta todas as fichas respondem com o mesmo acento: uma cor
   por família de etiqueta voltava a encher a página de cor, que é
   precisamente o que esta direcção evita. */

.ficha__conta {
  font-family: var(--mono);
  font-size: 15px;
  opacity: .62;
}

.grelha {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.grelha--compacta { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grelha__anuncio { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   6b. Países de língua oficial, com bandeira
   -------------------------------------------------------------------------- */

.paises {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  /* Duas colunas no máximo por linha de leitura. auto-fit abriria seis
     num ecrã largo e a lista deixava de se ler como lista. */
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 10px;
}

/* O <li> estica e o <a> preenche-o: sem isto, um nome que quebra em
   duas linhas ("Macau, RAE da China") fazia o seu cartão ficar mais alto
   do que os vizinhos da mesma linha. */
.paises li { display: flex; }

.pais {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 14px;
  background: var(--papel-2);
  text-decoration: none;
  transition: background-color .14s ease, color .14s ease;
}
.pais:hover { background: var(--brasa); color: var(--sobre-acento); }

/* A bandeira leva um filete: várias têm branco na borda e, sem ele,
   Portugal e Angola pareciam recortados a meio sobre o fundo claro. */
.pais__bandeira {
  width: 30px; height: 22px;
  flex: none;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--linha);
}

.pais__nome {
  font-weight: 600;
  font-size: 16px;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pais__conta {
  font-family: var(--mono);
  font-size: 15px;
  opacity: .62;
  white-space: nowrap;
}

/* Um país de língua portuguesa sem rádios no catálogo continua na lista
   — escondê-lo fazia o bloco mentir sobre quantos países falam a língua
   — mas não se apresenta como se tivesse alguma coisa para ouvir. */
.pais--vazio { opacity: .55; }
.pais--vazio .pais__conta { font-family: var(--corpo); font-size: 15px; }

@media (max-width: 520px) {
  .paises { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   6c. As portas do portal — uma língua por linha
   -------------------------------------------------------------------------- */

/* CINCO LINHAS A TODA A LARGURA, e não uma grelha de cartões. A razão é
   aritmética antes de ser estética: cinco não cabe bem em duas nem em
   três colunas, e qualquer grelha automática deixava uma órfã na última
   linha em metade das larguras de ecrã. Uma coluna nunca tem esse
   problema, seja qual for o número de línguas que o portal venha a
   abrir.

   E ganha-se o que a linha larga permite dizer: o nome da língua, o nome
   dela na própria língua, quantas rádios tem e de que países vêm — tudo
   à mesma altura do olho, comparável de linha para linha. */
.portas {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 10px;
  /* Todas as linhas com a mesma altura. Só algumas têm o nome na
     própria língua por baixo — "português" é a mesma palavra nas duas e
     não o repete — e sem isto essa linha ficava visivelmente mais baixa
     do que as vizinhas, como se valesse menos. */
  grid-auto-rows: 1fr;
}
.portas li { display: flex; }

.porta {
  display: grid;
  /* nome · contagem · países · acção */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr) auto;
  align-items: center;
  width: 100%;
  gap: 6px 26px;
  padding: 19px 22px;
  background: var(--papel-2);
  text-decoration: none;
  transition: background-color .14s ease, color .14s ease;
}
.porta:hover,
.porta:focus-visible { background: var(--brasa); color: var(--sobre-acento); }

.porta__cabeca { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.porta__nome {
  font-family: var(--display);
  font-weight: var(--display-peso);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.05;
  letter-spacing: -.02em;
}

/* O nome da língua na própria língua. Em mono porque é uma etiqueta e
   não prosa — e porque assim não compete com o nome grande por cima. */
.porta__proprio {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--tinta-2);
}
.porta:hover .porta__proprio,
.porta:focus-visible .porta__proprio { color: inherit; opacity: .8; }

.porta__paises { font-size: 15px; color: var(--tinta-2); min-width: 0; }
.porta:hover .porta__paises,
.porta:focus-visible .porta__paises { color: inherit; opacity: .85; }
.porta__mais { white-space: nowrap; opacity: .8; }
.porta__mais::before { content: ' — '; }

/* Número e unidade juntos e encostados à direita da coluna: assim os
   milhares alinham-se de porta para porta e o tamanho de cada língua
   compara-se de relance, que é para isso que o número aqui está. */
.porta__conta {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 7px;
  white-space: nowrap;
}

.porta__numero {
  font-family: var(--display);
  font-weight: var(--display-peso);
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -.02em;
  /* Algarismos de largura fixa: sem isto, o "1" estreito da Archivo
     Black desalinhava 1.900 de 15.990 mesmo com as colunas certas. */
  font-variant-numeric: tabular-nums;
}
.porta__unidade { font-size: 15px; color: var(--tinta-2); }
.porta:hover .porta__unidade,
.porta:focus-visible .porta__unidade { color: inherit; opacity: .85; }

.porta__accao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 16px;
  color: var(--brasa);
  white-space: nowrap;
}
.porta:hover .porta__accao,
.porta:focus-visible .porta__accao { color: inherit; }
.porta__accao svg { width: 16px; height: 16px; flex: none; }

.portas__nota {
  margin: 16px 0 0;
  font-size: 15px;
  max-width: 68ch;
  color: var(--tinta-2);
}

@media (max-width: 860px) {
  /* Duas colunas: o nome e a contagem na primeira linha, os países e a
     acção por baixo. Abaixo dos 860px as quatro colunas dão ao nome
     menos largura do que a própria palavra "português". */
  .porta { grid-template-columns: minmax(0, 1fr) auto; row-gap: 13px; align-items: start; }
  .porta__cabeca { grid-column: 1; grid-row: 1; }
  .porta__conta  { grid-column: 2; grid-row: 1; }
  .porta__paises { grid-column: 1 / -1; grid-row: 2; }
  .porta__accao  { grid-column: 1 / -1; grid-row: 3; }

  /* Com as linhas empilhadas, a altura já depende do texto e forçar
     todas à mesma deixava buracos nas mais curtas. */
  .portas { grid-auto-rows: auto; }
}

/* --------------------------------------------------------------------------
   7. Cartão de rádio
   -------------------------------------------------------------------------- */

.cartao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  /* Sem contorno: o bloco define-se pelo fundo. É o tratamento da
     variação escolhida — cantos rectos, nada de filetes. */
  border: none;
  background: var(--papel-2);
  transition: background-color .14s ease;
}
.cartao:hover { background: var(--papel); outline: 1px solid var(--linha); }
/* A tocar: uma barra de acento à esquerda. Sem contorno para mudar de
   cor, é preciso outra marca — e uma barra lê-se mesmo sem se distinguir
   o azul do cinzento. */
.cartao.esta-a-tocar { background: var(--papel); box-shadow: inset 3px 0 0 var(--brasa); }

.cartao__ligacao {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
  flex: 1;
}
/* O link cobre o cartão todo para o alvo de toque ser generoso, mas
   fica por baixo do botão de ouvir (z-index adiante). */
.cartao__ligacao::after { content: ''; position: absolute; inset: 0; border-radius: var(--raio); }

.cartao__arte {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  flex: none;
  border: none;
  overflow: hidden;
  background: var(--ouro);
}
.cartao__arte--brasa { background: var(--brasa); }
.cartao__arte--mar   { background: var(--mar); }
.cartao__arte--flor  { background: var(--flor); }
.cartao__arte--ouro  { background: var(--ouro); }
.cartao__arte--uva   { background: var(--uva); }

.cartao__logo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #fff;
}

/* A inicial fica por baixo do logótipo: se a imagem falhar e for
   removida pelo onerror, aparece sozinha sem deixar buraco. */
.cartao__inicial {
  font-family: var(--display);
  font-weight: var(--display-peso);
  font-size: 24px;
  color: #fff;
}

.cartao__texto { display: flex; flex-direction: column; min-width: 0; }

.cartao__nome {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cartao__meta {
  display: flex;
  gap: 7px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--tinta-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cartao__regiao { opacity: .7; }
.cartao__regiao::before { content: '· '; }

/* O género é a única coisa no cartão que diz que isto é uma rádio e não
   uma lista qualquer. Fica em cor, para se distinguir do país a mono. */
/* Contorno e não preenchimento. Em magenta sólido, o género pesava mais
   do que o nome da estação — e o nome é o que a pessoa procura. Fica a
   marcar presença sem disputar a atenção. */
.cartao__genero {
  align-self: flex-start;
  margin-top: 4px;
  padding: 0 8px;
  border: 1.5px solid var(--brasa);
  border-radius: 999px;
  color: var(--brasa);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.cartao__ouvir {
  position: relative;
  z-index: 1;                    /* acima do ::after do link */
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border: none;
  background: var(--papel);
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}
.cartao__ouvir:hover { background: var(--brasa); color: var(--sobre-acento); }
.cartao__icone { width: 20px; height: 20px; }
.cartao__icone--parar { display: none; }
.cartao.esta-a-tocar .cartao__ouvir { background: var(--brasa); color: var(--sobre-acento); }
.cartao.esta-a-tocar .cartao__icone--tocar { display: none; }
.cartao.esta-a-tocar .cartao__icone--parar { display: block; }

/* --------------------------------------------------------------------------
   8. Topo de listagem, ordenação, paginação, vazio
   -------------------------------------------------------------------------- */

.topo { padding: 40px 0 22px; }

.topo__etiqueta {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brasa);
}

.topo__titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--display-peso);
  font-size: clamp(32px, 6vw, 60px);
  line-height: 1;
  letter-spacing: -.03em;
}

.topo__conta { margin: 10px 0 0; font-family: var(--mono); font-size: 16px; color: var(--tinta-2); }

.ordenacao {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
.ordenacao a {
  padding: 7px 14px;
  border: none;
  background: var(--papel-2);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}
.ordenacao a[aria-current="true"] { background: var(--tinta); color: var(--papel); }

.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 34px 0 0;
}
.paginacao__passo {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: none;
  background: var(--papel-2);
  text-decoration: none;
  font-size: 19px;
}
.paginacao__passo:hover { background: var(--brasa); color: var(--sobre-acento); }
.paginacao__posicao { font-family: var(--mono); font-size: 16px; }

.vazio { padding: 60px 0; text-align: center; }
.vazio__titulo { margin: 0 0 6px; font-family: var(--display); font-weight: var(--display-peso); font-size: 26px; }
.vazio__ajuda { margin: 0 0 22px; color: var(--tinta-2); font-size: 17px; }

.botao {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border: none;
  background: var(--brasa);
  color: var(--sobre-acento);
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
  transition: background-color .14s ease;
}
.botao:hover { background: var(--tinta); color: var(--papel); }
.botao svg { width: 21px; height: 21px; }
.botao--grande { padding: 14px 28px; font-size: 19px; }

/* --------------------------------------------------------------------------
   9. Ficha da rádio
   -------------------------------------------------------------------------- */

.ficha-radio { padding: 30px 0 0; }

.ficha-radio__cabeca {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 26px;
  border: none;
  background: var(--papel-2);
  color: var(--tinta);
}
.ficha-radio__cabeca--brasa { background: var(--brasa); color: #fff; }
.ficha-radio__cabeca--mar   { background: var(--mar);   color: #fff; }
.ficha-radio__cabeca--flor  { background: var(--flor);  color: #fff; }
.ficha-radio__cabeca--uva   { background: var(--uva);   color: #fff; }

.ficha-radio__arte {
  position: relative;
  display: grid;
  place-items: center;
  width: 104px; height: 104px;
  flex: none;
  border: none;
  overflow: hidden;
  background: var(--papel);
}
.ficha-radio__arte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.ficha-radio__inicial { font-family: var(--display); font-weight: var(--display-peso); font-size: 44px; }

.ficha-radio__identidade { min-width: 0; flex: 1; }

.ficha-radio__nome {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--display-peso);
  font-size: clamp(27px, 5vw, 46px);
  line-height: 1.02;
  letter-spacing: -.03em;
}

.ficha-radio__local {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 18px;
  font-family: var(--mono);
  font-size: 16px;
}
.ficha-radio__local span::before { content: '· '; opacity: .7; }

.ficha-radio__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  margin: 32px 0 0;
}

/* Sem anúncio lateral não há segunda coluna: o conteúdo usa a largura
   toda em vez de deixar um terço da página em branco. */
.ficha-radio__corpo--simples { grid-template-columns: minmax(0, 1fr); }

.ficha-radio__lado { min-width: 0; }

.bloco { margin: 0 0 32px; }
.bloco__titulo {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: var(--display-peso);
  font-size: 21px;
  letter-spacing: -.02em;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--linha);
}

.dados { margin: 0; display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio-s); overflow: hidden; }
.dados__par { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 11px 15px; background: var(--papel); }
.dados__par dt { color: var(--tinta-2); font-size: 16px; }
.dados__par dd { margin: 0; font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.dados__mono { font-family: var(--mono); }

/* --------------------------------------------------------------------------
   10. Publicidade
   -------------------------------------------------------------------------- */

.anuncio {
  display: block;
  margin: 28px 0;
  text-align: center;
}

/* Única excepção ao mínimo de 15px: é menção legal, não conteúdo.
   A 15px competia visualmente com o próprio anúncio que rotula. */
.anuncio__mencao {
  display: block;
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-2);
  opacity: .72;
}

/* A altura minima vem agora do atributo style de cada espaco, porque e
   configuravel no backoffice. Estes valores ficam como rede de
   seguranca, para o caso de a altura chegar a zero. */
.anuncio__bloco { min-height: 90px; }
.anuncio--lateral .anuncio__bloco { min-height: 600px; }
.anuncio--lateral { position: sticky; top: 84px; }

/* Banner PROPRIO em imagem.

   max-width:100% para uma imagem maior do que a coluna nao alargar a
   pagina — um banner de 970px numa coluna de 700px fazia aparecer barra
   de scroll horizontal no site inteiro. height:auto mantem a proporcao
   depois de a largura ser limitada; sem ele, os atributos width/height
   do <img> (que existem para evitar o salto de layout) passavam a
   deformar a imagem em vez de a reservar. */
.anuncio__imagem {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* O link a volta do banner nao desenha nada por si: e so o alvo do
   clique. Fica em bloco para nao deixar uma linha de base por baixo da
   imagem. */
.anuncio__ligacao { display: block; }

/* Espaco RESERVADO: o lugar do anuncio desenhado, sem anuncio nenhum.
   Serve para ver onde a publicidade vai entrar antes de haver conta
   AdSense — e mais honesto do que um <ins> vazio, que ocupa o sitio sem
   dizer o que la vai estar.

   Tracejado e de proposito: e a convencao de "espaco reservado" e
   distingue-se a olho de uma caixa de conteudo verdadeiro. */
.anuncio__reserva {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--tinta-2);
  border-radius: var(--raio-s);
  background: var(--papel-2);
  opacity: .55;
}

/* 15px como todo o resto: isto nao e a mencao legal, e texto normal —
   a isencao do minimo vale so para "Publicidade". */
.anuncio__reserva-texto {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--tinta-2);
}

/* --------------------------------------------------------------------------
   11. Player fixo
   -------------------------------------------------------------------------- */

.player {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  /* Fixas: o player é sempre a barra escura. Com --tinta/--papel, no
     modo escuro virava uma barra creme a berrar no fundo de uma página
     escura. */
  background: var(--tinta-fixa);
  color: var(--papel-fixo);
  border-top: 2px solid var(--tinta-fixa);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(101%);
  transition: transform .26s cubic-bezier(.2, .8, .3, 1);
}
.player--activo { transform: translateY(0); }

.player__interior {
  max-width: var(--largura);
  margin: 0 auto;
  height: var(--player);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 14px;
}

.player__accao {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex: none;
  border: none;
  border-radius: 50%;
  background: var(--brasa);
  color: var(--sobre-acento);
  cursor: pointer;
}
.player__icone { width: 23px; height: 23px; }
.player__icone--parar { display: none; }
.player--a-tocar .player__icone--tocar { display: none; }
.player--a-tocar .player__icone--parar { display: block; }

/* Anel de espera enquanto o stream liga. Só roda quando a classe está
   presente, para não haver animação permanente na página. */
.player__carregar {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--papel-fixo);
  opacity: 0;
}
.player--a-ligar .player__carregar { opacity: 1; animation: rodar .8s linear infinite; }
@keyframes rodar { to { transform: rotate(360deg); } }

.player__radio {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex: 1;
  text-decoration: none;
}

.player__arte {
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--raio-s);
  background: var(--brasa) center/cover no-repeat;
}

.player__texto { display: flex; flex-direction: column; min-width: 0; }
.player__nome { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__estado { font-family: var(--mono); font-size: 15px; opacity: .68; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Barras de nível: sinal de emissão, não medição real — o browser não
   expõe o áudio de um stream remoto sem CORS. Param quando o som para. */
.player__nivel { display: none; align-items: flex-end; gap: 3px; height: 22px; flex: none; }
.player--a-tocar .player__nivel { display: flex; }
.player__nivel i {
  display: block;
  width: 3px;
  height: 30%;
  background: var(--brasa);
  border-radius: 2px;
  animation: nivel 1s ease-in-out infinite;
}
.player__nivel i:nth-child(2) { animation-delay: .18s; }
.player__nivel i:nth-child(3) { animation-delay: .36s; }
.player__nivel i:nth-child(4) { animation-delay: .1s; }
@keyframes nivel { 0%, 100% { height: 24%; } 50% { height: 100%; } }

.player__volume { display: flex; align-items: center; gap: 8px; flex: none; }
.player__volume svg { width: 21px; height: 21px; opacity: .78; }
.player__volume input { width: 92px; accent-color: var(--brasa); }

.player__fechar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: .72;
}
.player__fechar:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.player__fechar svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   12. Rodapé
   -------------------------------------------------------------------------- */

.rodape {
  margin-top: 56px;
  border-top: 2px solid var(--tinta);
  background: var(--papel-2);
}
.rodape__interior {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 30px var(--gutter) 40px;
  font-size: 16px;
  color: var(--tinta-2);
}
.rodape__interior p { margin: 0 0 5px; }
.rodape__nome { font-family: var(--display); font-weight: var(--display-peso); font-size: 19px; color: var(--tinta); }
/* AS CINCO PORTAS, em todas as páginas. Estão aqui em baixo e não no
   cabeçalho de propósito: quem está a ouvir não quer um menu a
   oferecer-lhe outra língua o tempo todo — mas quem chegou ao fim de uma
   página sem encontrar o que procurava quer, e é ali que está. */
.rodape__linguas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
  font-size: 16px;
  font-weight: 600;
}
.rodape__linguas a { text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.rodape__linguas a:hover { border-bottom-color: var(--brasa); }
.rodape__linguas a[aria-current="page"] { color: var(--brasa); }

/* Os idiomas de INTERFACE. Em mono e a seguir às portas porque são a
   escolha menos frequente das duas: muda-se de língua de rádio muitas
   vezes, de língua de leitura uma vez na vida. */
.rodape__idiomas { display: flex; gap: 12px; margin-top: 14px; font-family: var(--mono); font-size: 15px; }
.rodape__idiomas a[aria-current="true"] { color: var(--brasa); font-weight: 600; }

/* --------------------------------------------------------------------------
   13. Adaptação a ecrãs estreitos
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  /* Abaixo desta largura, a acção passa para baixo do argumento: a
     300px a coluna já não tem folga e o número perderia escala. */
  .hero { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .acaso { max-width: 420px; }

  /* A coluna lateral passa para baixo do conteúdo: a 960px já não há
     largura para 300px de anúncio sem espremer o texto. */
  .ficha-radio__corpo { grid-template-columns: minmax(0, 1fr); }
  .anuncio--lateral { position: static; }
  .anuncio--lateral .anuncio__bloco { min-height: 250px; }
}

@media (max-width: 760px) {
  /* minmax(0, 1fr) e não 1fr: por omissão uma coluna de grelha tem
     min-width auto, e um nome de rádio comprido empurrava o cabeçalho
     para além da largura do ecrã. */
  .cabecalho__interior {
    /* Marca · aspecto · conta · pesquisa. Os dois botões são só ícone a
       esta largura, por isso somam ~70px e a pesquisa fica com o resto. */
    grid-template-columns: auto auto auto minmax(0, 1fr);
    row-gap: 10px;
  }
  /* A etiqueta da língua desce para a segunda linha, ao lado do menu, em
     vez de ficar junto à marca: num telemóvel de 390px, marca + etiqueta
     + dois botões não deixavam largura nenhuma para a caixa de pesquisa.
     Ali ao lado do menu lê-se como um conjunto — "está em português, e
     aqui está o que há lá dentro". */
  .lingua-activa { order: 4; grid-column: 1 / 2; }
  /* A página principal do portal continua com três elementos só, e a
     marca continua a empurrar os dois botões para a direita. */
  .cabecalho__interior--portal { grid-template-columns: minmax(0, 1fr) auto auto; }
  /* A navegação passa para uma segunda linha, deslizante, em vez de
     encolher para um menu escondido: são três itens, e escondê-los
     custava mais um toque por nada. */
  .navegacao {
    grid-column: 2 / -1;
    order: 5;
    overflow-x: auto;
    padding-bottom: 2px;
    gap: 18px;
  }
  .tema { order: 1; }
  .conta { order: 2; }
  .procura { order: 3; min-width: 0; }
  /* A caixa ocupa o que sobra em vez de ter largura fixa: com 150px
     fixos, marca + caixa somavam mais do que os 390px de um telemóvel
     comum e a página transbordava. */
  .procura__campo { width: 100%; min-width: 0; max-width: none; }

  .dial__pista { height: 196px; }
  .dial__estacao { width: 104px; }

  /* Uma coluna. NÃO repeat(auto-fill, minmax(100%, 1fr)): aí cada coluna
     mede 100% do contentor e a goteira soma-se por cima, o que fazia a
     grelha ultrapassar a largura do ecrã. */
  .grelha, .grelha--compacta { grid-template-columns: minmax(0, 1fr); }

  .dados__par { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  /* O volume sai do player no telemóvel: o botão físico do aparelho já
     faz esse trabalho e o espaço é preciso para o nome da rádio. */
  .player__volume { display: none; }
}

@media (max-width: 420px) {
  .marca__nome { display: none; }
  .hero { padding: 34px 0 22px; }
}

/* --------------------------------------------------------------------------
   14. Movimento reduzido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* As barras de nível deixam de saltar mas continuam a marcar presença. */
  .player__nivel i { height: 62%; }
}