/* ============================================================
   FICHEIRO: css/style.css
   O QUE É?
   É a "pintura" do site. O index.html diz o que existe; este ficheiro
   diz como deve aparecer: cores, espaçamentos, tamanhos e layout.

   COMO ESTÁ ORGANIZADO?
   1. Variáveis (cores e medidas reutilizáveis)
   2. Reset (limpeza de estilos do navegador)
   3. Base (tipografia e ligações)
   4. Cabeçalho
   5. Navegação
   6. Conteúdo principal
   7. Painel principal
   8. Calculador (formulário)
   9. Resultados
   10. Tabela de comparação
   11. Recomendação e mensagem ao cliente
   12. Definições
   13. Rodapé
   14. Utilitários
   15. Responsivo (telemóvel e tablet)

   NOMES:
   As classes e os ids estão em português, sem acentos, para serem
   fáceis de escrever e de procurar.
   ============================================================ */

/* ============================================================
   1. VARIÁVEIS
   ------------------------------------------------------------
   Uma variável CSS guarda um valor com um nome. Assim, se quisermos
   mudar a cor principal do site, mudamos aqui uma vez e o valor
   atualiza-se em todos os sítios onde for usado.
   ============================================================ */
:root {
  color-scheme: light;

  /* Cores principais */
  --cor-primaria: #0f766e;
  --cor-primaria-escura: #115e59;
  --cor-primaria-clara: #ccfbf1;

  /* Texto e fundos */
  --cor-texto: #1e293b;
  --cor-texto-suave: #475569;
  --cor-fundo: #f8fafc;
  --cor-superficie: #ffffff;
  --cor-borda: #e2e8f0;
  --cor-borda-forte: #cbd5e1;

  /* Cores de estado */
  --cor-perigo: #991b1b;
  --cor-perigo-fundo: #fef2f2;
  --cor-aviso: #92400e;
  --cor-aviso-fundo: #fffbeb;
  --cor-sucesso: #166534;
  --cor-sucesso-fundo: #f0fdf4;

  /* Cores dos botões principais e estados auxiliares */
  --cor-botao-primario: #0f766e;
  --cor-botao-primario-hover: #115e59;
  --cor-botao-primario-texto: #ffffff;
  --cor-fundo-suave: #f1f5f9;
  --cor-foco: rgba(15, 118, 110, 0.45);
  --cor-foco-suave: rgba(15, 118, 110, 0.15);

  /* Sombras */
  --sombra-pequena: 0 1px 2px rgba(15, 23, 42, 0.06);
  --sombra: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 28px rgba(15, 23, 42, 0.07);

  /* Cantos arredondados */
  --raio: 14px;
  --raio-pequeno: 9px;

  /* Medidas */
  --largura-maxima: 1120px;
  --transicao: 160ms ease;

  /* Tipo de letra: usamos as fontes do próprio sistema.
     Não é preciso descarregar nada da Internet. */
  --fonte: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   TEMA ESCURO
   ------------------------------------------------------------
   Quando o <html> tem data-tema="escuro", estas variáveis
   substituem as do tema claro. O resto do CSS não precisa de
   saber qual é o tema: continua a usar as mesmas variáveis.
   ============================================================ */
[data-tema="escuro"] {
  color-scheme: dark;

  --cor-primaria: #2dd4bf;
  --cor-primaria-escura: #5eead4;
  --cor-primaria-clara: #134e4a;

  --cor-texto: #f1f5f9;
  --cor-texto-suave: #cbd5e1;
  --cor-fundo: #0f172a;
  --cor-superficie: #1e293b;
  --cor-borda: #334155;
  --cor-borda-forte: #475569;

  --cor-perigo: #fca5a5;
  --cor-perigo-fundo: #450a0a;
  --cor-aviso: #fcd34d;
  --cor-aviso-fundo: #451a03;
  --cor-sucesso: #86efac;
  --cor-sucesso-fundo: #052e16;

  --cor-botao-primario: #2dd4bf;
  --cor-botao-primario-hover: #5eead4;
  --cor-botao-primario-texto: #0f172a;
  --cor-fundo-suave: #334155;
  --cor-foco: rgba(45, 212, 191, 0.55);
  --cor-foco-suave: rgba(45, 212, 191, 0.25);

  --sombra-pequena: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   2. RESET
   ------------------------------------------------------------
   Os navegadores têm estilos diferentes por defeito. O reset
   coloca todos a partir do mesmo ponto.
   ============================================================ */

/* Inclui a borda e o espaçamento interior na largura total. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove as margens que o navegador coloca por defeito. */
* {
  margin: 0;
}

/* Permite rolar suavemente para as âncoras (#painel, #calculador, ...). */
html {
  scroll-behavior: smooth;
}

/* O atributo hidden tem de vencer qualquer display definido no CSS.
   Vai ser usado na Etapa 5 para esconder secções e mensagens. */
[hidden] {
  display: none !important;
}

/* ============================================================
   3. BASE
   ============================================================ */
body {
  min-height: 100vh;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Imagens e ícones nunca ultrapassam o espaço disponível. */
img,
svg {
  display: block;
  max-width: 100%;
}

/* Os campos de formulário usam a mesma letra do resto da página. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Ligações: sublinhado discreto e cor da marca. */
a {
  color: var(--cor-primaria);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--cor-primaria-escura);
}

/* Contorno visível para quem navega com o teclado. */
:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

/* Títulos com pouco espaço entre linhas e tamanho responsivo. */
h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h1 {
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
}

h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}

h3 {
  font-size: 1.1rem;
}

p {
  margin-bottom: 0.8rem;
}

ul,
ol {
  padding-left: 1.25rem;
}

/* ============================================================
   4. CABEÇALHO
   ------------------------------------------------------------
   position: sticky faz o cabeçalho ficar no topo enquanto se
   faz scroll. z-index coloca-o por cima dos restantes elementos.
   ============================================================ */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--cor-borda);
  backdrop-filter: blur(8px);
}

