/* Folha da capa — e de mais nenhuma página.
 *
 * O `estilo.css` é partilhado pelas oito páginas do site, e três delas
 * (`/entrar`, `/registo`, `/join-driver`) são fluxos do produto ligados à base
 * de dados. Mudar lá um espaçamento para arranjar a capa desalinha um
 * formulário que ninguém estava a olhar. Por isso a capa traz o que é só dela
 * para aqui, e carrega esta folha **depois** daquela.
 *
 * O que vem de lá e não se repete: `.barra`, `.interior`, `.conteudo`,
 * `.rodape`, a pilha de tipos e as variáveis de cor. A capa parece da mesma
 * família que o `/entrar` porque **é** a mesma folha por baixo.
 *
 * ⚠️ **Atualizado (2026-09-11): a paleta foi refeita.** Chegou o logótipo e com
 * ele a regra que o obriga — o turquesa da marca vive sobre a noite, nunca
 * sobre branco. Os valores estão em `:root`, logo abaixo, um por **trabalho**
 * e não um por cor.
 *
 * ⚠️ **O `#0EA5A5` é a turquesa da marca** — a 11/09 tinha saído daqui por uma
 * paleta intermédia, e a 14/09 voltou. O que nunca mudou foi o número: com
 * texto branco por cima dá 3.02 e chumba. A marca resolve-o pelo TEXTO e não
 * pela cor: o que assenta na turquesa é azulejo. O `estilo.css` ainda põe
 * branco nos botões do `/entrar` e do `/registo` — é uma linha, e é do produto.
 *
 * O botão principal desta página é azul-noite, e não turquesa, pela mesma razão
 * de sempre: 14.36:1 contra 3.02:1.
 */

:root {
  /* A paleta vem do `brand.json` da marca, em
   * `Drive → redes_e_anuncios/marcas/myfleet/brand.json`, fixada a 14/09/2026.
   * Não se tiram cores de capturas de ecrã nem do que passou em conversa.
   *
   * ⚠️ **A turquesa não é uma cor, são três papéis**, e usar o valor errado no
   * sítio errado chumba contraste:
   *
   *   --turquesa        #0EA5A5  BLOCOS e botões. O texto por cima é AZULEJO
   *                              (4.75); branco por cima dá 3.02 e chumba.
   *   --turquesa-texto  #0F7A7A  quando a turquesa é TINTA sobre fundo claro
   *   --turquesa-clara  #3FD0D0  quando assenta sobre navy (7.62)
   *
   * ⚠️ **Atualizado (14/09): isto substitui uma paleta intermédia que durou
   * três dias** — `#208383`, `#1A6B6B` e `#C2F0F0`, que nunca chegaram a ser da
   * marca. As dez razões de contraste que o `brand.json` declara foram medidas
   * aqui uma a uma antes de adotar: conferem todas ao centésimo. */
  --turquesa: #0ea5a5;
  --turquesa-texto: #0f7a7a;
  --turquesa-clara: #3fd0d0;
  /* Fundo lavado para as placas dos ícones — a turquesa da marca a 12% sobre
   * branco. Não é cor nova: o `brand.json` não define nenhum tom de água. */
  --turquesa-lavada: #e3f6f6;

  --capa-accent-texto: var(--turquesa-texto);
  --capa-noite: #0f2038;
  --capa-branco-suave: #c8d3e4;
}

/* -------------------------------------------------- saltar para o conteúdo
 * Primeiro elemento focável da página. Fica fora do ecrã até alguém lhe chegar
 * com o teclado — quem navega assim não tem de percorrer a barra inteira em
 * todas as páginas para chegar ao texto. */

.c-saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 9px 0;
  text-decoration: none;
  z-index: 10;
}
.c-saltar:focus { left: 0; }

/* Sobre a noite o azul do foco desaparece; é lá que a turquesa clara serve. */
.c-heroi a:focus-visible,
.c-motorista a:focus-visible { outline-color: var(--turquesa-clara); }

