/* Tokens da marca: cores, fonte, tamanhos e espaçamentos definidos apenas aqui. */
:root {
  --cor-fundo: #F4F1EA;
  --cor-marinho: #1B2352;
  --cor-roxo: #6A1BFF;
  --cor-branco: #FFFFFF;
  --cor-texto-botao: var(--cor-fundo);
  --cor-botao-hover: #2A3470;
  /* Azul-marinho suavizado para texto secundário; contraste de 5,7:1 sobre o fundo. */
  --cor-texto-suave: #585D7D;

  --fonte: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --peso-titulo: 600;

  --relogio-tamanho: min(300px, 30svh);
  --nome-altura: 26px;
  --frase-tamanho: 30px;
  --frase-espacamento-letras: -0.02em;
  --frase-altura-linha: 1.15;
  --botao-tamanho-texto: 18px;
  --botao-altura: 56px;
  --posicionamento-tamanho: 15px;
  --posicionamento-altura-linha: 1.4;
  --posicionamento-linha: calc(var(--posicionamento-tamanho) * var(--posicionamento-altura-linha));
  --detalhes-tamanho: 13px;
  --detalhes-linha: calc(var(--detalhes-tamanho) * var(--posicionamento-altura-linha));
  /* Altura do texto do rodapé: posicionamento, espaço entre linhas e detalhes. */
  --rodape-texto: calc(var(--posicionamento-linha) + var(--espaco-rodape-linhas) + var(--detalhes-linha));

  --espaco-s: 16px;
  --espaco-l: 40px;
  --margem-lateral: 24px;

  /* O nome fica junto ao relógio, como assinatura, com uma pausa maior antes da frase. */
  --espaco-relogio-nome: 24px;
  --espaco-nome-frase: 48px;
  --espaco-frase-botao: 40px;
  --espaco-botao-posicionamento: 16px;
  --espaco-rodape: 32px;
  --espaco-rodape-linhas: 4px;

  --raio-pilula: 999px;
  --foco-largura: 3px;
  --foco-distancia: 4px;
  --transicao: 160ms ease;
  --frase-transicao: 250ms ease;
}

@media (max-width: 640px) {
  :root {
    --relogio-tamanho: min(240px, 100vw - 2 * var(--margem-lateral), 46svh);
    --nome-altura: 20px;
    /* 24px, reduzido em ecrãs muito estreitos para a variante mais larga da frase ("A tua empresa...") caber numa linha. */
    --frase-tamanho: min(24px, (100vw - 2 * var(--margem-lateral)) / 15.2);
    --margem-lateral: 16px;
    --espaco-relogio-nome: 20px;
    --espaco-nome-frase: 36px;
    --posicionamento-tamanho: 13px;
    --detalhes-tamanho: 12px;
    --espaco-botao-posicionamento: 10px;
    --espaco-rodape-linhas: 2px;
  }
}

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

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

/* Coluna: o conteúdo ocupa o espaço disponível e o rodapé fica no fundo. */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--cor-fundo);
  color: var(--cor-marinho);
  font-family: var(--fonte);
  font-weight: var(--peso-titulo);
  -webkit-font-smoothing: antialiased;
}

.palco {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-l) var(--margem-lateral);
  text-align: center;
}

/* Relógio */

.relogio {
  display: block;
  width: var(--relogio-tamanho);
  height: var(--relogio-tamanho);
  overflow: visible;
  margin-bottom: var(--espaco-relogio-nome);
  /* Evita a marcação de seleção ao clicar duas vezes no relógio. */
  -webkit-user-select: none;
  user-select: none;
}

.relogio__marca {
  stroke: var(--cor-marinho);
  stroke-width: 4;
  stroke-linecap: round;
}

.relogio__marca--principal {
  stroke-width: 8;
}

.relogio__ponteiro line {
  stroke-linecap: round;
}

.relogio__contorno {
  stroke: var(--cor-marinho);
}