/* Duas linhas no cabeçalho:
   - em cima: marca à esquerda e navegação à direita;
   - em baixo: idioma e tema centrados.
   Isto evita que a navegação se parta em várias linhas num espaço
   demasiado estreito. */
.cabecalho-conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
}

/* A marca é uma ligação para o painel. */
.marca {
  display: inline-flex;
  align-items: center;
  order: 1;
  gap: 0.65rem;
  color: var(--cor-texto);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.marca:hover {
  color: var(--cor-texto);
}

/* O quadrado "SG" da marca. */
.marca-simbolo {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 10px;
  background-color: var(--cor-botao-primario);
  color: var(--cor-botao-primario-texto);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.marca-nome {
  font-size: 1.02rem;
}

/* ============================================================
   5. NAVEGAÇÃO
   ============================================================ */
.navegacao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  order: 2;
  margin-left: auto;
  gap: 0.25rem;
}

.navegacao-ligacao {
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  color: var(--cor-texto-suave);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transicao), color var(--transicao);
}

.navegacao-ligacao:hover {
  background-color: var(--cor-fundo-suave);
  color: var(--cor-texto);
}

/* A ligação da secção atual. O JavaScript vai mudar esta classe. */
.navegacao-ligacao.esta-ativo {
  background-color: var(--cor-primaria-clara);
  color: var(--cor-primaria-escura);
}

/* Controlos de idioma e tema, centrados numa linha própria. */
.seletor-idioma {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  order: 3;
  flex-basis: 100%;
  gap: 0.5rem;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

.seletor-idioma label {
  font-weight: 600;
}

.seletor-idioma select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  background-color: var(--cor-superficie);
}

/* ============================================================
   6. CONTEÚDO PRINCIPAL
   ============================================================ */
.conteudo-principal {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 2.25rem 1.25rem 4rem;
}

/* Cada secção ocupa uma "página" do painel. */
.secao {
  margin-bottom: 3.5rem;
  /* Deixa espaço para o cabeçalho fixo ao saltar para uma âncora. */
  scroll-margin-top: 6rem;
}

.secao:last-child {
  margin-bottom: 0;
}

.secao-cabecalho {
  max-width: 68ch;
  margin-bottom: 1.5rem;
}