/* -------------------------------------------------- foco
 * O `estilo.css` só põe foco visível nos `input`. Aqui vale para tudo o que se
 * pode alcançar com o teclado — sem isto, quem navega por tabulação não sabe
 * onde está. */

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* -------------------------------------------------- a caixa central
 * ⚠️ O `estilo.css` dá largura e margens ao `.interior` **só dentro da
 * `.barra`** (`.barra .interior, .conteudo { … }`). Um `.interior` solto, como
 * os que as secções desta página usam, não apanha nenhuma das duas — e o texto
 * encosta ao canto do ecrã. Não dá erro nenhum: só fica feio no telemóvel, que
 * é onde isto vai ser lido. */

.c-heroi > .interior,
.c-seccao > .interior {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
}

/* -------------------------------------------------- barra */

/* O cabeçalho era a palavra "Myfleet" escrita à mão em negrito. Passa a levar
 * o símbolo ao lado — o mesmo azulejo do separador do browser, para quem chega
 * reconhecer que está no mesmo sítio.
 *
 * O `alt` da imagem é vazio de propósito: o nome já está escrito no `<span>` ao
 * lado, e um leitor de ecrã a dizer "Myfleet Myfleet" não ajuda ninguém. */
.barra .marca { display: inline-flex; align-items: center; }
/* O lockup já traz a palavra desenhada em contornos — não se remonta à mão com
 * o símbolo ao lado de um <span>, que era o que aqui estava e dava duas
 * tipografias diferentes na mesma marca. */
.marca__lockup { display: block; height: 28px; width: auto; }

.barra .c-entrar { font-weight: 600; color: var(--primary); }

.barra .c-experimentar {
  background: var(--primary);
  color: #fff;
  padding: 8px 16px;
  border-radius: 9px;
  font-weight: 600;
  white-space: nowrap;
}
.barra .c-experimentar:hover { color: #fff; background: var(--capa-noite); }

/* -------------------------------------------------- herói
 * Azul cheio, texto branco: 14.36:1. Duas colunas no ecrã largo — as palavras
 * de um lado, o produto do outro. Empilha no telemóvel, com o desenho a
 * seguir ao botão: quem chega de telemóvel decide pelo texto, e o desenho é
 * confirmação, não introdução. */

.c-heroi {
  background: var(--primary);
  background-image:
    radial-gradient(circle at 88% 8%, rgba(63, 208, 208, 0.28), rgba(63, 208, 208, 0) 58%),
    radial-gradient(circle at 4% 96%, rgba(63, 208, 208, 0.12), rgba(63, 208, 208, 0) 46%);
  color: #fff;
  padding: 60px 0 64px;
  overflow: hidden;
}

.c-heroi__grelha { display: grid; gap: 44px; align-items: center; }

@media (min-width: 900px) {
  .c-heroi { padding: 76px 0 80px; }
  .c-heroi__grelha { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr); gap: 40px; }
}

.c-selo {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--turquesa-clara);
  border: 1px solid rgba(63, 208, 208, 0.45);
  border-radius: 999px;
  padding: 5px 13px;
  margin-bottom: 20px;
}

.c-heroi h1 {
  font-size: 2.5rem;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

.c-heroi .c-abertura {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--capa-branco-suave);
  max-width: 26em;
  margin: 0 0 30px;
}

/* -------------------------------------------------- o desenho do produto
 * Não é uma captura de ecrã e não finge ser: é a estrutura verdadeira do fecho
 * semanal, desenhada com as cores da marca. Os números são exemplo.
 *
 * ⚠️ Nenhum destes valores pode ficar na forma `>N €<`: há um teste que lê este
 * ficheiro e chumba qualquer euro que não seja um preço de plano. Todos levam
 * casas decimais, que é o que os põe fora desse padrão — e por acaso é também
 * como um fecho a sério se escreve. */

.c-mostruario { position: relative; padding-bottom: 54px; }

