/* ============================
   LAYOUT E ESTRUTURA
   ============================ */

.cabecalho {
  text-align: center;
  margin-bottom: var(--espacamento-grande);
  position: relative;
}

.titulo {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--cor-secundaria);
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.banner {
  margin-bottom: var(--espacamento-grande);
}

.secao-temporizador {
  background: var(--fundo-cartao);
  padding: var(--espacamento-secao);
  border-radius: var(--raio-borda-grande);
  box-shadow: var(--sombra-padrao);
  position: relative;
}

.menu-cartao {
  list-style: none;
  display: flex;
  justify-content: space-around;
  margin-bottom: var(--espacamento-extra);
  flex-wrap: wrap;
  gap: var(--espacamento-pequeno);
}

.controles {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--espacamento-extra);
  gap: var(--espacamento-medio);
}

.botoes-controle {
  display: flex;
  justify-content: space-between;
  gap: var(--espacamento-medio);
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.rodape {
  margin-top: var(--espacamento-grande);
  font-size: 0.9rem;
  opacity: 0.8;
}

/* ============================
   ÍCONES E ELEMENTOS FLUTUANTES
   ============================ */

.info-icon {
  position: absolute;
  top: var(--espacamento-medio);
  right: var(--espacamento-medio);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all var(--transicao-rapida);
  backdrop-filter: blur(10px);
  z-index: 5;
}

.info-icon:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--cor-secundaria);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.info-icon:active {
  transform: scale(0.95);
}

.icone-botao {
  margin-right: var(--espacamento-pequeno);
}