.etiqueta {
  margin-bottom: 0.35rem;
  color: var(--cor-primaria);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.descricao {
  color: var(--cor-texto-suave);
  font-size: 1.02rem;
}

/* ============================================================
   7. PAINEL PRINCIPAL
   ============================================================ */

/* Duas colunas no computador; uma no telemóvel. */
.painel-acoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

/* Um cartão é uma "caixa" branca com borda e sombra. */
.cartao {
  padding: 1.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background-color: var(--cor-superficie);
  box-shadow: var(--sombra-pequena);
}

.cartao h2 {
  margin-bottom: 0.5rem;
}

/* O cartão principal tem uma barra colorida no topo. */
.cartao-destaque {
  border-top: 4px solid var(--cor-primaria);
  box-shadow: var(--sombra);
}

.lista-passos {
  margin: 0;
  color: var(--cor-texto-suave);
}

.lista-passos li {
  margin-bottom: 0.35rem;
}

/* Grelha de categorias: cria colunas automaticamente.
   auto-fill + minmax significa: "cria quantas colunas couberem,
   com um mínimo de 230px e um máximo de 1 fração do espaço". */
.grelha-categorias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}

.cartao-categoria {
  padding: 1.1rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background-color: var(--cor-superficie);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.cartao-categoria:hover {
  border-color: var(--cor-borda-forte);
  box-shadow: var(--sombra-pequena);
}

.cartao-categoria h3 {
  margin-bottom: 0.3rem;
  font-size: 1rem;
}

.cartao-categoria p {
  margin-bottom: 0;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

/* ============================================================
   8. BOTÕES
   ============================================================ */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--raio-pequeno);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao),
    color var(--transicao), transform var(--transicao);
}

.botao:active {
  transform: translateY(1px);
}

/* Botões desativados: por exemplo, "Copiar mensagem" antes de haver texto. */
.botao:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.botao-principal:disabled:hover {
  background-color: var(--cor-botao-primario);
  color: var(--cor-botao-primario-texto);
}

.botao-secundario:disabled:hover {
  background-color: var(--cor-superficie);
  color: var(--cor-texto);
}

.botao-principal {
  background-color: var(--cor-botao-primario);
  color: var(--cor-botao-primario-texto);
}

.botao-principal:hover {
  background-color: var(--cor-botao-primario-hover);
  color: var(--cor-botao-primario-texto);
}

.botao-secundario {
  border-color: var(--cor-borda-forte);
  background-color: var(--cor-superficie);
  color: var(--cor-texto);
}

.botao-secundario:hover {
  background-color: var(--cor-fundo-suave);
  color: var(--cor-texto);
}

/* ============================================================
   9. FORMULÁRIO DO CALCULADOR
   ============================================================ */
.formulario {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background-color: var(--cor-superficie);
  box-shadow: var(--sombra-pequena);
}

/* Cada campo tem uma etiqueta, um controlo e, às vezes, ajuda. */
.campo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.campo label {
  font-size: 0.95rem;
  font-weight: 700;
}

.campo select,
.campo input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  background-color: var(--cor-superficie);
}

.campo select:focus,
.campo input:focus {
  border-color: var(--cor-primaria);
  outline: none;
  box-shadow: 0 0 0 3px var(--cor-foco-suave);
}

.ajuda {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.84rem;
}

/* Campos adicionais (cozinha e número de equipamentos).
   Ocupam a largura toda do formulário e têm a sua própria grelha. */
.campos-adicionais {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  grid-column: 1 / -1;
}

.campos-adicionais .etiqueta {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.ajuda-campos-adicionais {
  grid-column: 1 / -1;
}

/* As ações ocupam a largura toda das duas colunas. */
.formulario-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  grid-column: 1 / -1;
  padding-top: 0.25rem;
}

/* ============================================================
   10. MENSAGENS DE ESTADO
   ============================================================ */
.mensagem {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--raio-pequeno);
  font-weight: 600;
}

.mensagem-erro {
  border-color: #fecaca;
  background-color: var(--cor-perigo-fundo);
  color: var(--cor-perigo);
}

.mensagem-aviso {
  border-color: #fde68a;
  background-color: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
}

.mensagem-sucesso {
  border-color: #bbf7d0;
  background-color: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso);
}

/* ============================================================
   11. RESULTADOS
   ============================================================ */
.resultados,
.comparacao,
.recomendacao,
.mensagem-cliente {
  margin-top: 2.5rem;
}

/* Grelha de cartões de garantias. */
.lista-resultados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.cartao-garantia {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background-color: var(--cor-superficie);
}