.c-painel {
  background: #fff;
  color: var(--primary);
  border-radius: 18px;
  padding: 22px 24px 18px;
  box-shadow: 0 24px 60px rgba(5, 15, 30, 0.42);
  margin-left: auto;
  max-width: 420px;
}

/* ⚠️ **O telemóvel sobrepõe-se ao painel, e só lhe pode tapar a margem.**
 * O primeiro rascunho punha-o a cobrir 122px do painel — tapava os avatares e
 * os nomes dos motoristas, e o que sobrava eram três valores em euros a
 * flutuar sozinhos no ar. Um desenho de produto que parece avariado é pior do
 * que não ter desenho nenhum.
 *
 * A regra: o telemóvel acaba **antes** de onde começa o conteúdo do painel.
 * O painel afasta-se para a direita o suficiente para isso ser verdade. */
@media (min-width: 900px) {
  .c-painel { margin-left: 148px; max-width: none; }
}

.c-painel__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.c-painel__titulo { font-weight: 700; font-size: 0.95rem; }

.c-etiqueta {
  font-size: 0.72rem;
  color: var(--turquesa-texto);
  background: var(--turquesa-lavada);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.c-painel__valor { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.c-painel__legenda { font-size: 0.8rem; color: var(--texto-suave); margin-top: 2px; }

.c-barras {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 74px;
  margin: 20px 0 18px;
}
.c-barras span { flex: 1; background: var(--turquesa); border-radius: 4px 4px 2px 2px; opacity: 0.34; }
.c-barras span:nth-child(6) { opacity: 1; }
.c-barras span:nth-child(7) { opacity: 0.62; }

.c-linhas { border-top: 1px solid var(--contorno); padding-top: 12px; display: grid; gap: 10px; }
.c-linha { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; }

.c-inicial {
  width: 27px; height: 27px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.64rem; font-weight: 700; color: #fff; flex: none;
}
.c-inicial--a { background: #2f6fa8; }
.c-inicial--b { background: var(--turquesa-texto); }
.c-inicial--c { background: #6b5ea8; }

.c-nome { flex: 1; color: var(--texto-suave); }
.c-valor { font-weight: 700; font-variant-numeric: tabular-nums; }

/* O telemóvel encosta-se ao painel pela esquerda — é o mesmo fecho visto do
 * outro lado, e é essa a ideia que a sobreposição transmite sem uma legenda. */
.c-telemovel {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 158px;
  border-radius: 22px;
  padding: 7px;
  background: #0b1728;
  box-shadow: 0 22px 46px rgba(5, 15, 30, 0.5);
}

.c-telemovel__ecra { background: #fff; border-radius: 16px; overflow: hidden; color: var(--primary); }

.c-telemovel__topo {
  /* ⚠️ Texto AZULEJO sobre a turquesa, e não branco: 4.75 contra 3.02. É a
   * regra crítica do `brand.json`, e é o contrário do que o instinto diz. */
  background: var(--turquesa);
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 9px 13px;
}

.c-telemovel__corpo { padding: 12px 13px 14px; }

/* O valor nunca parte de linha: um número cortado ao meio num desenho de
 * produto lê-se como avaria. O rótulo é que encolhe, se for preciso. */
.c-mini { display: flex; justify-content: space-between; gap: 6px; font-size: 0.66rem; color: var(--texto-suave); margin-bottom: 6px; }
.c-mini span:first-child { min-width: 0; }
.c-mini span:last-child { font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-mini--tira span:last-child { color: var(--capa-accent-texto); }

.c-telemovel__total { border-top: 1px solid var(--contorno); margin-top: 10px; padding-top: 10px; }
.c-telemovel__rotulo { display: block; font-size: 0.68rem; color: var(--texto-suave); }
.c-telemovel__numero { display: block; font-size: 1.32rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.c-selo-ok {
  margin-top: 11px;
  background: #e7f3e9;
  color: var(--success);
  font-size: 0.66rem;
  font-weight: 700;
  text-align: center;
  border-radius: 7px;
  padding: 6px;
}

/* -------------------------------------------------- ações */

.c-accoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.c-accao {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  background: #fff;
  color: var(--primary);
  border: 2px solid #fff;
}
.c-accao:hover { background: var(--capa-branco-suave); border-color: var(--capa-branco-suave); }

.c-accao--linha {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.c-accao--linha:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }

/* -------------------------------------------------- "abre a 1 de outubro"
 * ⚠️ **Isto tem forma de aviso e não de botão, de propósito.**
 *
 * O que aqui estava era o botão de criar conta. As contas só abrem a 1 de
 * outubro, e a tentação é deixar o botão com a data escrita lá dentro. Este
 * repositório já documenta porque não, no `estilo.css`, a propósito do botão da
 * Apple: *"um botão que não faz nada ao ser tocado é a pior das três hipóteses
 * (…) quem carrega e não vê nada acontecer não conclui «ainda não está pronto»,
 * conclui que o site está avariado — e a seguir não confia nos outros botões."*
 *
 * Por isso: sem fundo cheio, sem cursor de mão, com um ponto que o marca como
 * estado e não como ação. Quando as contas abrirem, isto volta a ser um
 * `<a class="c-accao" href="/registo">`. */

.c-quando {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  border: 1px dashed rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.06);
}
.c-quando::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--turquesa-clara);
  flex: none;
}

/* Sobre fundo claro trocam-se os valores, mantendo a mesma forma. */
.c-quando--claro {
  color: var(--primary);
  border-color: var(--contorno);
  background: #fff;
}
.c-quando--claro::before { background: var(--turquesa); }

/* Fora do herói o fundo é claro, e a lógica inverte-se: azul cheio, texto
 * branco. Mesmo contraste, mesmo botão. */
.c-accao--escuro { background: var(--primary); color: #fff; border-color: var(--primary); }
.c-accao--escuro:hover { background: var(--capa-noite); border-color: var(--capa-noite); }

.c-nota-trial { margin: 18px 0 0; font-size: 0.92rem; color: var(--capa-branco-suave); }

/* -------------------------------------------------- secções */

.c-seccao { padding: 56px 0; }
.c-seccao--branca { background: #fff; border-top: 1px solid var(--contorno); border-bottom: 1px solid var(--contorno); }

.c-seccao h2 {
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.c-seccao > .interior > .c-intro,
.c-intro {
  color: var(--texto-suave);
  max-width: 44em;
  margin: 0 0 32px;
}

/* -------------------------------------------------- ícones
 * Desenhados à linha, na tinta turquesa de leitura sobre o seu próprio fundo
 * lavado. Nada de ícones genéricos de tecnologia — engrenagens, nuvens,
 * foguetes: quem os vê conclui, com razão, que não há obra para mostrar. */

.c-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--turquesa-lavada);
  color: var(--turquesa-texto);
  flex: none;
}
.c-icone svg { width: 24px; height: 24px; }
.c-icone--pequeno { width: 40px; height: 40px; border-radius: 11px; }
.c-icone--pequeno svg { width: 21px; height: 21px; }

/* -------------------------------------------------- a semana, em três passos
 * Uma lista ordenada, e não uma grelha de caixas iguais: a ordem é a
 * informação. Primeiro entram as viagens, depois fecha-se, depois paga-se. */

.c-passos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.c-passos li {
  background: #fff;
  border: 1px solid var(--contorno);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(21, 42, 74, 0.04);
}

.c-passo-n {
  display: block;
  margin: 16px 0 2px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--capa-accent-texto);
}

.c-passos h3 { margin: 0 0 6px; font-size: 1.12rem; }
.c-passos p { color: var(--texto-suave); margin: 0; }

/* -------------------------------------------------- para onde foi cada euro
 * A tabela de números que aqui estava era a parte mais fria da página. Uma
 * fita de proporções diz a mesma coisa de relance: a maior fatia é a que fica
 * para o motorista, e vê-se antes de se ler.
 *
 * A fita é `aria-hidden` — é a mesma informação da lista logo abaixo, e uma
 * barra lida em voz alta não acrescenta nada a quem não a vê. */

.c-cascata {
  background: #fff;
  border: 1px solid var(--contorno);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 4px 18px rgba(21, 42, 74, 0.05);
  max-width: 680px;
}

.c-cascata__valor { display: block; font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.c-cascata__legenda { display: block; font-size: 0.88rem; color: var(--texto-suave); margin-top: 3px; }

.c-fita {
  display: flex;
  height: 20px;
  border-radius: 6px;
  overflow: hidden;
  margin: 22px 0 20px;
  gap: 2px;
}
.c-fita__parte--liquido { background: var(--turquesa); }
.c-fita__parte--taxa    { background: #2f6fa8; }
.c-fita__parte--via     { background: #6b5ea8; }
.c-fita__parte--comb    { background: #98a4b3; }

.c-chaves { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

.c-chave { display: flex; align-items: center; gap: 11px; font-size: 0.95rem; }
.c-chave__nome { flex: 1; color: var(--texto-suave); }
.c-chave__valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.c-chave--forte { padding-bottom: 11px; border-bottom: 1px solid var(--contorno); }
.c-chave--forte .c-chave__nome { color: var(--primary); font-weight: 600; }
.c-chave--forte .c-chave__valor { font-size: 1.2rem; }

.c-ponto { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.c-ponto--liquido { background: var(--turquesa); }
.c-ponto--taxa    { background: #2f6fa8; }
.c-ponto--via     { background: #6b5ea8; }
.c-ponto--comb    { background: #98a4b3; }

.c-cascata__pe { margin: 20px 0 0; font-size: 0.8rem; color: var(--texto-suave); }

.c-cascata__lado p { color: var(--texto-suave); max-width: 34em; }
.c-cascata__lado p:last-child { margin-bottom: 0; }

/* O quadro sozinho deixava metade da secção em branco num ecrã largo. */
@media (min-width: 900px) {
  .c-prova { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 44px; align-items: center; }
  .c-cascata { max-width: none; }
}

/* -------------------------------------------------- e ainda trata disto
 * Peso menor de propósito. São razões para ficar, não para entrar. */

.c-resto { margin: 0; display: grid; grid-template-columns: 1fr; gap: 24px 48px; }
@media (min-width: 720px) { .c-resto { grid-template-columns: 1fr 1fr; } }

.c-resto__item { display: flex; gap: 15px; align-items: flex-start; }
.c-resto dt { font-weight: 700; margin: 0 0 3px; }
.c-resto dd { margin: 0; color: var(--texto-suave); }

/* -------------------------------------------------- preços
 * ⚠️ A tabela tem forma obrigatória: `packages/core/test/planos_test.dart` lê
 * este HTML e confere cada linha de plano célula a célula. Ver o comentário no
 * `index.html`, por cima da tabela. */

/* A tabela era a secção mais pobre da página: branca sobre branca, sem
 * contorno nem relevo, ao lado de blocos que os tinham todos. É a secção que
 * tem de converter — não pode ser a que menos se vê. */
.c-quadro {
  background: #fff;
  border: 1px solid var(--contorno);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(21, 42, 74, 0.05);
  overflow: hidden;
}

.c-rola { overflow-x: auto; }
.c-precos { min-width: 440px; border-radius: 0; }
.c-precos thead th { background: #f4fbfb; color: var(--capa-accent-texto); }
.c-precos tbody tr:last-child td { border-bottom: none; }
.c-precos td { font-variant-numeric: tabular-nums; }
.c-precos tbody tr:hover td { background: #fbfcfd; }
.c-precos .c-plano { font-weight: 700; color: var(--primary); }

.c-fecho-de-seccao { margin-top: 30px; }

/* -------------------------------------------------- motoristas */

.c-motorista {
  background: var(--primary);
  background-image: radial-gradient(circle at 92% 12%, rgba(63, 208, 208, 0.26), rgba(63, 208, 208, 0) 62%);
  color: #fff;
  border-radius: 18px;
  padding: 34px;
  display: grid;
  gap: 26px;
  align-items: center;
}
@media (min-width: 780px) { .c-motorista { grid-template-columns: minmax(0, 1fr) auto; padding: 40px; } }

.c-motorista h2 { color: #fff; margin: 0 0 10px; }
.c-motorista p { color: var(--capa-branco-suave); max-width: 40em; margin: 0 0 10px; }
.c-motorista strong { color: #fff; }
.c-motorista a { color: #fff; }
.c-motorista__forte { color: #fff !important; font-weight: 700; margin-bottom: 0 !important; }

/* O código de adesão é a única coisa que o motorista precisa de ter na mão.
 * Vale mais mostrá-lo do que descrevê-lo. */
.c-codigo {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 18px 26px;
  text-align: center;
}
.c-codigo__rotulo { display: block; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--turquesa-clara); margin-bottom: 6px; }
.c-codigo__valor {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* -------------------------------------------------- rodapé */

.rodape .c-ligacoes { margin: 0 0 14px; line-height: 2; }
.rodape .c-ligacoes a { margin-right: 4px; }
.rodape .c-entidade { margin: 0 0 18px; font-size: 0.85rem; }

/* A assinatura da casa que faz o produto. Discreta, no fim, e só ela — a
 * Bigorna é quem constrói, não é a marca deste site. */
.rodape .c-feito-na-bigorna {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--contorno);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

/* -------------------------------------------------- telemóvel
 * É onde o cliente-alvo vai ler isto, provavelmente entre duas tarefas. */

@media (max-width: 640px) {
  .c-heroi { padding: 34px 0 44px; }
  .c-heroi h1 { font-size: 1.92rem; }
  .c-heroi .c-abertura { font-size: 1.06rem; margin-bottom: 26px; }
  .c-selo { margin-bottom: 16px; }
  .c-painel { max-width: none; padding: 18px 18px 15px; }
  .c-painel__valor { font-size: 1.7rem; }
  .c-mostruario { padding-bottom: 0; }

  /* ⚠️ Num ecrã de 342px úteis não cabem dois objectos sobrepostos sem um
   * tapar o outro — foi o mesmo defeito que se corrigiu no desktop, e aqui não
   * há afastamento que chegue. Fica o painel, que é o que conta a história da
   * frota; o fecho do motorista aparece na secção dele, mais abaixo. */
  .c-telemovel { display: none; }
  .c-seccao { padding: 40px 0; }
  .c-seccao h2 { font-size: 1.4rem; }
  .c-accoes { flex-direction: column; align-items: stretch; }
  .c-accao { text-align: center; }
  .c-cascata { padding: 20px; }
  .c-cascata__valor { font-size: 1.85rem; }
  .c-passos li { padding: 20px; }
  .c-motorista { padding: 24px; }
  .c-codigo__valor { font-size: 1.45rem; }
  .barra .c-experimentar { padding: 7px 12px; font-size: 0.9rem; }

  /* ⚠️ A quarta coluna — o preço anual — ficava atrás de um scroll lateral que
   * nada anunciava, e o anual é o que a página promete como sendo dez meses.
   * Um preço que é preciso descobrir é um preço que não está lá. Aperta-se a
   * tabela até caber, em vez de a esconder. */
  .c-precos { min-width: 0; }
  .c-precos th, .c-precos td { padding: 10px 7px; font-size: 0.84rem; }
}

/* -------------------------------------------------- pré-registo
 *
 * A secção que capta quem chegou ao fim dos preços e ainda não pode comprar.
 * Fundo escuro de propósito: é a única secção da capa que pede alguma coisa, e
 * tem de se distinguir das que só explicam.
 *
 * ⚠️ **Contrastes, todos sobre o azul-noite (`--capa-noite`, #0f2038):**
 *
 *   branco #fff              ~15.9:1   texto corrido
 *   turquesa-clara #3fd0d0    ~8.0:1   números da oferta
 *   branco-suave #c8d3e4     ~10.3:1   letra miúda
 *   azulejo sobre turquesa    4.75:1   o texto do botão
 *
 * A `--turquesa-clara` é a única que pode assentar aqui: a `--turquesa` cheia
 * (#0ea5a5) sobre este fundo fica abaixo de 4.5 e o `capa.css` já diz, no topo,
 * que ela é para blocos e não para tinta. */

.c-pre {
  background: var(--capa-noite);
  color: #fff;
}

.c-pre h2 { color: #fff; }

.c-pre__intro {
  margin: 0 0 28px;
  max-width: 62ch;
  color: var(--capa-branco-suave);
  font-size: 1.05rem;
}
.c-pre__intro strong { color: #fff; }

.c-pre__oferta {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.c-pre__oferta li {
  flex: 1 1 260px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.c-pre__numero {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--turquesa-clara);
  white-space: nowrap;
}

.c-pre__texto { color: var(--capa-branco-suave); }

.c-pre__form { margin: 0 0 14px; }

.c-pre__campos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}

.c-pre__campo {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.92rem;
  font-weight: 600;
}

/* Campos em branco sobre o escuro: um campo escuro sobre fundo escuro esconde
 * onde é que se escreve, e a borda sozinha não chega para quem vê mal. */
.c-pre__campo input {
  font: inherit;
  font-weight: 400;
  padding: 12px 14px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: #fff;
  color: var(--primary);
}
.c-pre__campo input::placeholder { color: #6b7686; }
.c-pre__campo input:focus-visible {
  outline: 3px solid var(--turquesa-clara);
  outline-offset: 2px;
}

/* Turquesa-clara com tinta azulejo: 4.75:1. É o mesmo par que o `estilo.css`
 * usa nos botões desde 14/09, e pela mesma razão — branco por cima da turquesa
 * dava 3.02 e chumbava AA. */
/* ⚠️ O `width: auto` e o `margin: 0` não são supérfluos — são a correção de um
 * defeito que já apareceu duas vezes no mesmo dia. O `estilo.css`, que esta
 * página também carrega, tem `button, .botao { display:block; width:100%;
 * margin-top:18px }`, e apanha qualquer `<button>`. Sem estas duas linhas o
 * botão atravessava a secção de lado a lado.
 *
 * A capa nunca tinha tido um `<button>` — só ligações — e por isso a regra
 * nunca se tinha feito sentir aqui. Quem puser o próximo botão nesta página
 * leva com o mesmo. */
.c-pre__botao {
  font: inherit;
  font-weight: 700;
  width: auto;
  margin: 0;
  padding: 13px 26px;
  border: none;
  border-radius: 9px;
  background: var(--turquesa-clara);
  color: var(--primary);
  cursor: pointer;
}
.c-pre__botao:hover { background: #5ad9d9; }
.c-pre__botao:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.c-pre__alternativa {
  margin: 0 0 22px;
  font-size: 0.92rem;
  color: var(--capa-branco-suave);
}
.c-pre__alternativa a { color: #fff; }

.c-pre__letra-miuda {
  margin: 0;
  max-width: 68ch;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--capa-branco-suave);
}
.c-pre__letra-miuda a { color: #fff; }

/* O aviso da data deixou de estar dentro do `.c-accoes` do herói — saiu do meio
 * dos botões para não competir com o que agora se pode fazer. */
.c-quando--solto {
  margin: 16px 0 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.95rem;
  color: var(--capa-branco-suave);
}
.c-quando--solto::before { display: none; }

@media (max-width: 640px) {
  .c-pre__oferta li { flex-basis: 100%; }
  .c-pre__botao { width: 100%; }
}