.relogio__preenchimento {
  stroke: var(--cor-branco);
}

/* O contorno é uma linha mais larga por baixo da linha branca. */
.relogio__ponteiro--horas .relogio__contorno { stroke-width: 14; }
.relogio__ponteiro--horas .relogio__preenchimento { stroke-width: 8; }
.relogio__ponteiro--minutos .relogio__contorno { stroke-width: 11; }
.relogio__ponteiro--minutos .relogio__preenchimento { stroke-width: 5; }

.relogio__halo {
  stroke: var(--cor-branco);
  stroke-width: 5;
}

.relogio__segundos {
  stroke: var(--cor-roxo);
  stroke-width: 2;
}

.relogio__eixo {
  fill: var(--cor-roxo);
  stroke: var(--cor-marinho);
  stroke-width: 2.5;
}

/* Nome */

.nome {
  margin: 0;
  line-height: 0;
}

.nome img {
  display: block;
  width: auto;
  height: var(--nome-altura);
}

/* Frase */

.frase {
  margin: var(--espaco-nome-frase) 0 0;
  font-size: var(--frase-tamanho);
  font-weight: var(--peso-titulo);
  line-height: var(--frase-altura-linha);
  letter-spacing: var(--frase-espacamento-letras);
  text-wrap: balance;
}

.frase__linha {
  display: block;
  white-space: nowrap;
}

/* A segunda linha alterna de palavra (relogio.js); a opacidade faz a transição. */
.frase__variavel {
  display: block;
  transition: opacity var(--frase-transicao);
}

.frase__variavel--oculta {
  opacity: 0;
}

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

/* Contacto */

.contacto {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--espaco-frase-botao);
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--botao-altura);
  padding: 0 var(--espaco-l);
  border-radius: var(--raio-pilula);
  background: var(--cor-marinho);
  color: var(--cor-texto-botao);
  font-size: var(--botao-tamanho-texto);
  font-weight: var(--peso-titulo);
  text-decoration: none;
  transition: background-color var(--transicao), transform var(--transicao);
}

.botao:hover {
  background: var(--cor-botao-hover);
  transform: translateY(-1px);
}

.botao:active {
  transform: translateY(0);
}

.botao:focus-visible {
  outline: var(--foco-largura) solid var(--cor-marinho);
  outline-offset: var(--foco-distancia);
}

/* Rodapé: posicionamento e copyright, discretos no fundo da página */

.rodape {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-rodape-linhas);
  padding: 0 var(--margem-lateral) var(--espaco-rodape);
  color: var(--cor-texto-suave);
  line-height: var(--posicionamento-altura-linha);
  text-align: center;
}

.rodape p {
  margin: 0;
}

.posicionamento {
  font-size: var(--posicionamento-tamanho);
}

.rodape__detalhes {
  font-size: var(--detalhes-tamanho);
}

@media (max-width: 640px) {
  /* Reserva a altura do botão e do rodapé fixos para não taparem a frase. */
  .palco {
    padding-bottom: calc(
      2 * var(--espaco-s)
      + var(--botao-altura)
      + var(--espaco-botao-posicionamento)
      + var(--rodape-texto)
      + env(safe-area-inset-bottom, 0px)
    );
  }

  /* Botão e rodapé ficam fixos e empilhados junto ao fundo do ecrã. O fundo
     creme impede que o conteúdo apareça por trás se a página fizer scroll. */
  .contacto,
  .rodape {
    position: fixed;
    left: 0;
    right: 0;
    background: var(--cor-fundo);
  }

  .contacto {
    bottom: calc(var(--espaco-s) + var(--rodape-texto) + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
    margin: 0;
    padding: var(--espaco-s) var(--margem-lateral) var(--espaco-botao-posicionamento);
  }

  .rodape {
    bottom: 0;
    padding: 0 var(--margem-lateral) calc(var(--espaco-s) + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .botao {
    transition: none;
  }

  .botao:hover {
    transform: none;
  }
}