.cartao-garantia-cabecalho {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cartao-garantia-nome {
  margin: 0;
  font-size: 1.05rem;
}

.cartao-garantia-preco {
  color: var(--cor-primaria-escura);
  font-weight: 800;
}

.cartao-garantia-detalhes {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

.cartao-garantia-detalhes li {
  margin-bottom: 0.2rem;
}

/* Blocos de detalhes dentro dos cartões de resultados. */
.detalhes-oferta {
  margin-top: 0.25rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--cor-borda);
}

.detalhes-oferta summary {
  color: var(--cor-primaria-escura);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.detalhes-oferta summary:hover {
  color: var(--cor-primaria);
}

.bloco-detalhes {
  margin-top: 0.6rem;
}

.bloco-detalhes h4 {
  margin-bottom: 0.25rem;
  font-size: 0.88rem;
}

/* ============================================================
   12. TABELA DE COMPARAÇÃO
   ------------------------------------------------------------
   A tabela é larga. O contentor .tabela-responsiva permite
   deslizar horizontalmente no telemóvel sem partir a página.
   ============================================================ */
.tabela-responsiva {
  overflow-x: auto;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background-color: var(--cor-superficie);
}

.tabela-comparacao {
  width: 100%;
  min-width: 1050px;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.tabela-comparacao th,
.tabela-comparacao td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--cor-borda);
  text-align: left;
  vertical-align: top;
}

.tabela-comparacao td {
  line-height: 1.45;
}

.tabela-comparacao th {
  background-color: var(--cor-fundo-suave);
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabela-comparacao tbody tr:last-child td {
  border-bottom: none;
}

.tabela-comparacao tbody tr:hover {
  background-color: var(--cor-fundo-suave);
}

/* Listas dentro das células da tabela de comparação. */
.lista-celula {
  margin: 0;
  padding-left: 1rem;
}

.lista-celula li {
  margin-bottom: 0.2rem;
}

.celula-nota {
  display: block;
  margin-top: 0.35rem;
  color: var(--cor-texto-suave);
  font-size: 0.82rem;
}

/* ============================================================
   13. RECOMENDAÇÃO E MENSAGEM AO CLIENTE
   ============================================================ */
.cartao-recomendacao {
  padding: 1.25rem;
  border-left: 4px solid var(--cor-primaria);
  border-radius: var(--raio-pequeno);
  background-color: var(--cor-primaria-clara);
}

.cartao-recomendacao h3 {
  margin-bottom: 0.4rem;
}

.recomendacao-preco {
  margin-bottom: 0.4rem;
  color: var(--cor-primaria-escura);
  font-size: 1.35rem;
  font-weight: 800;
}

.cartao-recomendacao .cartao-garantia-detalhes {
  margin-top: 0.5rem;
  margin-bottom: 0.6rem;
}

.area-mensagem {
  width: 100%;
  min-height: 12rem;
  padding: 0.9rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  background-color: var(--cor-superficie);
  line-height: 1.55;
  resize: vertical;
}

.area-mensagem:focus {
  border-color: var(--cor-primaria);
  outline: none;
  box-shadow: 0 0 0 3px var(--cor-foco-suave);
}

.mensagem-acoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.estado-copia {
  color: var(--cor-sucesso);
  font-size: 0.9rem;
  font-weight: 700;
}

.estado-copia-erro {
  color: var(--cor-perigo);
}

/* ============================================================
   14. DEFINIÇÕES
   ============================================================ */
#definicoes .cartao {
  margin-bottom: 1rem;
}

#definicoes code {
  padding: 0.15rem 0.35rem;
  border-radius: 5px;
  background-color: var(--cor-fundo-suave);
  font-size: 0.9em;
}

/* ============================================================
   15. RODAPÉ
   ============================================================ */
.rodape {
  padding: 1.5rem 1.25rem;
  border-top: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
  font-size: 0.86rem;
  text-align: center;
}

.rodape p {
  margin: 0;
}

/* ============================================================
   16. UTILITÁRIOS
   ============================================================ */

/* Esconde visualmente, mas mantém disponível para leitores de ecrã.
   Usado no caption da tabela e nas etiquetas escondidas. */
.visualmente-escondido {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ligação "Skip to main content": fica escondida até receber foco. */
.ligacao-salto {
  position: absolute;
  top: -4rem;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 0.9rem;
  border-radius: var(--raio-pequeno);
  background-color: var(--cor-botao-primario);
  color: var(--cor-botao-primario-texto);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--transicao);
}

.ligacao-salto:focus {
  top: 1rem;
  color: var(--cor-botao-primario-texto);
}

/* Texto para zonas ainda sem resultados. */
.texto-vazio {
  margin: 0;
  color: var(--cor-texto-suave);
  font-style: italic;
}

/* Aviso para quando o JavaScript está desligado. */
.aviso-noscript {
  margin-bottom: 1.5rem;
  padding: 0.9rem 1rem;
  border: 1px solid #fde68a;
  border-radius: var(--raio-pequeno);
  background-color: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
}

/* Selos de estado (confirmado, a confirmar, incompleto).
   Serão usados nos cartões de resultados na Etapa 5. */
.selo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.selo-confirmado {
  background-color: #dcfce7;
  color: #166534;
}

.selo-a-confirmar {
  background-color: #fef3c7;
  color: #92400e;
}

.selo-incompleto {
  background-color: #fee2e2;
  color: #991b1b;
}

/* ============================================================
   17. BOTÃO DE TEMA E AJUSTES DO TEMA ESCURO
   ============================================================ */
.botao-tema {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 999px;
  background-color: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao),
    color var(--transicao);
}

.botao-tema:hover {
  background-color: var(--cor-fundo-suave);
}

.botao-tema[aria-pressed="true"] {
  border-color: var(--cor-primaria);
  background-color: var(--cor-primaria-clara);
  color: var(--cor-primaria-escura);
}

.tema-icone {
  font-size: 1rem;
  line-height: 1;
}

/* Ajustes pontuais que não cabem nas variáveis. */
[data-tema="escuro"] .cabecalho {
  background-color: rgba(15, 23, 42, 0.95);
}

[data-tema="escuro"] .mensagem-erro {
  border-color: #7f1d1d;
}

[data-tema="escuro"] .mensagem-aviso {
  border-color: #78350f;
}

[data-tema="escuro"] .mensagem-sucesso {
  border-color: #14532d;
}

[data-tema="escuro"] .aviso-noscript {
  border-color: #78350f;
}

[data-tema="escuro"] .selo-confirmado {
  background-color: #14532d;
  color: #86efac;
}

[data-tema="escuro"] .selo-a-confirmar {
  background-color: #451a03;
  color: #fcd34d;
}

[data-tema="escuro"] .selo-incompleto {
  background-color: #450a0a;
  color: #fca5a5;
}

[data-tema="escuro"] .campo input::placeholder,
[data-tema="escuro"] .area-mensagem::placeholder {
  color: #94a3b8;
}

/* ============================================================
   18. RESPONSIVO
   ------------------------------------------------------------
   @media aplica regras apenas quando o ecrã tem uma certa largura.
   Primeiro para o cabeçalho (1100px), depois para tablets (900px)
   e para telemóveis (680px).
   ============================================================ */

/* Em ecrãs mais estreitos, o cabeçalho passa para três linhas:
   marca à esquerda, controlos ao centro e navegação centrada. */
@media (max-width: 1100px) {
  .cabecalho-conteudo {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .marca {
    align-self: flex-start;
  }

  .seletor-idioma {
    order: 2;
    flex-basis: auto;
    width: 100%;
  }

  .navegacao {
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .navegacao-ligacao {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  /* A navegação mantém-se centrada e pode passar para várias linhas
     em ecrãs muito estreitos. */
  .navegacao {
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .navegacao-ligacao {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .painel-acoes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .conteudo-principal {
    padding: 1.5rem 1rem 3rem;
  }

  .cabecalho-conteudo {
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }

  /* No telemóvel, o formulário fica numa só coluna. */
  .formulario {
    grid-template-columns: 1fr;
    padding: 1.1rem;
  }

  .campos-adicionais {
    grid-template-columns: 1fr;
  }

  .formulario-acoes {
    grid-column: auto;
  }

  .secao {
    margin-bottom: 2.5rem;
  }

  .cartao {
    padding: 1.15rem;
  }

  /* Ligações de navegação um pouco mais compactas no telemóvel. */
  .navegacao-ligacao {
    padding: 0.45rem 0.65rem;
    font-size: 0.9rem;
  }

  /* No telemóvel, a etiqueta "Idioma" fica escondida visualmente,
     mas continua disponível para leitores de ecrã. Assim o seletor
     de idioma e o botão do tema cabem na mesma linha. */
  .seletor-idioma label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .tabela-comparacao {
    min-width: 1080px;
  }
}

/* ============================================================
   19. MOVIMENTO REDUZIDO
   ------------------------------------------------------------
   Algumas pessoas preferem menos animações. Esta regra respeita
   essa preferência do sistema operativo.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}